@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

:root {
	--bg: #000000;
	--clr-1: #00c2ff;
	--clr-2: #33ff8c;
	--clr-3: #ffc640;
	--clr-4: #e54cff;

	--blur: 1rem;
	--fs: clamp(3rem, 8vw, 7rem);
	--ls: clamp(-1.75px, -0.25vw, -3.5px);
}


.content {
	text-align: center;
}

.title {
	font-size: var(--fs);
	font-weight: 800;
	letter-spacing: var(--ls);
	position: relative;
	overflow: hidden;
	/* background: var(--bg); */
	margin: 0;
}

.aurora {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	mix-blend-mode: darken;
	pointer-events: none;
}

.aurora__item {
	overflow: hidden;
	position: absolute;
	width: 60vw;
	height: 60vw;
	background-color: var(--clr-1);
	border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	filter: blur(var(--blur));
	mix-blend-mode: overlay;
}

.aurora__item:nth-of-type(1) {
	top: -50%;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
	background-color: var(--clr-3);
	right: 0;
	top: 0;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
	background-color: var(--clr-2);
	left: 0;
	bottom: 0;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
	background-color: var(--clr-4);
	right: 0;
	bottom: -50%;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
	0% {
		top: 0;
		right: 0;
	}

	50% {
		top: 100%;
		right: 75%;
	}

	75% {
		top: 100%;
		right: 25%;
	}

	100% {
		top: 0;
		right: 0;
	}
}

@keyframes aurora-2 {
	0% {
		top: -50%;
		left: 0%;
	}

	60% {
		top: 100%;
		left: 75%;
	}

	85% {
		top: 100%;
		left: 25%;
	}

	100% {
		top: -50%;
		left: 0%;
	}
}

@keyframes aurora-3 {
	0% {
		bottom: 0;
		left: 0;
	}

	40% {
		bottom: 100%;
		left: 75%;
	}

	65% {
		bottom: 40%;
		left: 50%;
	}

	100% {
		bottom: 0;
		left: 0;
	}
}

@keyframes aurora-4 {
	0% {
		bottom: -50%;
		right: 0;
	}

	50% {
		bottom: 0%;
		right: 40%;
	}

	90% {
		bottom: 50%;
		right: 25%;
	}

	100% {
		bottom: -50%;
		right: 0;
	}
}

@keyframes aurora-border {
	0% {
		border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	}

	25% {
		border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
	}

	50% {
		border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
	}

	75% {
		border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
	}

	100% {
		border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	}
}

/* @import url('./Fonts/WEB/css/satoshi.css');
/* @font-face {
    font-family: 'Satoshi-Light', 'Satoshi-LightItalic, Satoshi-Regular', 'Satoshi-Italic', 'Satoshi-Medium', 'Satoshi-MediumItalic', 'Satoshi-Bold', 'Satoshi-BoldItalic', 'Satoshi-Black', 'Satoshi-BlackItalic', 'Satoshi-Variable', 'Satoshi-VariableItalic';
} */

