*{
	padding: 0;
	font-family: spaceFont, serif;
}

@font-face
{
	font-family: spaceFont;
	src: url(../fonts/Xolonium-Regular.ttf);
}

html{
	position: relative;
	min-height: 100%;
}
a {
	text-decoration: none;
}
body
{
	margin: 0;
}

/* Shared page body background */
.page-body {
	padding-top: 3rem;
	background: linear-gradient(135deg, #0a0a2e 0%, #1a1a3e 50%, #000000 100%);
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/* Ensure page content sits above the particle layers */
.page-body > *:not(#navbar-placeholder):not(script):not(#exploration-progress):not(#achievement-toast-container):not(#achievement-toggle):not(#achievement-panel):not(.click-burst):not(#loading-screen):not(.game-particles) {
	position: relative;
	z-index: 1;
}

/* Keep bullet points inside card boundaries */
.card-body ul {
	padding-left: 1.2rem;
	margin-left: 0;
}
.card-body li, .card-text li {
	padding-left: 0.2rem;
	margin-left: 1rem;
	list-style-position: inside;
}

/* Constrain single cards that shouldn't stretch full width */
.card-narrow {
	max-width: 33.5rem;
}

/* Center images horizontally */
.img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Horizontal rule color variants */
.hr-grey {
	border-color: grey;
}
.hr-white {
	border-color: white;
}

/* Sidebar sticky offset below fixed navbar */
.sidebar-sticky {
	top: 56px;
}

/* Main content area grows to push footer to the bottom */
.content-wrapper {
	flex: 1;
}

/* Transparent jumbotron with white text */
.jumbotron-transparent {
	background: transparent;
	color: white;
}

/* White link color for use on dark backgrounds */
.link-white {
	color: white;
}
.link-white:hover {
	color: #ccc;
}

/* Lead text on dark backgrounds */
.lead-white {
	color: white;
}

/* Glassmorphism card overrides */
.page-body .card.bg-dark,
.page-body .card.text-white.bg-dark {
	background: rgba(255,255,255,0.05) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Glassmorphism sidebar list items */
.page-body .list-group-item-dark {
	background: rgba(255,255,255,0.06) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-color: rgba(255,255,255,0.1);
	color: #ccc;
	transition: transform 0.2s ease, background 0.2s ease;
}
.page-body .list-group-item-dark.active {
	background: rgba(255,255,255,0.12) !important;
	border-color: rgba(255,255,255,0.2);
	color: white;
}
.page-body .list-group-item-dark:hover:not(.active) {
	background: rgba(255,255,255,0.09) !important;
	color: white;
}

/* Glassmorphism navbar */
.navbar {
	background: rgba(10,10,30,0.7) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Footer */
.site-footer {
	background: rgba(255,255,255,0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(255,255,255,0.08);
	color: #aaa;
	padding: 1.5rem 0;
	text-align: center;
	font-size: 0.85rem;
}
.site-footer a {
	color: #ccc;
}
.site-footer a:hover {
	color: white;
}

/* Consistent carousel image sizing */
.carousel-inner {
	background: rgba(0,0,0,0.3);
}
.carousel-item {
	aspect-ratio: 16 / 9;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.3);
}
.carousel-item:not(.active) {
	display: none !important;
}
.carousel-inner img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Card hover effect */
.page-body .card.bg-dark:hover,
.page-body .card.text-white.bg-dark:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 32px rgba(100, 120, 255, 0.15);
}

/* Hero section */
.hero-section {
	text-align: center;
	padding: 4rem 1rem 1rem;
	background: transparent;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.hero-name {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: white;
}

.hero-typing {
	font-size: 1.5rem;
	color: rgba(180, 200, 255, 0.9);
	min-height: 2.5rem;
}

.hero-cursor {
	display: inline;
	animation: blink 1s step-end infinite;
}

.hero-tagline {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 1rem;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@media (max-width: 767px) {
	/* Hero */
	.hero-name {
		font-size: 2.5rem;
	}
	.hero-typing {
		font-size: 1.1rem;
	}

	/* Global mobile text sizing */
	.jumbotron-transparent .display-4 {
		font-size: 1.6rem;
	}
	.jumbotron-transparent .lead {
		font-size: 0.95rem;
	}
	.card-title {
		font-size: 1.1rem;
	}
	.card-text {
		font-size: 0.9rem;
	}

	/* Tighter spacing on mobile */
	.card-body {
		padding: 0.85rem;
	}
	.card-deck {
		margin-left: 0.5rem !important;
		margin-right: 0.5rem !important;
	}

	/* Progress bar behind navbar dropdown */
	#exploration-progress {
		z-index: 1020 !important;
	}
	/* Achievement — bottom right on mobile */
	#achievement-toggle {
		z-index: 1020 !important;
		top: auto !important;
		bottom: 20px !important;
	}
	#achievement-panel {
		z-index: 1020 !important;
		top: auto !important;
		bottom: 74px !important;
	}
	#achievement-toast-container {
		top: auto !important;
		bottom: 80px !important;
		flex-direction: column !important;
	}

	/* Skills: single centered column */
	.skill-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.skill-category {
		min-width: auto;
		font-size: 0.8rem;
		margin-bottom: 0.2rem;
	}
	.skill-badge {
		padding: 0.25rem 0.55rem;
		font-size: 0.72rem;
		margin: 0.15rem;
	}

	/* Sidebar items */
	.list-group-item {
		padding: 0.6rem 0.85rem;
		font-size: 0.9rem;
	}
}

/* Skill badge styles */
.skill-badge {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	margin: 0.3rem;
	border-radius: 20px;
	background: rgba(100, 120, 255, 0.15);
	color: rgba(200, 210, 255, 0.9);
	border: 1px solid rgba(100, 120, 255, 0.25);
	font-size: 0.85rem;
}
.skill-badge:hover {
	background: rgba(100, 120, 255, 0.3);
	color: white;
}

.skill-category {
	color: rgba(180, 200, 255, 0.8);
	font-weight: 600;
	font-size: 0.9rem;
	min-width: 140px;
}

.skill-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

/* Social link icons */
.social-links {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(200,210,255,0.9);
	font-size: 1.4rem;
	transition: transform 0.3s ease, background 0.3s ease;
}

.social-icon:hover {
	background: rgba(100,120,255,0.25);
	color: white;
	transform: translateY(-3px);
	text-decoration: none;
}

/* Gamification & effect elements — remove from flex flow */
#exploration-progress,
#achievement-toast-container,
#achievement-toggle,
#achievement-panel,
.click-burst,
#loading-screen,
.game-particles {
	flex: none;
}

/* Exploration progress bar */
#exploration-progress {
	position: fixed;
	top: 56px;
	left: 0;
	width: 100%;
	height: 4px;
	z-index: 1031;
	background: rgba(255,255,255,0.08);
	cursor: default;
}
#exploration-progress:hover {
	height: 18px;
	transition: height 0.2s ease;
}
.exploration-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #4a5aff, #8b9aff);
	box-shadow: 0 0 8px rgba(100,120,255,0.5);
	transition: width 0.8s ease;
	position: relative;
}
.exploration-progress-label {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.6rem;
	color: white;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
}
#exploration-progress:hover .exploration-progress-label {
	opacity: 1;
}

