@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

@media screen and (max-height: 750px) {
	aside {
		gap: 20px !important;

		.links:last-of-type {
			flex-direction: row !important;

			.link {
				padding: 7.5px 10.5px 7.5px 10.5px !important;
			}

			p,
			.count:has(svg) {
				display: none;
			}
		}
	}
}

@media screen and (max-width: 1300px) {
	.commits.desktop,
	.commits.mobile,
	.siteImagesColumns.mobile,
	.inner > img.desktop,
	.inner > img.mobile {
		display: none !important;
	}

	.commits.tablet {
		display: grid !important;
	}

	.inner > img.tablet {
		display: block !important;
	}
}

@media screen and (max-width: 950px) {
	.tooltip {
		display: none !important;
	}

	aside {
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 100;
		height: 100vh;
	}

	main {
		.history:not(:has(*.active)) {
			margin-top: -20px;
		}

		.inner {
			min-height: calc(100vh - min(123px, 20vh)) !important;
		}

		h1 .icon {
			padding: 5px;
		}
	}

	.card {
		height: 150px !important;
	}

	.card:hover .radial {
		margin-bottom: 50px !important;
	}

	.inner .group h6:has(.count) {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.subgroup h4 {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.subgroup.commitment {
		flex-direction: column !important;
		gap: 15px !important;
	}

	.count.desktop,
	.commits.desktop,
	.commits.tablet,
	.siteImagesColumns.desktop,
	.inner > img.desktop,
	.inner > img.tablet {
		display: none !important;
	}

	.commits.mobile,
	.siteImagesColumns.mobile {
		display: grid !important;
	}

	div.mobile:has(.count) {
		display: flex !important;
	}

	.inner > img.mobile {
		display: block !important;
	}

	.note {
		grid-area: span 1 / span 1 !important;

		.attachments {
			display: grid !important;
			grid-template-columns: 1fr 1fr;

			> * {
				width: 100% !important;
			}
		}
	}

	.note.full .attachments,
	.note.full .attachments.many {
		display: flex !important;
		grid-template-columns: 1fr !important;
	}

	.log {
		flex-direction: column !important;
	}

	table tr {
		grid-template-columns: 1fr !important;
		gap: 2.5px;
	}
}

@media (prefers-color-scheme: light) {
	body[theme="system"] {
		.dark,
		div:has(> iframe[title="ticker tape TradingView widget"][src*="dark"]) {
			display: none;
		}

		aside .links > p {
			opacity: 1;
			font-weight: 600;
		}
	}

	aside .links > p,
	aside .links .link:not(:hover):not(.active),
	.content main .inner .intro h5,
	.content main .inner .group h6 .refresh,
	.content main .inner .group .works .work .details .info p,
	.content main .inner .group .works .work .details .time,
	.content main .inner .group .subgroup p,
	.content main .inner .group .subgroup ul,
	.content main .inner .group .cards .card p,
	.content main .inner .notes .note .details .info p,
	.content main .inner .notes .note .details .time,
	.content main .inner .logs .log .details .info p,
	.content main .inner .logs .log .details .time,
	.content main .inner .leaderboard .entry .time,
	.content footer .inner .intro h5,
	.content footer .inner p {
		opacity: 0.75;
	}
}

@media (prefers-color-scheme: dark) {
	body[theme="system"] {
		.light,
		div:has(
				> iframe[title="ticker tape TradingView widget"][src*="light"]
			) {
			display: none;
		}
	}
}

:root {
	color-scheme: light dark;
}

:root:has(body[theme="dark"]),
:root:has(body[theme="synthwave"]),
:root:has(body[theme="onyx"]) {
	color-scheme: dark;
}

:root:has(body[theme="light"]) {
	color-scheme: light;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Inter";
	scroll-behavior: smooth;
}

*::-webkit-scrollbar {
	display: none;
}

html {
	font-family: "Inter";
	scroll-behavior: smooth;
}

body {
	display: flex;
	align-items: center;
	height: 100dvh;
	background-color: light-dark(#f9f9fb, #161616);
	color: light-dark(#111111, #ffffff);
	scroll-behavior: smooth;

	.notrecruiter {
		display: none !important;
	}
}

body.recruiter {
	.recruiter,
	div:has(> iframe[title="ticker tape TradingView widget"]) {
		display: none !important;
	}

	.notrecruiter {
		display: flex !important;
	}
}

body:not([theme="synthwave"]) {
	.synthwave {
		display: none;
	}
}

body:not([theme="onyx"]) {
	.onyx {
		display: none;
	}
}

body[theme="dark"] {
	.light,
	div:has(> iframe[title="ticker tape TradingView widget"][src*="light"]) {
		display: none;
	}
}

body[theme="light"] {
	.dark,
	div:has(> iframe[title="ticker tape TradingView widget"][src*="dark"]) {
		display: none;
	}

	aside .links > p {
		opacity: 1;
		font-weight: 600;
	}

	aside .links > p,
	aside .links .link:not(:hover):not(.active),
	.content main .inner .intro h5,
	.content main .inner .group h6 .refresh,
	.content main .inner .group .works .work .details .info p,
	.content main .inner .group .works .work .details .time,
	.content main .inner .group .subgroup p,
	.content main .inner .group .subgroup ul,
	.content main .inner .group .cards .card p,
	.content main .inner .notes .note .details .info p,
	.content main .inner .notes .note .details .time,
	.content main .inner .logs .log .details .info p,
	.content main .inner .logs .log .details .time,
	.content main .inner .leaderboard .entry .time,
	.content footer .inner .intro h5,
	.content footer .inner p {
		opacity: 0.75;
	}
}

body[theme="synthwave"] {
	background-color: #101116;
	color: #c1d3e0;

	.light,
	.nosynthwave,
	div:has(> iframe[title="ticker tape TradingView widget"][src*="light"]) {
		display: none;
	}

	aside {
		background: #101116;
		border-color: #00d4b2;
		padding: 10px 0;
		gap: 10px;

		.profile {
			height: unset;
			gap: 11px;
			padding: 10px 10.5px;
			overflow: hidden;

			img {
				width: 30px;
				height: 30px;
			}
		}

		.links {
			gap: 0;
			overflow-x: hidden;
			min-height: 51px;

			.link {
				padding: 14.5px;
				gap: 15px;
				border: none;
				border-left: 1px solid transparent;
				background: transparent;
				border-radius: 0;
				justify-content: flex-start;
				min-width: max-content;

				> svg {
					width: 20px;
					stroke-width: 1.5px;
					stroke: #00d4b2;
				}
			}

			.link:first-of-type svg,
			.link:last-of-type svg {
				stroke-width: 1.5px;
			}

			.link.active,
			.link:hover {
				background: #082b29;
				border-color: #00d4b2;
			}

			.link:has(select) .count {
				margin-left: -42.5px;
			}

			> p {
				width: max-content;
				padding: 0px 15px 7.5px 15px;
			}
		}
	}

	aside:not(:has(.toggle.active)) .links > p {
		opacity: 0;
		height: 0px;
	}

	@media screen and (min-width: 950px) {
		aside {
			position: relative !important;

			.toggle {
				left: 51px;
			}
		}

		aside:not(:has(.toggle.active)):hover {
			max-width: 100vw !important;

			.toggle {
				opacity: 0;
				cursor: not-allowed;
				pointer-events: none;
			}
		}
	}

	.button,
	aside .toggle,
	aside .links .link option,
	.content main .inner .group .works .work,
	.content main .inner .group .options .option select,
	.content main .inner .group .works .work .details,
	.content main .inner .group .button,
	.content main .inner .group .subgroup,
	.content main .inner .group .cards .card,
	.content main .inner .commits .commit,
	.content main .inner .siteImagesColumns .column > *,
	.content main .inner .notes .note,
	.content main .inner .logs .log,
	.content main .inner .puzzle input,
	.content main .inner .leaderboard .entry,
	.content main .inner .graph,
	.content
		main
		.inner
		.graph
		.week
		.day:not(.dark):not(.green):not(.bright):not(.high):not(.star):not(
			.star2
		) {
		background-color: #15151f;
	}

	.content main .inner .group .subgroup .chips .chip,
	.content main .inner .group .subgroup .tracks-container .tracks .track img,
	.content main .inner .group .subgroup .job,
	.content main .inner .group .subgroup .stack,
	.content main .inner .logs .log .date,
	.content main .inner .leaderboard .entry .date {
		background-color: #1b1b1f;
	}

	.button:hover,
	.content main .inner .group .subgroup .chips .chip:hover,
	.content main .inner .group .subgroup .job:hover,
	.content main .inner .group .works .work:hover .details {
		background-color: #006a5e !important;
	}

	.content main .inner .commits::after,
	.content main .inner .repos::after {
		background: linear-gradient(to bottom, #10111600 0%, #101116 100%);
	}

	.content footer {
		background: #0c0c13;
	}

	.content main .inner .intro h1:has(.icon).off {
		color: #101116;
	}

	.content
		main
		.inner
		.group
		.subgroup
		.tracks-container
		.tracks
		.track::before {
		background: #10111675;
	}

	.content main .inner .group table {
		background: #101116;
	}

	.content main .inner .marquee::after {
		background: linear-gradient(
			90deg,
			#101116 0%,
			transparent 30%,
			transparent 70%,
			#101116 100%
		);
	}

	.content main .inner .siteImages > div::after {
		background-color: #10111685;
	}

	.button,
	.button.transparent,
	aside .links .link .count,
	.content main .inner .intro .xp,
	.content main .inner .group h6 .count,
	.content main .inner .group .subgroup .stack,
	.content main .inner .group .works .work,
	.content main .inner .group .options .option select,
	.content main .inner .group .button,
	.content main .inner .group .subgroup,
	.content main .inner .group .cards .card,
	.content main .inner .group table,
	.content main .inner .group table tr,
	.content main .inner .commits .commit,
	.content main .inner .ad,
	.content main .inner .siteImagesColumns .column > *,
	.content main .inner .notes .note,
	.content main .inner .logs .log,
	.content main .inner .puzzle input,
	.content main .inner .leaderboard .entry,
	.content main .inner .graph,
	.content main .inner .graph .week .day,
	.button:not(.success):hover {
		border-color: #00d4b299;
		opacity: 1;
	}

	.content main {
		background: linear-gradient(
				40deg,
				rgba(0, 255, 240, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				130deg,
				rgba(0, 255, 240, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				220deg,
				rgba(0, 255, 240, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				310deg,
				rgba(0, 255, 240, 0.2) 0%,
				transparent min(12.5%, 300px)
			);
	}

	.content main .inner .intro .gradient {
		background: linear-gradient(90deg, #ff00ee -150%, #00fff6 100%);
		background-clip: text;
		-webkit-background-clip: text;
	}

	.content main .inner > img.desktop {
		filter: contrast(0) sepia(1) hue-rotate(110deg);
	}
}

body[theme="onyx"] {
	background-color: #070709;
	color: #ffffff;

	.light,
	.noonyx,
	div:has(> iframe[title="ticker tape TradingView widget"][src*="light"]) {
		display: none;
	}

	aside {
		background: #000000;
		border-color: #29292d;
		padding: 10px 0;
		gap: 10px;

		.profile {
			height: unset;
            gap: 14px;
            padding: 10px 18px;
			overflow: hidden;

			img {
				width: 20px;
				height: 20px;
			}
		}

		.links {
			gap: 0;
			overflow-x: hidden;

			.link {
				padding: 10px 20px;
				gap: 15px;
				border: none;
				border-left: 1px solid transparent;
				background: transparent;
				border-radius: 0;
				justify-content: flex-start;
				min-width: max-content;

				> svg {
					width: 15px;
					stroke-width: 1.5px;
					stroke: #ffffff;
				}
			}

			.link:first-of-type svg,
			.link:last-of-type svg {
				stroke-width: 1.5px;
			}

			.link.active,
			.link:hover {
				background: #18181b;
				border-color: #ffffff;
			}

			.link:has(select) .count {
				margin-left: -42.5px;
			}

			> p {
				width: max-content;
				padding: 0px 15px 7.5px 20px;
			}
		}
	}

	aside:not(:has(.toggle.active)) .links > p {
		opacity: 0;
		height: 0px;
	}

	@media screen and (min-width: 950px) {
		aside {
			position: relative !important;

			.toggle {
				left: 51px;
			}
		}

		aside:not(:has(.toggle.active)):hover {
			max-width: 100vw !important;

			.toggle {
				opacity: 0;
				cursor: not-allowed;
				pointer-events: none;
			}
		}
	}

	.button,
	aside .toggle,
	aside .links .link option,
	.content main .inner .group .works .work,
	.content main .inner .group .options .option select,
	.content main .inner .group .works .work .details,
	.content main .inner .group .button,
	.content main .inner .group .subgroup,
	.content main .inner .group .cards .card,
	.content main .inner .commits .commit,
	.content main .inner .siteImagesColumns .column > *,
	.content main .inner .notes .note,
	.content main .inner .logs .log,
	.content main .inner .puzzle input,
	.content main .inner .leaderboard .entry,
	.content main .inner .graph,
	.content
		main
		.inner
		.graph
		.week
		.day:not(.dark):not(.green):not(.bright):not(.high):not(.star):not(
			.star2
		) {
		background-color: #000000;
	}

	.content main .inner .group .subgroup .chips .chip,
	.content main .inner .group .subgroup .tracks-container .tracks .track img,
	.content main .inner .group .subgroup .job,
	.content main .inner .group .subgroup .stack,
	.content main .inner .logs .log .date,
	.content main .inner .leaderboard .entry .date {
		background-color: #0e0e0e;
	}

	.button:hover,
	.content main .inner .group .subgroup .chips .chip:hover,
	.content main .inner .group .subgroup .job:hover,
	.content main .inner .group .works .work:hover .details {
		background-color: #191919 !important;
	}

	.content main .inner .commits::after,
	.content main .inner .repos::after {
		background: linear-gradient(to bottom, #ffffff00 0%, #070709 100%);
	}

	.content footer {
		background: #050505;
	}

	.content main .inner .intro h1:has(.icon).off {
		color: #070709;
	}

	.content
		main
		.inner
		.group
		.subgroup
		.tracks-container
		.tracks
		.track::before {
		background: #07070975;
	}

	.content main .inner .group table {
		background: #070709;
	}

	.content main .inner .marquee::after {
		background: linear-gradient(
			90deg,
			#070709 0%,
			transparent 30%,
			transparent 70%,
			#070709 100%
		);
	}

	.content main .inner .siteImages > div::after {
		background-color: #07070985;
	}

	.button,
	.button.transparent,
	aside .links .link .count,
	.content main .inner .intro .xp,
	.content main .inner .group h6 .count,
	.content main .inner .group .subgroup .stack,
	.content main .inner .group .works .work,
	.content main .inner .group .options .option select,
	.content main .inner .group .button,
	.content main .inner .group .subgroup,
	.content main .inner .group .cards .card,
	.content main .inner .group table,
	.content main .inner .group table tr,
	.content main .inner .commits .commit,
	.content main .inner .ad,
	.content main .inner .siteImagesColumns .column > *,
	.content main .inner .notes .note,
	.content main .inner .logs .log,
	.content main .inner .puzzle input,
	.content main .inner .leaderboard .entry,
	.content main .inner .graph,
	.content main .inner .graph .week .day,
	.button:not(.success):hover {
		border-color: transparent;
		opacity: 1;
	}

	.content main {
		background: linear-gradient(
				40deg,
				rgba(255, 255, 255, 0.25) 0%,
				transparent min(10%, 200px)
			),
			linear-gradient(
				130deg,
				rgba(255, 255, 255, 0.25) 0%,
				transparent min(10%, 200px)
			),
			linear-gradient(
				220deg,
				rgba(255, 255, 255, 0.25) 0%,
				transparent min(10%, 200px)
			),
			linear-gradient(
				310deg,
				rgba(255, 255, 255, 0.25) 0%,
				transparent min(10%, 200px)
			);
	}

	.content main .inner .intro .gradient {
		background: linear-gradient(90deg, #000000 -125%, #ffffff 100%);
		background-clip: text;
		-webkit-background-clip: text;
	}

	.content main .inner > img.desktop {
		filter: contrast(0) brightness(0.25);
	}

	footer .inner > img[parent] {
		filter: grayscale(1);
	}
}

page-title {
	width: 0px;
	height: 0px;
	overflow: hidden;
	padding: 0 !important;
	margin-left: -5px;
}

a {
	text-decoration: none;
	color: light-dark(#111111, #ffffff);
}

.button {
	display: flex;
	padding: 7.5px 22px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	border: 1px solid light-dark(#d1d1d1, #393939);
	background: light-dark(#fbfbfb, #2c2c2c);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.07px;
	min-width: max-content;
	cursor: pointer;
	transition: 0.25s;

	svg,
	i {
		width: 17px;
		height: 17px;
		stroke-width: 1.5px;
		stroke: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
	}
}

.button:not(.success):hover {
	background: light-dark(#e6e6e6, #212121);
	border-color: light-dark(#e4e4e4, #252525);
	transition: 0.25s;
}

.button.transparent {
	background: transparent;
	border-color: light-dark(#dfdfdf, #242424);
	transition: 0.25s;
}

.button.transparent:not(.success):hover {
	opacity: 0.75;
	transition: 0.25s;
}

.button.success {
	background: rgba(0, 255, 246, 0.32);
	transition: 0.25s;
}

.button.left {
	justify-content: flex-start;
}

.button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.tooltip {
	position: absolute;
	height: fit-content !important;
	padding: 10px 17px;
	background-color: light-dark(#ffffff12, #11111112);
	backdrop-filter: blur(5px);
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	border-radius: 5px;
	width: max-content;
	text-decoration: none;
	transition: 0s top, 0s left, 0.5s opacity;
	font-size: 13px !important;
	font-weight: 600;
	z-index: 100;
}

@keyframes scroll-left {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0.85);
		opacity: 0.85;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.85);
		opacity: 0.85;
	}
}

@keyframes shine {
	0% {
		background-position: 100%;
	}
	to {
		background-position: -100%;
	}
}

aside {
	display: flex;
	padding: 30px 25px;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	align-self: stretch;
	border-right: 1px solid light-dark(#dfdfdf, #242424);
	background: light-dark(#ffffff, #1c1c1c);
	position: relative;
	z-index: 100;
	transition: 0.25s;

	.toggle {
		display: flex;
		position: fixed;
		right: unset;
		left: 0;
		top: 55px;
		width: 22px;
		height: 22px;
		overflow: hidden;
		padding: 5px;
		rotate: 180deg;
		border-radius: 100px 0 0 100px;
		border: 1px solid light-dark(#dadada, #232323);
		background: light-dark(#ededed, #1c1c1c);
		justify-content: center;
		align-items: center;
		z-index: 100;
		cursor: pointer;
		transition: 0.25s;
	}

	.toggle.active {
		position: absolute !important;
		right: -11px !important;
		left: unset !important;
		border-radius: 100px;
		rotate: 0deg;
		transition: 0.25s;
	}

	.profile {
		display: flex;
		height: 40px;
		align-items: center;
		gap: 15px;
		align-self: stretch;

		img {
			width: 40px;
			height: 40px;
			border: 3px solid var(--shadow-color);
			border-radius: 100%;
			--shadow-color: rgba(128, 128, 128, 0.2);
		}

		img.online {
			--shadow-color: rgba(44, 218, 44, 0.2);
		}

		img.dnd {
			--shadow-color: rgba(216, 44, 44, 0.2);
		}

		img.idle {
			--shadow-color: rgba(216, 216, 44, 0.2);
		}

		div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 2px;

			h6 {
				font-size: 14px;
				font-weight: 600;
			}

			p {
				opacity: 0.7;
				font-size: 12px;
				font-weight: 400;
				width: max-content;
			}
		}
	}

	.links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		align-self: stretch;
		overflow-y: scroll;
		min-height: 39px;

		> p {
			opacity: 0.5;
			font-size: 10px;
			font-weight: 300;
			text-transform: uppercase;
			letter-spacing: 1px;
			padding: 0px 10px 7.5px 10px;
		}

		.link {
			display: flex;
			padding: 7.5px 7.5px 7.5px 12.5px;
			align-items: center;
			gap: 10px;
			align-self: stretch;
			border-radius: 5px;
			opacity: 0.5;
			text-decoration: none;
			border: 1px solid transparent;
			transition: 1.75s;

			> svg,
			> i {
				width: 15px;
				stroke-width: 1.5px;
				stroke: light-dark(#111111, #ffffff);
			}

			p {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: -0.02em;
				flex: 1 0 0;
				min-width: max-content;
			}

			select {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: -0.02em;
				color: light-dark(#111111, #ffffff);
				flex: 1 0 0;
				min-width: max-content;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				text-indent: 1px;
				text-overflow: "";
				background: transparent;
				padding: 5px 7.5px;
				margin: -5px -7.5px -5px -7.5px;
				border: none;
				outline: none;
				z-index: 1;
			}

			option {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: -0.02em;
				background: light-dark(#ededed, #2c2c2c);
			}

			.count {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10px;
				height: 22px;
				min-width: 20px;
				padding: 3px 6px;
				font-size: 12px;
				font-weight: 700;
				border-radius: 3px;
				border: 1px solid light-dark(#d1d1d1, #393939);
				background: light-dark(#e7e7e7, #2c2c2c);

				svg,
				i {
					stroke: light-dark(#111111, #ffffff);
				}
			}
		}

		.link:hover,
		.link.active {
			border-color: light-dark(#d7d7d7, #393939);
			background: light-dark(#ededed, #2c2c2c);
			opacity: 1;
			transition: 0.25s;
		}

		.link.active {
			pointer-events: none;
		}

		.link:has(select) .count {
			margin-left: -27.5px;
		}
	}
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 0 0;
	height: 100vh;
	overflow-y: scroll;
	position: relative;

	main {
		width: -webkit-fill-available;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;
		padding: max(75px, 7.5%) 0 min(123px, 20%) 0;
		background: linear-gradient(
				40deg,
				rgba(0, 255, 246, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				130deg,
				rgba(255, 0, 238, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				220deg,
				rgba(0, 255, 246, 0.2) 0%,
				transparent min(12.5%, 300px)
			),
			linear-gradient(
				310deg,
				rgba(255, 0, 238, 0.2) 0%,
				transparent min(12.5%, 300px)
			);
		z-index: 0;
		opacity: 1;
		transition: 0.25s;

		.history {
			display: flex;
			gap: 5px;
			width: min(900px, 90%);
			transition: 0.25s opacity;

			* {
				padding: 3px 10.5px;
				opacity: 0;
				pointer-events: none;
				transition: 0.25s;
			}

			*.active {
				opacity: 1;
				pointer-events: unset;
				transition: 0.25s;
			}
		}

		.inner {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 25px;
			width: min(900px, 90%);
			min-height: calc(100vh - min(123px, 20vh) - min(123px, 20vh));

			.intro {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				gap: 10px;
				align-self: stretch;

				h1 {
					font-size: 48px;
					font-weight: 600;
					line-height: 56px;
					letter-spacing: -1.2px;

					.icon {
						background: light-dark(#ebebeb, #2c2c2c);
						border-radius: 10px;
						font-size: 30px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						transition: 0.25s;
					}

					.icon:hover {
						rotate: -5deg;
						transition: 0.25s;
					}

					.tts {
						display: none;
						stroke: light-dark(#111111, #ffffff);
						stroke-width: 3px;
						overflow: visible;
						height: 12.5px;
						margin-left: -0.5px;
						cursor: pointer;
						transition: 0.25s;
					}

					.tts.ready {
						display: inline-flex;
					}

					.tts:hover {
						opacity: 0.75;
						transition: 0.25s;
					}
				}

				h1:has(.icon) {
					display: flex;
					align-items: center;
					gap: 10px;
					transition: 0.25s;
				}

				h1:has(.icon).off {
					color: light-dark(#f9f9fb, #161616);
					transition: 0.25s;
				}

				.gradient {
					background: linear-gradient(
						90deg,
						#ff00ee 0%,
						#00fff6 100%
					);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline;
				}

				h5 {
					opacity: 0.5;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: -0.09px;
					width: 100%;
					transition: 0.25s;
				}

				h5.off {
					height: 0px !important;
					margin-top: -15px;
					transition: 0.25s;
				}

				.xp {
					display: inline;
					padding: 3px 7px;
					border-radius: 5px;
					border: 1px solid light-dark(#d1d1d1, #393939);
					background: light-dark(#fbfbfb, #2c2c2c);
					font-size: 14px;
					margin: 0 2px;
				}

				.priceTag {
					display: flex;
					flex-direction: column;
					padding: 7.5px 15px;
					border-radius: 5px;
					border: 1px solid light-dark(#d1d1d1, #393939);
					background: light-dark(#fbfbfb, #2c2c2c);
					font-size: 14px;
					font-weight: 600;
				}
			}

			.intro:has(h1 .icon) h5 {
				overflow: hidden;
			}

			.buttons {
				display: flex;
				align-items: flex-start;
				gap: 15px;
				flex-wrap: wrap;
			}

			.group {
				display: flex;
				padding-top: 10px;
				flex-direction: column;
				align-items: flex-start;
				gap: 15px;
				align-self: stretch;

				h6 {
					font-size: 16px;
					font-weight: 600;
					line-height: 24px;
					letter-spacing: -0.08px;
					display: flex;
					align-items: flex-end;
					gap: 10px;

					.refresh {
						font-size: 14px;
						font-weight: 500;
						line-height: 22px;
						letter-spacing: -0.08px;
						opacity: 0.5;
						display: flex;
						align-items: center;
						gap: 5px;
						cursor: pointer;

						svg {
							height: 10px;
							width: 10px;
							rotate: 0deg;
							stroke: light-dark(#111111, #ffffff);
							transition: 1s;
						}
					}

					.count {
						display: flex;
						align-items: center;
						gap: 5px;
						border: 1px solid light-dark(#d1d1d1, #393939);
						background: light-dark(#f5f5f5, #2c2c2c);
						padding: 5.5px 7.5px;
						line-height: 15px;
						border-radius: 7.5px;
						margin-bottom: -1.5px;
						font-size: 15px;

						img {
							height: 15px;
						}
					}

					div.mobile:has(.count) {
						display: none;
						gap: 5px;
					}
				}

				h6:has(.status) {
					align-items: center;
				}

				> h4 {
					display: flex;
					gap: 7.5px;
					align-items: center;
					padding-top: 10px;

					svg {
						stroke-width: 1.5px;
						stroke: light-dark(#111111, #ffffff);
					}
				}

				.works {
					display: grid;
					grid-template-columns: repeat(
						auto-fill,
						minmax(300px, 1fr)
					);
					gap: 30px;
					align-self: stretch;

					.work {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
						border-radius: 10px;
						border: 1px solid light-dark(#dfdfdf, #242424);
						background: light-dark(#fbfbfb, #1c1c1c);
						padding-top: 175px;
						background-size: 100%;
						background-position-x: center;
						background-repeat: no-repeat;
						transition: 0.25s;

						.details {
							display: flex;
							padding: 17.5px 20px;
							justify-content: space-between;
							align-items: center;
							align-self: stretch;
							background: light-dark(#fbfbfb, #1c1c1c);
							border-radius: 0 0 9px 9px;

							.info {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: flex-start;

								h6 {
									font-size: 14px;
									font-weight: 600;
									letter-spacing: -0.07px;
								}

								p {
									opacity: 0.5;
									font-size: 14px;
									font-weight: 500;
									letter-spacing: -0.07px;
								}
							}

							.time {
								display: flex;
								padding: 5px 7px;
								justify-content: center;
								align-items: center;
								gap: 5px;
								border-radius: 100px;
								border: 1px solid
									light-dark(#11111125, #ffffff25);
								opacity: 0.5;
								font-size: 10px;
								font-weight: 500;
								min-width: max-content;

								svg,
								i {
									width: 11px;
									height: 11px;
									stroke-width: 1.5px;
									stroke: light-dark(#111111, #ffffff);
								}
							}
						}
					}

					.work:hover {
						background-size: 115% !important;
						transition: 0.25s;

						.details {
							background: light-dark(#ededed, #2a2a2a) !important;
							transition: 0.25s;
						}
					}
				}

				.works.tight {
					gap: 15px;
				}

				.button {
					width: -webkit-fill-available;
					border-color: light-dark(#dfdfdf, #242424);
					background: light-dark(#fbfbfb, #1c1c1c);
				}

				.button:hover {
					opacity: 0.75;
				}

				.subgroup {
					display: flex;
					padding: 18px 20px;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					gap: 7.5px;
					align-self: stretch;
					border-radius: 10px;
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#ffffff, #1c1c1c);

					h4 {
						font-size: 20px;
						font-weight: 600;
						letter-spacing: -0.075px;
						display: flex;
						align-items: center;
						gap: 10px;
					}

					h5 {
						font-size: 17px;
						font-weight: 600;
						letter-spacing: -0.075px;
						display: flex;
						gap: 5px;

						p {
							margin-top: 2px;
						}
					}

					h6 {
						font-size: 15px;
						font-weight: 600;
						letter-spacing: -0.075px;
					}

					p {
						opacity: 0.5;
						font-size: 14px;
						font-weight: 500;
						letter-spacing: -0.07px;
						align-self: stretch;
					}

					ul {
						margin-left: 20px;
						opacity: 0.5;
						font-size: 14px;
						font-weight: 500;
						letter-spacing: -0.07px;
					}

					.stack {
						display: flex;
						align-items: center;
						gap: 0px;
						border: 1px solid light-dark(#d1d1d1, #393939);
						background: light-dark(#f5f5f5, #2c2c2c);
						padding: 7px 8px;
						border-radius: 10px;

						* {
							height: 15px;
							stroke: light-dark(#111111, #ffffff);
							stroke-width: 1.5px;
						}
					}

					.stack.brands * {
						stroke: unset !important;
						fill: light-dark(#111111, #ffffff) !important;
					}

					.chips {
						display: flex;
						align-items: flex-start;
						align-content: flex-start;
						gap: 10px;
						align-self: stretch;
						flex-wrap: wrap;

						.chip {
							display: flex;
							padding: 7.5px 10px;
							justify-content: center;
							align-items: center;
							gap: 10px;
							border-radius: 5px;
							background: light-dark(#f7f7f7, #252525);
							box-shadow: 1px 2px 4px 0px
								light-dark(
									rgba(255, 255, 255, 0.1),
									rgba(0, 0, 0, 0.1)
								);
							color: light-dark(
								rgba(0, 0, 0, 0.75),
								rgba(255, 255, 255, 0.75)
							);
							font-size: 14px;
							font-weight: 500;
							letter-spacing: -0.07px;
							cursor: pointer;
							transition: 0.25s;
						}

						.chip:hover {
							background: light-dark(#ededed, #383838) !important;
							transition: 0.25s;
						}
					}

					.buttons.examples {
						margin-top: 10px;

						.button {
							width: unset !important;
						}
					}

					.tracks-container {
						display: grid;
						grid-template-columns: repeat(
							auto-fill,
							minmax(max(300px, 40%), 1fr)
						);
						gap: 20px;
						align-self: stretch;

						.tracks {
							margin: 0;
							padding: 0;
							display: flex;
							flex-direction: column;
							align-self: stretch;
							gap: 15px;

							.track {
								display: flex;
								flex-direction: row;
								align-items: flex-start;
								gap: 15px;
								position: relative;

								img {
									background: light-dark(#ebebeb, #252525);
									border-radius: 5px;
									width: 60px;
									height: 60px;
								}

								.details {
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: flex-start;

									h5 {
										font-size: 15px;
										font-weight: 700;
										letter-spacing: -0.07px;
									}

									h6 {
										font-size: 14px;
										font-weight: 600;
										letter-spacing: -0.07px;
									}

									p {
										font-size: 14px;
										font-weight: 500;
										letter-spacing: -0.07px;
									}
								}
							}

							.track::before {
								content: attr(rank);
								position: absolute;
								top: 5px;
								left: 5px;
								z-index: 10;
								background: light-dark(#f9f9fb75, #16161675);
								backdrop-filter: blur(5px);
								padding: 2.5px 4px;
								font-size: 12.5px;
								border-radius: 5px;
							}

							.track:first-of-type img {
								width: 100px;
								height: 100px;
							}

							.track:first-of-type::before {
								padding: 5px 7px;
								font-size: inherit;
							}
						}
					}

					.job {
						display: flex;
						flex-direction: column;
						padding: 12.5px;
						justify-content: flex-start;
						align-items: start;
						gap: 2.5px;
						border-radius: 5px;
						background: light-dark(#f7f7f7, #252525);
						box-shadow: 1px 2px 4px 0px
							light-dark(
								rgba(255, 255, 255, 0.1),
								rgba(0, 0, 0, 0.1)
							);
						color: light-dark(
							rgba(0, 0, 0, 0.75),
							rgba(255, 255, 255, 0.75)
						);
						font-size: 14px;
						font-weight: 500;
						letter-spacing: -0.07px;
						width: -webkit-fill-available;
						transition: 0.25s;

						a,
						b {
							color: light-dark(#111111, #ffffff);
							font-weight: 500;

							svg {
								height: 11px;
								rotate: 45deg;
								margin-bottom: -1px;
								margin-left: 1px;
							}

							path {
								stroke: light-dark(#111111, #ffffff);
								stroke-width: 3px;
							}
						}

						.attachments {
							display: flex;
							align-items: stretch;
							justify-content: flex-start;
							width: -webkit-fill-available;
							overflow-x: scroll;
							gap: 5px;
							padding-top: 10px;
							flex-wrap: wrap;

							a {
								transition: 0.25s;

								> * {
									height: 100px;
									border-radius: 10px;
									border: 3px solid
										light-dark(#ededed, #383838);
								}
							}

							a:hover {
								opacity: 0.75;
								transition: 0.25s;
							}
						}
					}

					.job:hover {
						background: light-dark(#ededed, #383838) !important;
						transition: 0.25s;
					}
				}

				.subgroup.collapsed {
					max-height: 60px;
					overflow: hidden;
					cursor: pointer;
					transition: 0.25s;
				}

				.subgroup.collapsed:active {
					transform: scale(0.975);
					transition: 0.25s;
				}

				.subgroup.collapsed.active {
					max-height: 500px;
					overflow: scroll;
					transition: 0.25s;
				}

				.subgroup:has(.tracks-container) {
					padding: 20px;
				}

				.subgroup.commitment {
					flex-direction: row;
					border-color: #ea1b2d !important;
					box-shadow: 0 0 10px 2.5px #941620;
					gap: 20px;

					> img {
						width: 100px;
						height: 100px;
					}

					.text {
						display: flex;
						flex-direction: column;
						gap: 5px;
					}
				}

				.cards {
					display: grid;
					grid-template-columns: repeat(
						auto-fill,
						minmax(200px, 1fr)
					);
					align-items: flex-start;
					gap: 10px;
					align-self: stretch;

					.card {
						display: flex;
						height: 250px;
						padding: 18px 20px;
						flex-direction: column;
						align-items: flex-start;
						gap: 7.5px;
						flex: 1 0 0;
						border-radius: 10px;
						border: 1px solid light-dark(#dfdfdf, #242424);
						background: light-dark(#f3f3f3, #1c1c1c);
						overflow: hidden;

						.radial {
							width: 48px;
							height: 48px;
							border-radius: 100%;
							rotate: 180deg;
							background-image: conic-gradient(
								from 180deg at 50% 50%,
								light-dark(#6f6f6f, #111) 0deg,
								light-dark(#f5f5f5, #808080) 360deg
							);
							margin-top: 0px;
							transition: 1s;
						}

						h6 {
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							align-items: flex-start;
							flex: 1 0 0;
							align-self: stretch;
							font-size: 13px;
							font-weight: 600;
							letter-spacing: -0.065px;
							line-height: 16px;
						}

						p {
							opacity: 0.5;
							font-size: 12px;
							font-weight: 400;
							letter-spacing: -0.06px;
							overflow: hidden;
							height: 0%;
							transition: 1s;
						}
					}

					.card:hover {
						.radial {
							margin-top: -85px;
							margin-bottom: 40px;
							transition: 0.45s;
						}

						p {
							height: 100%;
							transition: 0.45s;
							transition-delay: 0.15s;
						}
					}

					.card:nth-of-type(2) .radial {
						rotate: 270deg;
					}

					.card:nth-of-type(3) .radial {
						rotate: 360deg;
					}

					.card:nth-of-type(4) .radial {
						rotate: 450deg;
					}
				}

				hr {
					width: -webkit-fill-available;
					opacity: 0.25;
					height: 1px;
					background: light-dark(black, white);
					border: none;
					border-radius: 0;
					margin: 5px 0;
				}

				table {
					width: -webkit-fill-available;
					background: light-dark(#f9f9fb, #161616);
					border: 1px solid light-dark(#dfdfdf, #242424);
					border-radius: 7.5px;
					border-spacing: 0;
					overflow: hidden;

					tr {
						display: grid;
						grid-template-columns: 1fr 1fr;
						border-bottom: 1px solid light-dark(#dfdfdf, #242424);
						padding: 10px;

						td {
							display: flex;
							align-items: center;
							gap: 7.5px;

							img {
								width: 15px;
							}

							.status {
								font-size: unset;
								font-weight: unset;
								line-height: unset;
								letter-spacing: unset;
							}
						}
					}

					tr:last-of-type {
						border-bottom: none;
					}

					tr:nth-of-type(odd) {
						background: light-dark(#e6e6e6, #121212);
					}
				}

				.options {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
					gap: 10px;
					width: -webkit-fill-available;

					.option {
						align-items: center;
						justify-content: center;
						position: relative;

						select {
							opacity: 0.75;
							background: light-dark(#fbfbfb, #1c1c1c);
							border: 1px solid light-dark(#dfdfdf, #242424);
							border-radius: 5px;
							color: light-dark(#111111, #ffffff);
							font-size: 14px;
							font-weight: 400;
							padding: 10px 35px 10px 15px;
							appearance: none;
							cursor: pointer;
							transition: 0.25s;

							&:hover {
								opacity: 1;
								transition: 0.25s;
							}
						}

						&::after {
							content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4' viewBox='0 0 9 4' fill='none' stroke='%23111111'%3E%3Cpath d='M0.5 0L4.5 4L8.5 0' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
							position: absolute;
							top: 5px;
							right: 15px;
						}
					}

					.option.dark::after {
						content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4' viewBox='0 0 9 4' fill='none' stroke='%23ffffff'%3E%3Cpath d='M0.5 0L4.5 4L8.5 0' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
					}
				}
			}

			> img {
				width: -webkit-fill-available;
				display: block;
			}

			> img.tablet,
			> img.mobile {
				display: none;
			}

			> img.desktop {
				filter: contrast(0);
				transition: 0.25s;
			}

			> img.desktop:hover {
				filter: contrast(1) !important;
				transition: 0.25s;
			}

			.commits {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 15px;
				width: -webkit-fill-available;
				position: relative;

				.commit {
					display: flex;
					padding: 18px 20px;
					flex-direction: column;
					align-items: flex-start;
					gap: 10px;
					align-self: stretch;
					border-radius: 10px;
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#ededed, #1c1c1c);

					p {
						opacity: 1;
						font-size: 12px;
						font-weight: 500;
						letter-spacing: -0.06px;
						align-self: stretch;
						display: flex;
						align-items: center;
						gap: 7.5px;

						img {
							height: 15px;
						}
					}

					b {
						font-size: 13px;
						font-weight: 600;
						letter-spacing: -0.065px;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						max-width: 90%;
					}
				}
			}

			.commits.tablet,
			.commits.mobile {
				display: none;
			}

			.commits::after,
			.repos::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				max-height: 1500px;
				background: linear-gradient(
					to bottom,
					light-dark(rgba(249, 249, 251, 0), rgba(22, 22, 22, 0)) 0%,
					light-dark(rgba(249, 249, 251, 1), rgba(22, 22, 22, 1)) 100%
				);
				pointer-events: none;
			}

			.marquee {
				overflow: hidden;
				white-space: nowrap;
				width: -webkit-fill-available;
				position: relative;

				.marquee-content {
					display: flex;
					align-items: center;
					animation: scroll-left 10s linear infinite;
				}

				h1,
				img {
					margin: 0 10px;
					font-size: 50px;
					font-weight: 900;
					letter-spacing: -0.25px;
					text-transform: uppercase;
				}

				img {
					height: 30px;
				}
			}

			.marquee::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					90deg,
					light-dark(#f9f9fb, #161616) 0%,
					transparent 30%,
					transparent 70%,
					light-dark(#f9f9fb, #161616) 100%
				);
				pointer-events: none;
			}

			.ad {
				display: flex;
				padding: 20px;
				flex-direction: column;
				align-items: center;
				gap: 20px;
				align-self: stretch;
				border-radius: 10px;
				border: 1px solid light-dark(#dfdfdf, #242424);
				background: linear-gradient(
						258deg,
						rgba(66, 0, 255, 0.2) 0%,
						rgba(0, 117, 255, 0.2) 100%
					),
					light-dark(#ededed, #1c1c1c);

				img {
					align-self: stretch;
					border-radius: 10px;
				}

				.button {
					width: -webkit-fill-available;
				}
			}

			.siteImages {
				display: flex;
				height: min(500px, 50vh);
				width: -webkit-fill-available;
				overflow-x: scroll;
				overflow-y: hidden;
				scroll-behavior: smooth;
				gap: 10px;
				cursor: grab;
				user-select: none;
				border-radius: 10px;

				> div {
					position: relative;

					> * {
						height: -webkit-fill-available;
					}
				}

				> div::after {
					content: "↗️";
					position: absolute;
					bottom: 10px;
					right: 10px;
					background-color: light-dark(#e7e7e785, #16161685);
					backdrop-filter: blur(10px);
					border-radius: 10px;
					height: 50px;
					width: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}

			.siteImages.active {
				cursor: grabbing;
			}

			.siteImagesColumns {
				display: flex;
				width: -webkit-fill-available;
				gap: 25px;

				.column {
					display: flex;
					flex-direction: column;
					width: calc(50% - (25px / 2));
					gap: 25px;

					> * {
						display: flex;
						border-radius: 10px;
						border: 2.5px solid light-dark(#dfdfdf, #242424);
						background: light-dark(#ededed, #1c1c1c);
						max-width: 100%;
						transition: 0.25s;
						cursor: pointer;

						* {
							max-width: 100%;
							border-radius: 7.5px;
							width: -webkit-fill-available;
						}
					}

					> *:hover {
						opacity: 0.95;
						transition: 0.25s;
					}

					iframe {
						height: max(100vh, 750px);
					}
				}

				.column.full {
					width: -webkit-fill-available;
				}
			}

			.siteImagesColumns.mobile {
				display: none;

				.column {
					width: -webkit-fill-available;
				}
			}

			.alert {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				width: -webkit-fill-available;
				padding: 15px 22px;
				border-radius: 5px;
				background: rgba(44, 44, 44, 0.25);
				text-align: center;
				font-size: 14px;
				font-weight: 600;
				line-height: 24px;
				letter-spacing: -0.07px;
				border-radius: 5px;
				border: 1px solid light-dark(#cdcdcd, #232323);
			}

			.alert.green {
				background: linear-gradient(
						90deg,
						rgba(0, 255, 246, 0.2) 0%,
						rgba(44, 44, 44, 0) 100%
					),
					rgba(44, 44, 44, 0.25);
			}

			.alert.yellow {
				background: linear-gradient(
						90deg,
						rgba(238, 255, 0, 0.2) 0%,
						rgba(44, 44, 44, 0) 100%
					),
					rgba(44, 44, 44, 0.25);
			}

			.alert.red {
				background: linear-gradient(
						90deg,
						rgba(255, 0, 238, 0.2) 0%,
						rgba(44, 44, 44, 0) 100%
					),
					rgba(44, 44, 44, 0.25);
			}

			.repos {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 15px;
				width: -webkit-fill-available;
				position: relative;
			}

			.notes {
				margin: 0;
				padding: 0;
				list-style: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
				display: grid;
				align-self: stretch;
				gap: 30px;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				grid-auto-flow: row dense;

				.note {
					grid-area: span 1 / span 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 30px;
					border-radius: 10px;
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#ffffff, #1c1c1c);
					background-size: 100%;
					background-position-x: center;
					background-repeat: no-repeat;
					padding: 20px;
					transform: scale(1);
					transition: transform 0.25s ease;
					cursor: move;

					.attachments {
						display: flex;
						width: -webkit-fill-available;
						pointer-events: none;
						flex-direction: column;
						gap: 15px;

						> * {
							width: -webkit-fill-available;
							border-radius: 10px;
							border: 3px solid light-dark(#dddddd, #2c2c2c);
							height: auto;
							max-height: 40vh;
							align-self: auto !important;
						}
					}

					.details {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						align-self: stretch;
						gap: 15px;
						padding: 2px;

						.info {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-start;
							gap: 5px;

							h6 {
								font-size: 14px;
								font-weight: 600;
								letter-spacing: -0.07px;
							}

							p {
								opacity: 0.5;
								font-size: 14px;
								font-weight: 500;
								letter-spacing: -0.07px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 13;
								-webkit-box-orient: vertical;
							}
						}

						.time {
							display: flex;
							padding: 5px 7px;
							justify-content: center;
							align-items: center;
							gap: 5px;
							border-radius: 100px;
							border: 1px solid light-dark(#11111125, #ffffff25);
							opacity: 0.5;
							font-size: 10px;
							font-weight: 500;

							svg,
							i {
								width: 11px;
								height: 11px;
								stroke-width: 1.5px;
								stroke: light-dark(#111111, #ffffff);
							}
						}

						.pills {
							display: flex;
							gap: 10px;
							flex-wrap: wrap;
						}

						.pills.actions {
							display: none !important;

							.time {
								cursor: pointer;
							}
						}
					}
				}

				.note.long {
					grid-area: span 1 / span 2;
					transition: 0.25s;
				}

				.note.high {
					grid-area: span 2 / span 1;
					transition: 0.25s;
				}

				.note.ghost {
					border: 1px dashed light-dark(#ffffff, #111111);
					opacity: 0.9;
					transition: 0.25s;
				}

				.note.hidden {
					opacity: 0;
					transition: 0.25s;
				}

				.note.full {
					grid-area: span 1 / span 3;
					transform: scale(1.005);
					transition: transform 0.25s ease;

					.attachments > * {
						max-height: unset !important;
					}

					.attachments.many {
						display: grid !important;
						grid-template-columns: 1fr 1fr;

						> * {
							width: 100% !important;
						}
					}

					p {
						-webkit-line-clamp: unset !important;
					}

					.pills.actions {
						display: flex !important;
					}
				}
			}

			.newNote {
				* {
					color: light-dark(#111111, #ffffff);
				}

				.input-group {
					width: max-content;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 8px;

					.button {
						padding: 1px 7.5px 2.5px 7px;
						width: unset;
						line-height: normal;
					}
				}

				input:not([type="checkbox"]),
				textarea {
					background: transparent;
					border: none;
					width: -webkit-fill-available;
					outline: none;
				}

				input[type="checkbox"] {
					appearance: none;
					display: flex;
					cursor: pointer;
				}

				input[type="checkbox"]::after {
					content: " ";
					background: light-dark(#d1d1d1, #2a2a2a);
					height: 16px;
					width: 16px;
					display: inline-block;
					border-radius: 3px;
					transition: 0.25s;
				}

				input[type="checkbox"].active::after {
					background: light-dark(#111111, #ffffff);
					transition: 0.25s;
				}

				input#title {
					font-size: 20px;
				}

				.attachments {
					display: flex;
					flex-direction: column;
					gap: 5px;
					width: -webkit-fill-available;
				}

				.buttons {
					width: -webkit-fill-available;
				}
			}

			.logs {
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-self: stretch;
				gap: 10px;

				.log {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					gap: 20px;
					border-radius: 10px;
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#ffffff, #1c1c1c);
					background-size: 100%;
					background-position-x: center;
					background-repeat: no-repeat;
					padding: 20px;
					transform: scale(1);
					transition: transform 0.25s ease;
					cursor: pointer;

					.date {
						background: light-dark(#ebebeb, #252525);
						padding: 12px 10px;
						border-radius: 5px;
						display: flex;
						flex-direction: column;
						gap: 2px;
						min-width: 90px;

						h2 {
							line-height: 19px !important;
						}

						h6 {
							font-size: 12px !important;
							line-height: 12px !important;
						}
					}

					.details {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						align-self: stretch;
						gap: 15px;
						padding: 2px;

						.info {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-start;
							gap: 5px;

							p {
								opacity: 0.5;
								font-size: 14px;
								font-weight: 500;
								letter-spacing: -0.07px;
							}
						}

						.time {
							display: flex;
							padding: 5px 7px;
							justify-content: center;
							align-items: center;
							gap: 5px;
							border-radius: 100px;
							border: 1px solid light-dark(#11111125, #ffffff25);
							opacity: 0.5;
							font-size: 10px;
							font-weight: 500;

							svg,
							i {
								width: 11px;
								height: 11px;
								stroke-width: 1.5px;
								stroke: light-dark(#111111, #ffffff);
							}
						}

						.pills {
							display: flex;
							gap: 10px;
							flex-wrap: wrap;
						}

						.pills.actions {
							display: none !important;

							.time {
								cursor: pointer;
							}
						}
					}
				}

				.log.full {
					transform: scale(1.005);
					transition: transform 0.25s ease;

					.pills.actions {
						display: flex !important;
					}
				}
			}

			.newLog {
				* {
					color: light-dark(#111111, #ffffff);
				}

				.input-group {
					width: max-content;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 8px;

					.button {
						padding: 1px 7.5px 2.5px 7px;
						width: unset;
						line-height: normal;
					}
				}

				input:not([type="checkbox"]),
				textarea {
					background: transparent;
					border: none;
					width: -webkit-fill-available;
					outline: none;
				}

				input[type="checkbox"] {
					appearance: none;
					display: flex;
					cursor: pointer;
				}

				input[type="checkbox"]::after {
					content: " ";
					background: light-dark(#d1d1d1, #2a2a2a);
					height: 16px;
					width: 16px;
					display: inline-block;
					border-radius: 3px;
					transition: 0.25s;
				}

				input[type="checkbox"].active::after {
					background: light-dark(#111111, #ffffff);
					transition: 0.25s;
				}

				input#title {
					font-size: 20px;
				}

				.buttons {
					width: -webkit-fill-available;
				}
			}

			.puzzle {
				display: flex;
				align-items: flex-start;
				align-self: stretch;
				justify-content: center;
				gap: 30px;
				width: -webkit-fill-available;
				flex-wrap: wrap;

				.part {
					display: flex;
					padding: 17.5px 20px;
					justify-content: center;
					align-items: center;
					width: -webkit-fill-available;
					min-width: 90px;
					max-width: calc(100% / 9);
					border-radius: 10px;
					font-size: 35px;
					font-weight: 600;
					letter-spacing: -0.175px;
					text-align: center;
				}

				input {
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#fbfbfb, #1c1c1c);
				}
			}

			form:has(.puzzle) {
				display: flex;
				padding-top: 10px;
				flex-direction: column;
				align-items: flex-start;
				gap: 15px;
				align-self: stretch;
			}

			.leaderboard {
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-self: stretch;
				gap: 10px;

				.entry {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 20px;
					border-radius: 10px;
					border: 1px solid light-dark(#dfdfdf, #242424);
					background: light-dark(#ffffff, #1c1c1c);
					background-size: 100%;
					background-position-x: center;
					background-repeat: no-repeat;
					padding: 20px;
					transform: scale(1);
					transition: transform 0.25s ease;
					cursor: pointer;

					.date {
						background: light-dark(#ebebeb, #252525);
						padding: 12px 10px;
						border-radius: 5px;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 2px;
						min-width: 80px;

						h2 {
							line-height: 19px !important;
						}
					}

					.time {
						display: flex;
						padding: 5px 7px;
						justify-content: center;
						align-items: center;
						gap: 5px;
						border-radius: 100px;
						border: 1px solid light-dark(#11111125, #ffffff25);
						opacity: 0.5;
						font-size: 10px;
						font-weight: 500;

						svg,
						i {
							width: 11px;
							height: 11px;
							stroke-width: 1.5px;
							stroke: light-dark(#111111, #ffffff);
						}
					}
				}
			}

			.graph {
				display: flex;
				padding: 15px;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-end;
				gap: 5px;
				align-self: stretch;
				border-radius: 10px;
				border: 1px solid light-dark(#dfdfdf, #242424);
				background: light-dark(#ededed, #1c1c1c);
				overflow: hidden;

				.week {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 5px;
					align-self: stretch;
					justify-content: flex-start;

					.day {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						align-self: stretch;
						border-radius: 2px;
						outline: 1px solid light-dark(#dfdfdf, #242424);
						fill: light-dark(#ededed, #1c1c1c);
						background: light-dark(#ededed, #1c1c1c);
						width: 12.5px;
						height: 12.5px;
						shape-rendering: geometricPrecision;
						outline-offset: -1px;
					}

					.day.dark {
						fill: #0e4429;
						background: #0e4429;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}

					.day.green {
						fill: #006d32;
						background: #006d32;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}

					.day.bright {
						fill: #26a641;
						background: #26a641;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}

					.day.high {
						fill: #39d353;
						background: #39d353;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}

					.day.star {
						fill: #00ff2b;
						background: #00ff2b;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}

					.day.star2 {
						fill: #00fff6;
						background: #00fff6;
						outline: 1px solid rgba(255, 255, 255, 0.05);
					}
				}
			}
		}

		.inner.center,
		.inner.center .intro {
			align-items: center !important;
			justify-content: center;
			text-align: center;
		}
	}

	footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: min(123px, 20%);
		padding-bottom: min(80px, 15%);
		background: light-dark(#fdfdfd, #111);
		align-self: stretch;
		transition: 0.25s;

		.inner {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 25px;
			width: min(900px, 90%);

			img:nth-of-type(1),
			img:nth-of-type(2) {
				width: min(90%, 500px);
			}

			.intro {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				gap: 10px;
				align-self: stretch;

				h1 {
					font-size: 48px;
					font-weight: 600;
					line-height: 56px;
					letter-spacing: -1.2px;
				}

				.gradient {
					background: linear-gradient(
						90deg,
						#ff00ee 0%,
						#00fff6 100%
					);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline;
				}

				.gradient1 {
					background: linear-gradient(
						90deg,
						#ff00ee 0%,
						#00fff6 250%
					);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline;
					font-family: "Shadows Into Light Two";
					letter-spacing: 4px;
				}

				.gradient2 {
					background: linear-gradient(
						90deg,
						#ff00ee -150%,
						#00fff6 100%
					);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline;
					background-size: 200% 100%;
					animation: shine 2s ease-out infinite;
				}

				h5 {
					opacity: 0.5;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: -0.09px;
					width: -webkit-fill-available;
				}
			}

			.buttons {
				display: flex;
				align-items: flex-start;
				gap: 15px;
			}

			p {
				opacity: 0.5;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: -0.09px;
				align-self: stretch;

				a {
					text-decoration-line: underline;
				}
			}
		}
	}

	.status {
		margin-left: -1px;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: -0.09px;
		display: flex;
		align-items: center;
		gap: 10px;
		--color: rgb(128, 128, 128);
		--shadow-color: rgba(128, 128, 128, 0.2);
	}

	.status:not(.cake) {
		margin-left: 5px !important;
	}

	.status.online::before {
		--color: rgb(44, 216, 44);
		--shadow-color: rgba(44, 218, 44, 0.2);
		animation: pulse 2s infinite;
	}

	.status.dnd::before {
		--color: rgb(216, 44, 44);
		--shadow-color: rgba(216, 44, 44, 0.2);
		animation: pulse 2s infinite;
	}

	.status.idle::before {
		--color: rgb(216, 216, 44);
		--shadow-color: rgba(216, 216, 44, 0.2);
		animation: pulse 2s infinite;
	}

	.status:not(.cake)::before {
		content: "";
		background: var(--color);
		border-radius: 100%;
		height: 7px;
		width: 7px;
		box-shadow: 0 0 0 4px var(--shadow-color);
	}
}

.js-Pjax-remove {
	position: absolute;
	left: 50%;
}

.Animated {
	animation-fill-mode: both;
	animation-duration: 1s;
}

.Animated--reverse {
	animation-direction: reverse;
}

.Animate--fast {
	animation-duration: 0.5s;
}
.Animate--noDelay {
	animation-delay: 0s !important;
}

.Animate--slideInDown {
	animation-name: Animation-slideInDown;
}

@keyframes Animation-slideInDown {
	0% {
		opacity: 0;
		transform: translateY(100rem);
	}

	100% {
		transform: translateY(0);
	}
}

.Animate--slideInUp {
	animation-name: Animation-slideInUp;
}

@keyframes Animation-slideInUp {
	0% {
		opacity: 0;
		transform: translateY(-100rem);
	}

	100% {
		transform: translateY(0);
	}
}

div:has(> iframe[title="ticker tape TradingView widget"]) {
	position: fixed;
	top: 0;
	width: calc(100% + 60px) !important;
	margin-left: -30px;
	cursor: not-allowed;
	pointer-events: none;
	transition: 0.25s;
}