/* Regular */
@font-face {
	font-family: 'Custom';
	src: url('./Fonts/WEB/fonts/Satoshi-Regular.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

/* Italic */
@font-face {
	font-family: 'Custom';
	src: url('./Fonts/EBGaramond/EBGaramond-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}

/* Bold */
@font-face {
	font-family: 'Custom';
	src: url('./Fonts/WEB/fonts/Satoshi-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

/* Bold Italic */
@font-face {
	font-family: 'Custom';
	src: url('./Fonts/WEB/fonts/Satoshi-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}

* {
	font-family: 'Custom', serif;
}

.font-essentials {
	font-size: medium;
	color: #595959;
}

.font-medium {
	font-size: 1em;
	color: #b0b0b0;
}

.font-italic-EBG {
	font-size: 1.2em;
	color: #b0b0b0;
}

.font-title {
	/* font-size: 1.1em; */
	font-size: large;
}

/* body,
html {
  background: #181a1b;
  color: #e0e0e0;
  scroll-behavior: smooth;


  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
} */

body,
html {
	background: #181a1b;
	color: #e0e0e0;
	scroll-behavior: smooth;
	/* remove flexbox forcing */
	min-height: 100%;
}

.sticky-col {
	position: sticky;
	top: 56px;
	/* Or any other desired offset from the top */
	height: calc(100vh - 56px);
	/* Optional: Make it the full height of the viewport */
	overflow-y: auto;
	/* Optional: If the content inside might overflow */
}

/* Disable sticky behavior on small screens (below md breakpoint) */
@media (max-width: 767.98px) {
	.sticky-col {
		position: static;
		/* Revert to normal static positioning */
		top: auto;
		height: auto;
	}
}

.my-name {
	color: #39c;

	/* color: #cd4300;  */
	/* inspired from https://www.mosharaf.com/ */
}

.my-name:hover {
	color: rgb(9, 100, 146);
}

.my-name-strong {
	/* font-weight: 700; */
	color: #595959;
	font-size: 2.2rem !important;
}


/* for fitting text without wrapping (JS connected) */
.fit-my-name {
	white-space: nowrap;
	display: inline-block;
	width: 100%;
	/* Make it take up full row */
}

.fit-text {
	white-space: nowrap;
	display: inline-block;
	width: 100%;
	/* Make it take up full row */
}

/* for fitting text without wrapping (JS connected) */

/* Add scroll offset for anchor targets so they don't hide under the sticky navbar */
#about,
#education {
	scroll-margin-top: 60px;
	/* Adjust to match your navbar height */
}

#research {
	scroll-margin-top: 60px;
	/* Adjust to match your navbar height */
}

#publications {
	scroll-margin-top: 60px;
	/* Adjust to match your navbar height */
}

#achievements {
	scroll-margin-top: 60px;
	/* Adjust to match your navbar height */
}

/* Sliding page transition */
/* .page-transition {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #fff;
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(.77,0,.175,1);
  transform: translateX(-100vw); 
} */
/* .page-transition.active {
  transform: translateX(0); 
}
.page-transition.exit {
  transform: translateX(100vw); 
} */

.nav-link.active {
	/* color: #007bff !important; */
	/* font-weight: bold; */
	/* border-bottom: 2px solid #007bff; */
	/* background: rgba(0,123,255,0.05); */
}

.embed-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	/* 16:9 aspect ratio = 9/16 = 0.5625 → 56.25% */
	overflow: hidden;
}

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.doc-embed-container {
	width: 100%;
	min-height: 5000vh;
	height: 5000vh;
	margin: 2rem 0 1rem 0;
	display: flex;
	flex-direction: column;
}

.doc-embed-container iframe {
	width: 100%;
	height: 100%;
	min-height: 60vh;
	border: none;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.phd-banner {
	width: 100%;
	background: linear-gradient(90deg, #007cf0 0%, #00dfd8 100%);
	color: #fff;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	/* border-radius: 18px 18px 18px 18px; */
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	padding: 0.5rem 0;
	margin-bottom: 1.5rem;
	animation: fadeInDown 1s cubic-bezier(.77, 0, .175, 1);
}

.phd-banner span {
	display: inline-block;
	background: rgba(0, 0, 0, 0.10);
	padding: 0.2em 1.2em;
	border-radius: 1em;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pub-fade-img {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s cubic-bezier(.77, 0, .175, 1), transform 1s cubic-bezier(.77, 0, .175, 1);
	will-change: opacity, transform;
}

.pub-fade-img.visible {
	opacity: 1;
	transform: translateY(0);
}

.author-list .and-more {
	color: #73818e;
	cursor: pointer;
	font-weight: 500;
	margin-left: 0.2em;
	transition: color 0.2s;
	user-select: none;
}

.author-list .and-more:hover,
.author-list .and-more:focus {
	color: #3c4d4c;
	text-decoration: dotted underline;
}

.author-list .hidden-authors {
	white-space: pre-wrap;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.img-shadow {
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 1.5px 4px rgba(0, 0, 0, 0.08);
	object-fit: cover;
}

.pub-btn-appear {
	opacity: 0;
	transform: translateX(-40px);
	animation: pubBtnIn 0.7s cubic-bezier(.77, 0, .175, 1) forwards;
}

@keyframes pubBtnIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.pub-btn-sm {
	font-size: 0.72rem;
	padding: 0.12rem 0.55rem;
	line-height: 1.1;
	border-radius: 0.15rem;
	min-height: 1.2rem;
}

.pub-modal-img-wrapper {
	background: #fff;
	padding: 1.5rem 1.5rem 1rem 1.5rem;
	border-radius: 12px;
	display: inline-block;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
}

.pub-fig-row {
	justify-content: center;
	margin-bottom: 1.5rem;
}

.pub-thumb-box {
	background: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	padding: 0.5rem 0.5rem 0.2rem 0.5rem;
	cursor: pointer;
	transition: box-shadow 0.2s;
	text-align: center;
	align-items: center;
	display: flex;
	flex-direction: column;
}

.pub-thumb-img-wrap {
	position: relative;
	display: block;
	max-width: 100%;
	line-height: 0;
	overflow: hidden;
	border-radius: 4px;
}

.certificate-thumb-wrap {
	width: 100%;
	aspect-ratio: 1.414;
	background: #fff;
}

.certificate-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

.certificate-modal-frame {
	position: relative;
	width: min(calc(100vw - 2rem), calc((100vh - 8rem) * 1.414), 800px);
	max-width: 100%;
	aspect-ratio: 1.414;
	overflow: hidden;
}

.certificate-modal-container {
	padding: 0;
}

.certificate-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: top left;
	border: 0;
	border-radius: 4px;
	background: #fff;
}

.pub-thumb-img-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(24, 26, 27, 0.25);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 1;
	border-radius: 4px;
}

.pub-thumb-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1rem;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 2;
}

@media (hover: hover) {

	.pub-thumb-img-wrap:hover::before,
	.pub-thumb-img-wrap:hover .pub-thumb-overlay {
		opacity: 1;
	}

	.pub-thumb-img-wrap:hover .pub-thumb-img {
		filter: blur(4px);
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	@media (hover: hover) {
		.pub-thumb-img-wrap:hover .pub-thumb-img {
			filter: blur(8px);
		}
	}
}

.pub-thumb-img {
	max-width: 100%;
	max-height: 1000px;
	object-fit: contain;
	border-radius: 4px;
	transition: filter 0.25s ease, transform 0.2s;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.pub-thumb-box figcaption {
	width: 100%;
	text-align: center;
	word-break: break-word;
	margin-top: 0.5rem;
}

/* Dark mode base styles */


.container-sm,
.row,
.col-md-4,
.col-md-8 {
	background: transparent;
}

.navbar,
.navbar.bg-body,
.my-navbar {
	background: #23272a !important;
	color: #e0e0e0 !important;
	border-bottom: 1px solid #23272a;
}

.navbar .nav-link,
.navbar .nav-link:visited {
	color: #e0e0e0 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
	color: #39c !important;
	background: rgba(57, 156, 204, 0.08) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-title,
.my-name-strong {
	color: #fff;
}

.font-essentials {
	color: #b0b0b0;
}

.text-justify {
	color: #e0e0e0;
}

a,
.my-name {
	color: #39c;
}

a:hover,
.my-name:hover {
	color: #7ecbff !important;
}

.img-shadow {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.33), 0 1.5px 4px rgba(0, 0, 0, 0.18);
}

.pub-thumb-box {
	background: #23272a !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.pub-modal-img-wrapper {
	background: #23272a !important;
}


.page-fade {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #181a1b;
	opacity: 0;
	pointer-events: none;
	z-index: 9999;
	transition: opacity 0.4s cubic-bezier(.77, 0, .175, 1);
}

.page-fade.active {
	opacity: 1;
	pointer-events: all;
}

@media (prefers-reduced-motion: reduce) {
	.page-fade {
		transition: none;
	}
}

.phd-banner {
	background: linear-gradient(90deg, #23272a 0%, #181a1b 100%) !important;
	color: #fff !important;
}

.pub-thumb-box figcaption {
	color: #b0b0b0 !important;
}

::-webkit-scrollbar {
	background: #23272a;
}

::-webkit-scrollbar-thumb {
	background: #181a1b;
}

input,
textarea,
select,
button {
	background: #23272a !important;
	color: #e0e0e0 !important;
	border-color: #444 !important;
}

.modal-content {
	background: #23272a !important;
	color: #e0e0e0 !important;
}

@media (max-width: 767.98px) {
	.sticky-col {
		background: transparent !important;
	}
}

.responsive-padding {
	padding-left: 8rem;
	padding-right: 8rem;
}

@media (max-width: 992px) {
	.responsive-padding {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (max-width: 768px) {
	.responsive-padding {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (max-width: 576px) {
	.responsive-padding {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.custom-toggler {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0.25rem 0.5rem;
}

.custom-toggler:focus {
	outline: none;
	box-shadow: none;
}

.custom-toggler .navbar-toggler-icon {
	background-image: none;
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	position: relative;
}

.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after,
.custom-toggler .navbar-toggler-icon span {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	margin: 0.3em 0;
}

.custom-toggler .navbar-toggler-icon span {
	margin: 0.3em 0;
}

.custom-toggler .navbar-toggler-icon {
	position: relative;
}

.custom-toggler .navbar-toggler-icon::before {
	position: absolute;
	top: 0;
	left: 0;
}

.custom-toggler .navbar-toggler-icon::after {
	position: absolute;
	bottom: 0;
	left: 0;
}

.custom-toggler .navbar-toggler-icon span {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.custom-list {
	list-style-type: square;
}

.custom-list li {
	margin-bottom: 2rem;
}

.icon-link:hover .icon-img,
.icon-wrapper:hover .icon-img {
	transform: scale(1.15) rotate(-8deg);
	filter: drop-shadow(0 0 6px rgb(107, 107, 107));
}

.my-navbar {
	position: sticky;
	top: 0;
	z-index: 10000;
	/* higher than .page-fade (9999) */
}

/* ---------- Space scene (all pages) + homepage intro ----------
   The scene (deep-space sky + constellation network canvas, drawn by hero-parallax.js)
   is fixed behind every page. It is full strength on the homepage and quietly dimmed
   elsewhere (and on the homepage once you scroll down to the bio), so it never competes
   with the text.
   Classes on <html> (set by the small inline script in each page's <head>):
     page-home      homepage
     intro-play     first homepage view this visit: full intro (curtain, dark -> light)
     hero-seen      later homepage views: intro replays quickly (--t)
     scene-dim      network dimmed (inner pages, or homepage scrolled)
     no-vt          browser lacks cross-page view transitions (fallback fade)
   Intro timeline (seconds x --t): 0 curtain lifts, 0.2-1.8 sky and network light up,
   1.6 photo, 2.8 name, 3.9 tagline, 4.4 links, 4.8 bio.
*/
:root { --t: 1; }
.hero-seen { --t: 0.2; }

html {
	background: #05060a;
	/* always reserve the scrollbar's space, so short pages (e.g. Education) don't shift the
	   navbar sideways when the scrollbar disappears */
	overflow-y: scroll;
	scrollbar-gutter: stable;
}
html body { background: transparent !important; }

/* ---- page-to-page navigation: a "focus pull" ----
   The navbar and the space scene stay still; only the page content moves: it dissolves out
   with a soft blur while drifting up, then the new page drifts in and sharpens into focus.
   Chrome, Edge and Safari 18.2+ do this natively (view transitions). The content gets its
   transition names only while a transition runs (class vt-run, set in each page's <head>),
   so they never affect layering otherwise (e.g. the publication image pop-up). */
@view-transition { navigation: auto; }
.my-navbar { view-transition-name: site-nav; }
/* the navbar stays rock-steady during page changes: no crossfade, no dimming */
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
.vt-run main { view-transition-name: page-main; }
.vt-run .site-footer { view-transition-name: page-foot; }
.vt-run .hero { view-transition-name: page-hero; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.7s; }
::view-transition-group(page-main), ::view-transition-group(page-foot), ::view-transition-group(page-hero) {
	animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
::view-transition-old(page-main), ::view-transition-old(page-foot), ::view-transition-old(page-hero) {
	animation: vt-out 0.35s ease-in both;
}
::view-transition-new(page-main), ::view-transition-new(page-foot), ::view-transition-new(page-hero) {
	animation: vt-in 0.65s cubic-bezier(.2, .7, .2, 1) 0.18s both;
}
@keyframes vt-out { to { opacity: 0; filter: blur(8px); transform: translateY(-14px) scale(0.985); } }
@keyframes vt-in  { from { opacity: 0; filter: blur(10px); transform: translateY(18px) scale(1.01); } }

/* fallback for browsers without view transitions: the same focus pull, done with CSS */
.no-vt main, .no-vt footer { animation: vt-in 0.65s cubic-bezier(.2, .7, .2, 1) backwards; }
.no-vt.page-leaving main, .no-vt.page-leaving footer {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(-14px);
	transition: opacity 0.3s ease-in, filter 0.3s ease-in, transform 0.3s ease-in;
}

/* page titles: coloured light drifting inside the letters (no blending, so the effect
   also survives page transitions and sits cleanly on the dark scene) */
.title {
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-image:
		radial-gradient(circle at 18% 30%, var(--clr-4) 0, rgba(229, 76, 255, 0) 38%),
		radial-gradient(circle at 82% 68%, var(--clr-3) 0, rgba(255, 198, 64, 0) 36%),
		radial-gradient(circle at 55% 15%, var(--clr-2) 0, rgba(51, 255, 140, 0) 30%),
		linear-gradient(var(--clr-1), var(--clr-1));
	background-size: 220% 220%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: title-aurora 14s ease-in-out infinite alternate;
}
.title .aurora { display: none; }
@keyframes title-aurora {
	0%   { background-position: 0% 0%; }
	50%  { background-position: 100% 60%; }
	100% { background-position: 30% 100%; }
}

/* name in the navbar (all pages): same lettering as the intro, with a small glowing node */
.nav-brand-name {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 0.86rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #e6ebf2 !important;
	text-decoration: none;
	margin-right: 1rem;
	padding: 0.3rem 0;
	transition: color 0.2s, text-shadow 0.2s, opacity 0.4s;
}
/* homepage: the navbar name appears once the intro has faded (class set by script.js) */
.page-home .nav-brand-name:not(.is-shown) { opacity: 0; pointer-events: none; }
.nav-brand-name::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: #cfeaff;
	box-shadow: 0 0 6px 1px rgba(150, 205, 255, 0.8), 0 0 14px rgba(150, 205, 255, 0.45);
}
.nav-brand-name:hover { color: #fff !important; text-shadow: 0 0 10px rgba(160, 210, 255, 0.7); }
@media (max-width: 400px) { .nav-brand-name { letter-spacing: 0.2em; font-size: 0.78rem; } }

#scene {
	position: fixed;
	inset: -40px;                 /* a little larger than the screen for parallax room */
	z-index: -1;
	overflow: hidden;
	background: #05060a;
	pointer-events: none;
}

.scene-layer {
	position: absolute;
	inset: -40px -80px;           /* overscan for parallax movement */
	will-change: transform;
}

.hero-sky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.scene-net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 1.2s ease;
}
.scene-dim .scene-net { opacity: 0.3; }

.scene-vignette, .scene-shade {
	position: absolute;
	inset: 0;
}
.scene-vignette { background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0, 0, 0, 0.5) 100%); }
.scene-shade {
	background: rgba(5, 6, 10, 0.25);
	opacity: 0;
	transition: opacity 1.2s ease;
}
.scene-dim .scene-shade { opacity: 1; }

/* first homepage view: sky, then the network, light up from dark (links form via JS) */
.intro-play .sky-layer, .intro-play .scene-net { animation: hero-undim 2s ease-in-out backwards; }
.intro-play .sky-layer { animation-delay: 0.2s; }
.intro-play .scene-net { animation-delay: 0.8s; }
@keyframes hero-undim {
	from { filter: brightness(0.12); }
	to   { filter: brightness(1); }
}

.hero-curtain { display: none; }
.intro-play .hero-curtain {
	display: block;
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 2000;
	pointer-events: none;
	opacity: 0;
	animation: hero-curtain 1.4s ease-out backwards;
}
@keyframes hero-curtain { from { opacity: 1; } }

/* shooting star */
.shooting-star {
	position: absolute;
	top: 14%;
	left: 18%;
	width: 140px;
	height: 1.5px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
	transform: rotate(16deg);
	opacity: 0;
	animation: hero-shoot 11s ease-in 6s infinite;
}
@keyframes hero-shoot {
	0%   { opacity: 0; transform: translate(0, 0) rotate(16deg); }
	2%   { opacity: 1; }
	7%   { opacity: 0; transform: translate(420px, 120px) rotate(16deg); }
	100% { opacity: 0; transform: translate(420px, 120px) rotate(16deg); }
}

/* ---------- homepage intro: photo, name, tagline, links ---------- */
.hero {
	position: relative;
	height: calc(100vh - 57px);    /* full screen below the navbar, so the intro sits in the middle */
	height: calc(100svh - 57px);
	min-height: 480px;
}

.hero-intro {
	/* fixed in place: when you scroll to the bio it fades out instead of sliding up */
	position: fixed;
	left: 0;
	right: 0;
	top: 57px;
	height: calc(100vh - 57px);
	height: calc(100svh - 57px);
	min-height: 480px;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	text-align: center;
	will-change: transform;
}

.hero-photo {
	position: relative;
	width: clamp(130px, 22vh, 200px);
	aspect-ratio: 1;
	margin-bottom: 1.6rem;
	animation: hero-photo 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--t) * 1.6s) backwards;
}
.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(235, 240, 248, 0.6), 0 0 40px rgba(150, 190, 235, 0.1), 0 18px 40px rgba(0, 0, 0, 0.7);
}
/* faint diagonal glass glare across the photo */
.hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background: linear-gradient(115deg,
		rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.05) 38%,
		rgba(255, 255, 255, 0) 38.5%, rgba(255, 255, 255, 0) 100%);
}
@keyframes hero-photo {
	from { opacity: 0; transform: scale(0.6); filter: brightness(0) blur(12px); }
	60%  { opacity: 1; filter: brightness(1.1) blur(0); }
	to   { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

/* a thin orbit ring with a small moon circling the photo */
.hero-orbit {
	position: absolute;
	inset: -16px;
	border-radius: 50%;
	border: 1px solid rgba(210, 222, 240, 0.16);
	animation: hero-fade 1.2s ease calc(var(--t) * 2.6s) backwards, hero-spin 14s linear infinite;
	pointer-events: none;
}
.hero-orbit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -4px;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: #ffd7b5;
	box-shadow: 0 0 10px #ffb98a;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-fade { from { opacity: 0; } }

.hero-name {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(1.2rem, 2.8vw, 2.1rem);
	letter-spacing: clamp(3px, 0.7vw, 9px);
	color: #f4f1ee;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
	margin: 0 0 0 0.5em;   /* balance the trailing letter-spacing */
	perspective: 600px;
}
.hero-name .word { display: inline-block; white-space: nowrap; }
.hero-name .ch {
	display: inline-block;
	animation: hero-flip 0.8s ease-out calc(var(--t) * 2.8s + var(--i) * 0.07s) backwards;
}
@keyframes hero-flip {
	from { opacity: 0; transform: rotateY(90deg); filter: brightness(0.2); }
	to   { opacity: 1; transform: rotateY(0); filter: brightness(1); }
}

.hero-tagline {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(0.62rem, 0.9vw, 0.78rem);
	letter-spacing: clamp(2px, 0.35vw, 5px);
	color: #aab3c0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
	margin: 0.9rem 0 0;
	animation: hero-tag 1.4s ease-out calc(var(--t) * 3.9s) backwards;
}
@keyframes hero-tag { from { opacity: 0; letter-spacing: 0.9em; } }

.hero-links {
	display: flex;
	gap: 1.1rem;
	margin-top: 1.3rem;
	animation: hero-up 1s ease-out calc(var(--t) * 4.4s) backwards;
}
.hero-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #e9e4f0;
	font-size: 1.35rem;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
}
.hero-links a:hover { opacity: 1; transform: translateY(-2px); }
.hero-links img { width: 26px; height: 26px; }
@keyframes hero-up { from { opacity: 0; transform: translateY(12px); } }

.hero-scroll {                 /* neon chevron: "there's more below" */
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 7;
	padding: 6px 10px;
	color: #e8f4ff;
	font-size: 1.9rem;
	line-height: 1;
	text-decoration: none;
	transform: translateX(-50%);
	animation: hero-fade 1s ease calc(var(--t) * 5.2s) backwards,
		hero-bob 2.2s ease-in-out infinite,
		hero-neon 2.2s ease-in-out infinite;
}
.hero-scroll i { display: block; }
.hero-scroll:hover { color: #fff; }
@keyframes hero-neon {
	0%, 100% { text-shadow: 0 0 4px rgba(190, 225, 255, 0.9), 0 0 12px rgba(120, 190, 255, 0.55), 0 0 26px rgba(120, 190, 255, 0.3); }
	50%      { text-shadow: 0 0 6px rgba(210, 235, 255, 1), 0 0 18px rgba(120, 190, 255, 0.85), 0 0 38px rgba(120, 190, 255, 0.5); }
}

/* the bio scrolls over the (fading) intro. The about section fills the screen between the
   navbar and the footer, so there is no empty band above it once you have scrolled down. */
.page-home main {
	position: relative;
	z-index: 1;
	min-height: calc(100vh - 57px - var(--footer-h, 92px));
	min-height: calc(100svh - 57px - var(--footer-h, 92px));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.about-head {
	text-align: center;
	margin: 1rem 0 2.6rem;
}
.about-title {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	letter-spacing: 0.55em;
	margin: 0 0 0 0.55em;          /* balance the trailing letter-spacing */
	color: #f4f1ee;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.about-line {
	display: block;
	width: min(260px, 50%);
	height: 1px;
	margin: 1.1rem auto 0;
	background: linear-gradient(90deg, rgba(160, 205, 255, 0), rgba(180, 215, 255, 0.85), rgba(160, 205, 255, 0));
	box-shadow: 0 0 10px rgba(140, 200, 255, 0.45);
}
/* fades in as the photo fades out (class added by hero-parallax.js) */
.js-about .about-title { opacity: 0; letter-spacing: 0.9em; transition: opacity 1s ease, letter-spacing 1.4s ease; }
.js-about .about-line { transform: scaleX(0); transition: transform 1.2s ease 0.2s; }
.js-about .about-in .about-title { opacity: 1; letter-spacing: 0.55em; }
.js-about .about-in .about-line { transform: scaleX(1); }

/* footer (all pages): frosted glass, glowing top edge, same lettering as the name */
.site-footer {
	position: relative;
	z-index: 1;
	padding: 1.5rem 0;
	background: rgba(10, 11, 15, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	font-family: 'Open Sans', sans-serif;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, rgba(160, 205, 255, 0), rgba(170, 210, 255, 0.5), rgba(160, 205, 255, 0));
	box-shadow: 0 0 12px rgba(140, 200, 255, 0.35);
}
.site-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.footer-name, .footer-copy {
	flex: 1;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.68rem;
	color: #8a929e;
}
.footer-copy { text-align: right; }
.footer-links { display: flex; align-items: center; gap: 1.4rem; }
.footer-links a {
	display: inline-flex;
	color: #c9d3df;
	font-size: 1.05rem;
	opacity: 0.75;
	text-decoration: none;
	transition: opacity 0.2s, color 0.2s, text-shadow 0.2s, filter 0.2s;
}
.footer-links a:hover {
	opacity: 1;
	color: #fff !important;
	text-shadow: 0 0 10px rgba(160, 210, 255, 0.9);
	filter: drop-shadow(0 0 6px rgba(160, 210, 255, 0.7));
}
.footer-rg {                    /* ResearchGate logo, tinted like the icon font */
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: url('icons/researchgate-brands-solid.svg') center / contain no-repeat;
	mask: url('icons/researchgate-brands-solid.svg') center / contain no-repeat;
}
@media (max-width: 767.98px) {
	.site-footer-inner { flex-direction: column; gap: 0.8rem; }
	.footer-name, .footer-copy { text-align: center; }
}

/* frosted-glass navbar on every page */
.navbar.my-navbar,
.navbar.bg-body.my-navbar {
	background: rgba(14, 16, 20, 0.55) !important;
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@keyframes hero-bob { 50% { transform: translate(-50%, 8px); } }

/* bio paragraphs arrive last */
.hero-bio p { animation: hero-up 1s ease-out backwards; }
.hero-bio p:nth-child(1) { animation-delay: calc(var(--t) * 4.8s); }
.hero-bio p:nth-child(2) { animation-delay: calc(var(--t) * 5.05s); }
.hero-bio p:nth-child(3) { animation-delay: calc(var(--t) * 5.3s); }
.hero-bio p:nth-child(4) { animation-delay: calc(var(--t) * 5.55s); }
.intro-skip .hero-bio p { animation: none; }   /* visitor scrolled early: don't make them wait */

@media (max-width: 767.98px) {
	.hero, .hero-intro { min-height: 460px; }
	.scene-layer { inset: -24px -40px; }
}

@media (prefers-reduced-motion: reduce) {
	#scene *, .hero *, .hero-bio p, .no-vt main, .no-vt footer, .title { animation: none !important; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
	.js-about .about-title, .js-about .about-line { opacity: 1; transform: none; transition: none; letter-spacing: 0.55em; }
}

/* ---------- Research page: domains + compact research cards ---------- */
.rs-section-title, .rs-domain-title {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: #f4f1ee;
}
.rs-section-title { font-size: 1.25rem; margin-top: 0.3rem; }
.rs-summary { margin-bottom: 3.5rem; }
.rs-summary p:not(.term-line) { color: #e0e0e0; }
.rs-keywords {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rs-keywords li {
	font-size: 0.86rem;
	color: #d6e2ee;
	padding: 0.32rem 0.8rem;
	border: 1px solid rgba(160, 205, 255, 0.22);
	border-radius: 999px;
	background: rgba(120, 170, 230, 0.06);
}

.rs-domain { margin-bottom: 3.5rem; }
.rs-domain-head { text-align: center; margin-bottom: 1.6rem; }
.rs-domain-title { font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0 0 0 0.32em; }
.rs-domain-head::after {           /* thin glowing line, like "About me" */
	content: "";
	display: block;
	width: min(220px, 50%);
	height: 1px;
	margin: 0.9rem auto 0;
	background: linear-gradient(90deg, rgba(160, 205, 255, 0), rgba(180, 215, 255, 0.8), rgba(160, 205, 255, 0));
	box-shadow: 0 0 10px rgba(140, 200, 255, 0.4);
}
.rs-domain-sub {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: #8a929e;
}

/* one card per work: text on the left, figure gallery on the right */
.rs-card {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 1.6rem;
	align-items: start;
	padding: 1.5rem;
	margin-bottom: 1.4rem;
	border-radius: 14px;
	background: rgba(12, 13, 18, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.07);
}
.rs-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.rs-tag {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	color: #cfeaff;
	border: 1px solid rgba(160, 205, 255, 0.35);
	background: rgba(120, 180, 255, 0.08);
}
.rs-tag-soft { color: #aab3c0; border-color: rgba(255, 255, 255, 0.14); background: transparent; }
.rs-card-title { font-size: 1.08rem; line-height: 1.45; color: #fff; margin: 0 0 0.9rem; }
.rs-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.9rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
}
.rs-meta dt { font-weight: 400; font-style: italic; color: #8a929e; }
.rs-meta dd { margin: 0; color: #e0e0e0; }
.rs-metric { color: #b0b0b0; font-size: 0.85em; margin-left: 0.3rem; }
.rs-points { margin: 0; }
.rs-points li { margin-bottom: 0.45rem; }
.rs-abstract { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #d4d8de; }

/* figure gallery: compact thumbnails, click to enlarge (existing pop-up) */
.rs-figs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
}
.rs-figs-single { grid-template-columns: minmax(0, 1fr); }
.rs-fig-wide { grid-column: 1 / -1; }
.rs-figs .pub-thumb-box.rs-fig {
	margin: 0;
	padding: 0.5rem;
	max-width: none !important;
	width: 100%;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: none;
	cursor: zoom-in;
}
.rs-figs .pub-thumb-img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
}
.rs-figs .rs-fig-wide .pub-thumb-img { height: 190px; }
.rs-figs figcaption {
	margin-top: 0.45rem;
	font-size: 0.74rem;
	line-height: 1.35;
	color: #9aa3ae !important;
	text-align: center;
}

@media (min-width: 992px) {
	/* figures stay in view while you read a long abstract beside them */
	.rs-figs { position: sticky; top: 80px; }
}
@media (max-width: 991.98px) {
	.rs-card { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
}
@media (max-width: 575.98px) {
	.rs-figs .pub-thumb-img { height: 120px; }
	.rs-figs .rs-fig-wide .pub-thumb-img { height: 160px; }
}

/* Projects: the title links to the GitHub repository */
.project-title-link { color: #fff !important; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; }
.project-title-link:hover { color: #cfeaff !important; text-shadow: 0 0 12px rgba(160, 210, 255, 0.5); }
.project-gh {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 0.5em;
	font-size: 0.7em;
	color: #aab3c0;
	transition: color 0.2s, filter 0.2s;
}
.project-title-link:hover .project-gh { color: #fff; filter: drop-shadow(0 0 6px rgba(160, 210, 255, 0.8)); }

/* Experience: per-lab teaching dates */
.lab-dates { display: inline-block; margin-left: 0.6rem; font-size: 0.8em; font-weight: 400; color: #8a929e; }

/* Summary-style section headings used across pages: sub-label like "(peer-reviewed)" */
.rs-section-sub { font-size: 0.62em; letter-spacing: 0.18em; color: #8a929e; }
/* Projects: course line under the title, taller thumbnail for the figure collage */
.rs-note { margin: -0.4rem 0 1rem; font-size: 0.88rem; color: #8a929e; }
.rs-figs .rs-fig-tall .pub-thumb-img { height: 340px; }

/* green terminal line that types itself out, erases and repeats (hero-parallax.js) */
.term-line {
	position: relative;
	margin: 1.4rem 0 1.6rem;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #3dff8f;
	text-shadow: 0 0 6px rgba(61, 255, 143, 0.55), 0 0 18px rgba(61, 255, 143, 0.22);
}
.term-line * { font-family: inherit; }        /* override the site-wide "* { font-family }" rule */
.term-ghost { visibility: hidden; }           /* reserves the full height: no layout jump */
.term-live { position: absolute; inset: 0; }
.term-prompt { color: #9dffc6; margin-right: 0.6ch; }
.term-cursor {
	display: inline-block;
	width: 0.6ch;
	height: 1.1em;
	margin-left: 1px;
	vertical-align: -0.18em;
	background: #3dff8f;
	box-shadow: 0 0 8px rgba(61, 255, 143, 0.7);
	animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } }

/* Honors: single-column card, link buttons, photo thumbnails */
.rs-card-solo { grid-template-columns: minmax(0, 1fr); }
.rs-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.rs-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.82rem;
	color: #d6e2ee !important;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid rgba(160, 205, 255, 0.25);
	background: rgba(120, 170, 230, 0.06);
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.rs-link-btn:hover {
	border-color: rgba(170, 215, 255, 0.6);
	background: rgba(120, 170, 230, 0.14);
	box-shadow: 0 0 12px rgba(140, 200, 255, 0.25);
}
.rs-figs .rs-fig-photo .pub-thumb-img { height: 200px; object-fit: cover; background: none; }

/* links to a section (e.g. research.html#undergraduate-thesis) stop below the sticky navbar */
main [id] { scroll-margin-top: 80px; }

/* ---------- First-visit intro (boot-intro.js) ----------
   While "boot-pending" is on <html>, the page is hidden and its own animations wait. */
.boot-pending body > *:not(#boot):not(#scene) { visibility: hidden; }
.boot-pending, .boot-pending body { overflow: hidden; }
.boot-pending .hero, .boot-pending .hero *, .boot-pending .hero-bio p, .boot-pending .hero-curtain { animation-play-state: paused !important; }
/* the intro already eased in: skip the homepage's own black curtain */
.boot-played .hero-curtain { display: none !important; }

/* a small pixel-art stage in the middle; the constellation network stays visible around it */
#boot {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: radial-gradient(ellipse at 50% 50%, rgba(4, 6, 12, 0.15) 0%, rgba(4, 6, 12, 0.5) 100%);
}
#boot .bt-box { display: flex; flex-direction: column; align-items: center; gap: 12px; transform-origin: 50% 50%; }
#boot .bt-stage { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#boot .bt-term {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(0.72rem, 1.5vw, 0.92rem);
	line-height: 1.7;
	color: #3dff8f;
	text-shadow: 0 0 6px rgba(61, 255, 143, 0.55), 0 0 18px rgba(61, 255, 143, 0.22);
	white-space: nowrap;
	pointer-events: none;
}
#boot .bt-term * { font-family: inherit; }
#boot .bt-skip {
	position: absolute;
	right: clamp(14px, 3vw, 32px);
	bottom: clamp(14px, 3vh, 28px);
	padding: 0.4rem 1rem;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #d6e2ee;
	border-radius: 999px;
	border: 1px solid rgba(160, 205, 255, 0.3);
	background: rgba(10, 12, 20, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}
#boot .bt-skip * { font-family: inherit; }
#boot .bt-skip:hover, #boot .bt-skip:focus-visible { color: #fff; border-color: rgba(170, 215, 255, 0.7); outline: none; }