/* Achievement toast notifications */
#achievement-toast-container {
	position: fixed;
	top: 70px;
	right: 20px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.achievement-toast {
	display: flex;
	align-items: center;
	background: rgba(10,10,30,0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(100,120,255,0.3);
	border-radius: 10px;
	padding: 12px 16px;
	color: white;
	min-width: 260px;
	pointer-events: auto;
	animation: toastSlideIn 0.4s ease forwards;
}
.achievement-toast.toast-exit {
	animation: toastSlideOut 0.5s ease forwards;
}
.achievement-icon {
	font-size: 1.6rem;
	margin-right: 12px;
	flex-shrink: 0;
}
.achievement-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(100,120,255,0.9);
	margin-bottom: 2px;
}
.achievement-title {
	font-weight: 600;
	font-size: 0.95rem;
}
.achievement-desc {
	font-size: 0.8rem;
	color: rgba(180,200,255,0.8);
	margin-top: 2px;
}

/* Achievement panel toggle button */
#achievement-toggle {
	position: fixed;
	top: 64px;
	right: 20px;
	z-index: 10001;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(10,10,30,0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(100,120,255,0.3);
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, background 0.3s ease;
}
#achievement-toggle:hover {
	background: rgba(100,120,255,0.25);
	transform: scale(1.1);
}
#achievement-toggle .badge-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: rgba(100,120,255,0.9);
	color: white;
	font-size: 0.65rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* Achievement panel */
#achievement-panel {
	position: fixed;
	top: 114px;
	right: 20px;
	z-index: 10001;
	width: 280px;
	background: rgba(10,10,30,0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(100,120,255,0.25);
	border-radius: 12px;
	padding: 16px;
	color: white;
	display: none;
}
#achievement-panel.open {
	display: block;
	animation: toastSlideIn 0.3s ease forwards;
}
#achievement-panel h6 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(100,120,255,0.9);
	margin-bottom: 12px;
}
.achievement-panel-item {
	display: flex;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.achievement-panel-item:last-child {
	border-bottom: none;
}
.achievement-panel-item.locked {
	opacity: 0.35;
}
.achievement-panel-item .achievement-icon {
	font-size: 1.2rem;
	margin-right: 10px;
}
.achievement-panel-item .achievement-title {
	font-size: 0.85rem;
	font-weight: 600;
}
.achievement-panel-item .achievement-desc {
	font-size: 0.72rem;
	margin-top: 1px;
}
#achievement-clear {
	display: block;
	margin-top: 12px;
	background: none;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 6px;
	color: rgba(255,255,255,0.5);
	font-size: 0.75rem;
	padding: 4px 10px;
	cursor: pointer;
	width: 100%;
}
#achievement-clear:hover {
	color: white;
	border-color: rgba(255,255,255,0.3);
}

@keyframes toastSlideIn {
	from { transform: translateX(120%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(120%); opacity: 0; }
}

/* === Custom cursor (reticle) === */
.page-body {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%238b9aff' stroke-width='1.5' opacity='0.8'/%3E%3Cline x1='12' y1='4' x2='12' y2='8' stroke='%238b9aff' stroke-width='1.5'/%3E%3Cline x1='12' y1='16' x2='12' y2='20' stroke='%238b9aff' stroke-width='1.5'/%3E%3Cline x1='4' y1='12' x2='8' y2='12' stroke='%238b9aff' stroke-width='1.5'/%3E%3Cline x1='16' y1='12' x2='20' y2='12' stroke='%238b9aff' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%238b9aff'/%3E%3C/svg%3E") 12 12, crosshair;
}

/* === Game-inspired floating particles === */
.game-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.game-particle {
	position: absolute;
	opacity: 0.4;
	animation: particleFloat linear infinite;
}
.game-particle:nth-child(odd) {
	opacity: 0.25;
}
/* Card shape — nod to Hearthstone/Solitaire */
.game-particle.card-shape {
	width: 12px;
	height: 17px;
	border: 1.5px solid rgba(180,200,255,0.6);
	border-radius: 2px;
}
/* Diamond/gem shape */
.game-particle.diamond-shape {
	width: 10px;
	height: 10px;
	border: 1.5px solid rgba(140,120,255,0.6);
	transform: rotate(45deg);
}
/* AR grid dot */
.game-particle.grid-dot {
	width: 3px;
	height: 3px;
	background: rgba(0,200,220,0.5);
	border-radius: 50%;
}
/* Controller/gamepad shape — small cross */
.game-particle.cross-shape {
	width: 10px;
	height: 10px;
	position: absolute;
}
.game-particle.cross-shape::before,
.game-particle.cross-shape::after {
	content: '';
	position: absolute;
	background: rgba(180,200,255,0.5);
	border-radius: 1px;
}
.game-particle.cross-shape::before {
	width: 100%;
	height: 2px;
	top: 50%;
	transform: translateY(-50%);
}
.game-particle.cross-shape::after {
	width: 2px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}

@keyframes particleFloat {
	0% {
		transform: translateY(105vh) rotate(0deg);
		opacity: 0;
	}
	5% { opacity: 0.35; }
	95% { opacity: 0.35; }
	100% {
		transform: translateY(-5vh) rotate(360deg);
		opacity: 0;
	}
}

/* === Click burst effect === */
.click-burst {
	position: fixed;
	pointer-events: none;
	z-index: 9998;
}
.click-burst-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #8b9aff;
	box-shadow: 0 0 6px rgba(139,154,255,0.8);
	animation: burstOut 0.5s ease-out forwards;
}
@keyframes burstOut {
	0% { transform: translate(0,0) scale(1); opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* === Loading screen === */
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	background: linear-gradient(135deg, #0a0a2e 0%, #1a1a3e 50%, #000000 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
#loading-screen.loading-fade-out {
	opacity: 0;
	transition: opacity 0.6s ease;
}
.loading-content {
	text-align: center;
	color: white;
	width: 80%;
	max-width: 500px;
}
.loading-title {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
	color: white;
}
.loading-bar-track {
	width: 100%;
	height: 6px;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	overflow: hidden;
}
.loading-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #4a5aff, #8b9aff);
	box-shadow: 0 0 12px rgba(100,120,255,0.6);
	transition: width 2.5s ease;
	border-radius: 3px;
}
.loading-tip {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: rgba(180,200,255,0.7);
	font-style: italic;
	min-height: 1.5em;
	transition: opacity 0.2s ease;
}

/* === Career timeline === */
.timeline-container {
	padding: 1rem 0 0;
	width: 100%;
}
/* Pixel character walking along timeline */
.timeline-character {
	position: absolute;
	width: 64px;
	height: 64px;
	background: url('../img/character-spritesheet.png') 0 -704px;
	background-size: 832px 3456px;
	image-rendering: pixelated;
	animation: spriteWalk 0.6s steps(9) infinite;
	top: -8px;
	z-index: 3;
	pointer-events: none;
}
@keyframes spriteWalk {
	from { background-position-x: 0; }
	to { background-position-x: -576px; }
}
.timeline-character.idle {
	background-position: 0 -640px;
	animation: none;
}

/* Sprite on about me page */
.about-sprite {
	width: 64px;
	height: 64px;
	background: url('../img/character-spritesheet.png') 0 -640px;
	background-size: 832px 3456px;
	image-rendering: pixelated;
	animation: spriteWalk 0.6s steps(9) infinite;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5rem;
}

/* 404 page sprite */
.sprite-404 {
	width: 128px;
	height: 128px;
	background: url('../img/character-spritesheet.png') 0 -1280px;
	background-size: 1664px 6912px;
	image-rendering: pixelated;
	margin: 2rem auto;
	display: block;
}

.timeline-heading {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.85rem;
	color: rgba(180,200,255,0.6);
	margin-bottom: 0;
}
.timeline {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	padding: 1.5rem 1.5rem 7rem;
}
/* Horizontal connecting line */
.timeline::before {
	content: '';
	position: absolute;
	top: calc(1.5rem + 16px);
	left: 1.5rem;
	right: 1.5rem;
	height: 2px;
	background: linear-gradient(90deg, rgba(100,120,255,0.1), rgba(100,120,255,0.4), rgba(100,120,255,0.1));
	z-index: 0;
}
.timeline-info {
	position: relative;
	z-index: 1;
}
.timeline-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
	padding: 0 0.5rem;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
}
.timeline-node {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--node-color, #8b9aff) 40%, #0a0a2e);
	border: 2px solid var(--node-color, #8b9aff);
	position: relative;
	z-index: 2;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55rem;
	font-weight: 700;
	color: var(--node-color, #8b9aff);
	letter-spacing: 0.02em;
}
.timeline-entry:hover .timeline-node,
.timeline-entry.active .timeline-node {
	transform: scale(1.3);
	background: color-mix(in srgb, var(--node-color, #8b9aff) 50%, transparent);
	box-shadow: 0 0 18px color-mix(in srgb, var(--node-color, #8b9aff) 50%, transparent);
	color: white;
}
.timeline-date {
	font-size: 0.8rem;
	color: rgba(180,200,255,0.6);
	margin-top: 10px;
	white-space: nowrap;
}
.timeline-company {
	font-size: 1rem;
	font-weight: 600;
	color: white;
	margin-top: 4px;
	text-align: center;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.timeline-entry:hover .timeline-company,
.timeline-entry.active .timeline-company {
	color: var(--node-color, white);
}
.timeline-role {
	font-size: 0.8rem;
	color: rgba(180,200,255,0.7);
	text-align: center;
}
.timeline-detail {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 12px;
	width: 340px;
	background: rgba(10,10,30,0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(100,120,255,0.25);
	border-radius: 10px;
	padding: 12px;
	color: white;
	font-size: 0.8rem;
	z-index: 100;
	text-align: left;
}
.timeline-entry.active .timeline-detail {
	display: block;
	animation: timelinePop 0.25s ease forwards;
}
/* Keep edge popups on screen */
.timeline-entry:first-child .timeline-detail {
	left: 0;
	transform: none;
}
.timeline-detail p {
	margin: 0 0 8px;
	color: rgba(200,210,255,0.85);
	line-height: 1.4;
}
.timeline-detail a {
	color: #8b9aff;
	font-size: 0.75rem;
	font-weight: 600;
}
.timeline-detail a:hover {
	color: white;
}
.timeline-slideshow {
	margin-bottom: 10px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0,0,0,0.3);
}
.timeline-slideshow-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	display: block;
	background: rgba(0,0,0,0.2);
}
.timeline-slideshow-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 6px 0;
}
.timeline-nav-btn {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	color: white;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	line-height: 1;
}
.timeline-nav-btn:hover {
	background: rgba(100,120,255,0.3);
}
.timeline-nav-count {
	font-size: 0.7rem;
	color: rgba(180,200,255,0.7);
}
@keyframes timelinePop {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile: vertical centered timeline */
@media (max-width: 767px) {
	.timeline-container {
		overflow-x: visible;
		padding: 1rem;
	}
	.timeline {
		flex-direction: column;
		align-items: center;
		min-width: auto;
		padding: 1rem 0 2rem;
	}
	.timeline::before {
		top: 1rem;
		bottom: 2rem;
		left: 50%;
		right: auto;
		width: 2px;
		height: auto;
		transform: translateX(-1px);
		background: linear-gradient(180deg, rgba(100,120,255,0.1), rgba(100,120,255,0.4), rgba(100,120,255,0.1));
	}
	.timeline-entry {
		flex-direction: column;
		align-items: center;
		text-align: center;
		min-width: auto;
		margin-bottom: 1.5rem;
	}
	.timeline-node {
		flex-shrink: 0;
	}
	.timeline-info {
		text-align: center;
	}
	.timeline-company {
		text-align: center;
	}
	.timeline-detail {
		position: static;
		transform: none;
		margin-top: 8px;
		width: 280px;
		max-width: 90vw;
	}
	.timeline-entry.active .timeline-detail {
		animation: none;
	}
}