:root {
	--bg: #0b1422;
	--ink: #eaf2ff;
	--muted: #9db2cd;
	--primary: #35c8ff;
	--accent: #00f0ff;
	--card: rgba(16, 28, 44, 0.88);
	--line: #24354e;
	--shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(53, 200, 255, 0.12);
	--top-safe-space: 78px;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body.dev-page {
	font-family: "Poppins", sans-serif;
	color: var(--ink);
	background: radial-gradient(1200px 700px at -10% -20%, #22466d 0%, transparent 60%), radial-gradient(1000px 700px at 120% 120%, #0f2b48 0%, transparent 55%), linear-gradient(160deg, #09101d, #0b1422 45%, #0b1a2e 100%);
	background-size: 115% 115%, 120% 120%, 100% 100%;
	position: relative;
	overscroll-behavior: none;
	-webkit-font-smoothing: antialiased;
	animation: auroraFlow 16s ease-in-out infinite alternate;
}

body.dev-page::after {
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(1200px 700px at 50% 10%, rgba(130, 224, 255, 0.09), transparent 62%), radial-gradient(1000px 780px at 50% 100%, rgba(0, 0, 0, 0.36), transparent 75%);
	opacity: 0.42;
	pointer-events: none;
	animation: vignettePulse 9s ease-in-out infinite;
}

body.dev-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(80, 228, 255, 0.05) 0px, rgba(80, 228, 255, 0.05) 1px, transparent 1px, transparent 4px);
	opacity: 0.36;
	pointer-events: none;
	animation: scanlineMove 8.5s linear infinite, scanlineFlicker 1.9s steps(2, end) infinite;
}

#networkCanvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0.78;
	mix-blend-mode: screen;
	animation: canvasPulse 6.8s ease-in-out infinite;
}

.floating-icons {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.16;
}

.floating-icon {
	position: absolute;
	font-size: clamp(18px, 1.8vw, 28px);
	color: #79c4ff;
	animation: floatY 8s ease-in-out infinite, iconTwinkle 4.8s ease-in-out infinite;
}

.floating-icon:nth-child(1) { top: 12%; left: 6%; }
.floating-icon:nth-child(2) { top: 22%; left: 82%; animation-delay: 1s; }
.floating-icon:nth-child(3) { top: 72%; left: 9%; animation-delay: 2s; }
.floating-icon:nth-child(4) { top: 65%; left: 88%; animation-delay: 3s; }
.floating-icon:nth-child(5) { top: 38%; left: 56%; animation-delay: 1.5s; }
.floating-icon:nth-child(6) { top: 84%; left: 48%; animation-delay: 2.5s; }

.dev-wrapper {
	position: relative;
	z-index: 1;
	height: 100vh;
	height: 100dvh;
	padding: clamp(10px, 1.6vh, 16px) clamp(16px, 2.8vw, 36px);
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: clamp(6px, 1vh, 10px);
}

.dev-wrapper::before {
	content: "";
	position: absolute;
	inset: 10% 12%;
	background-image: linear-gradient(rgba(67, 224, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 224, 255, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
	opacity: 0.46;
	pointer-events: none;
	animation: gridDrift 14s linear infinite, gridGlow 5.4s ease-in-out infinite;
}

.dev-wrapper::after {
	content: "";
	position: absolute;
	inset: -18% -14%;
	background:
		radial-gradient(420px 280px at 18% 24%, rgba(0, 240, 255, 0.16), transparent 68%),
		radial-gradient(360px 260px at 82% 72%, rgba(114, 170, 255, 0.14), transparent 70%),
		radial-gradient(380px 260px at 64% 16%, rgba(56, 236, 202, 0.1), transparent 72%);
	opacity: 0.5;
	pointer-events: none;
	filter: blur(1px);
	animation: lightBlobDrift 20s ease-in-out infinite alternate;
}

.dev-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	font-size: 13px;
	color: var(--muted);
	min-height: 0;
}

.btn-back {
	text-decoration: none;
	color: #9fe9ff;
	background: rgba(25, 42, 64, 0.8);
	border: 1px solid #3d618a;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
	position: fixed;
	top: 12px;
	left: 14px;
	z-index: 6;
}

.btn-back:hover {
	background: #214466;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(79, 181, 255, 0.25), 0 0 16px rgba(0, 240, 255, 0.22);
}

.dev-topbar__copy {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	text-align: center;
	white-space: normal;
	padding-bottom: 6px;
	z-index: 2;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.dev-header {
	text-align: right;
	min-height: 0;
}

.dev-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.dev-header__brand--topbar {
	position: fixed;
	top: 10px;
	left: 198px;
	margin-bottom: 0;
	z-index: 6;
}

.dev-header__logo {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.dev-header__brand--topbar .dev-header__logo {
	width: 72px;
	height: 72px;
}

.dev-header__institution {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.2;
}

.dev-header__brand--topbar .dev-header__inst-line {
	font-size: 16px;
	line-height: 1.1;
	font-weight: 700;
}

.dev-header__brand--topbar .dev-header__inst-line--campus {
	font-weight: 800;
}

.dev-header__inst-line {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #a8bfd8;
}

.dev-header__inst-line--campus {
	font-weight: 700;
}

.dev-header__title {
	margin: 0;
	font-size: clamp(30px, 2.6vw, 42px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #66d7ff;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-shadow: 0 0 24px rgba(102, 215, 255, 0.35), 0 0 42px rgba(0, 240, 255, 0.18);
	animation: titlePulse 4.2s ease-in-out infinite;
	position: fixed;
	top: 16px;
	right: 22px;
	z-index: 6;
}

.dev-header__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	font-size: 52px;
	line-height: 1;
	color: #ff5a6c;
	transform: translateY(1px);
	filter: drop-shadow(0 0 12px rgba(255, 90, 108, 0.38));
	animation: titleIconOrbit 3.8s ease-in-out infinite;
}

.iot-hud {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border: 1px solid #3a5f87;
	border-radius: 999px;
	background: rgba(18, 35, 55, 0.78);
	box-shadow: inset 0 0 0 1px rgba(90, 177, 245, 0.18), 0 0 18px rgba(53, 200, 255, 0.14);
}

.iot-hud__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: #aef3ff;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(20, 49, 78, 0.88);
	border: 1px solid rgba(86, 170, 227, 0.24);
	animation: hudBlink 4.5s ease-in-out infinite;
}

.iot-hud__item:nth-child(2) {
	animation-delay: 0.8s;
}

.iot-hud__item:nth-child(3) {
	animation-delay: 1.6s;
}

.dev-grid {
	min-height: 0;
	height: calc(100% - var(--top-safe-space));
	margin-top: var(--top-safe-space);
	display: grid;
	grid-template-columns: repeat(2, minmax(300px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	align-items: stretch;
	align-content: stretch;
	width: min(100%, 1240px);
	justify-self: center;
	align-self: start;
}

.dev-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--primary);
	border-radius: 20px;
	padding: clamp(14px, 1.5vh, 18px);
	box-shadow: var(--shadow);
	backdrop-filter: blur(3px);
	display: grid;
	grid-template-rows: auto auto auto auto;
	height: auto;
	min-height: clamp(360px, 52vh, 560px);
	gap: 10px;
	align-content: start;
	overflow: hidden;
	position: relative;
}

.dev-card::before {
	content: "";
	position: absolute;
	inset: -60% -10% auto -10%;
	height: 44%;
	background: linear-gradient(180deg, rgba(120, 205, 255, 0.24), rgba(120, 205, 255, 0));
	transform: translateY(-180%);
	animation: cardScan 7s ease-in-out infinite;
	pointer-events: none;
}

.dev-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(118, 194, 255, 0.3);
	box-shadow: inset 0 0 26px rgba(79, 181, 255, 0.1), 0 0 20px rgba(0, 240, 255, 0.08);
	pointer-events: none;
}

.dev-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.2);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dev-card__top {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 12px;
	align-items: center;
}

.dev-card__avatar-wrap {
	position: relative;
	width: 116px;
	height: 116px;
	display: grid;
	place-items: center;
}

.dev-card__avatar-wrap::before {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(125, 223, 255, 0.34), rgba(125, 223, 255, 0));
	filter: blur(6px);
	opacity: 0.7;
	animation: avatarAura 4.8s ease-in-out infinite;
}

.dev-card__avatar-wrap::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px solid rgba(130, 206, 255, 0.6);
	animation: pulseRing 2.8s ease-out infinite;
}

.dev-card__avatar-ring {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px dashed rgba(157, 208, 242, 0.9);
	animation: ringOrbit 10s linear infinite, ringBreath 3.2s ease-in-out infinite;
}

.dev-card__avatar {
	width: 106px;
	height: 106px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #173250;
	box-shadow: 0 6px 16px rgba(53, 126, 177, 0.22);
	animation: avatarFloat 4.2s ease-in-out infinite;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.dev-card:hover .dev-card__avatar {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 10px 22px rgba(53, 126, 177, 0.34), 0 0 14px rgba(0, 240, 255, 0.2);
}

.dev-card__name {
	margin: 0;
	font-size: clamp(24px, 1.8vw, 30px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.dev-card__role {
	margin: 4px 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: #8de8ff;
}

.dev-card__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 0 1 auto;
	min-width: 0;
	padding-right: 8px;
}

.dev-card__meta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}

.dev-card__meta-divider {
	width: 1px;
	height: 30px;
	background: rgba(133, 195, 241, 0.45);
	margin: 0 2px;
}

.dev-card__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-left: 8px;
	flex: 0 0 auto;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-decoration: none;
	color: #9feeff;
	background: rgba(21, 45, 70, 0.9);
	border: 1px solid rgba(88, 168, 223, 0.4);
	transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.2s ease, background-color 0.12s ease;
	animation: socialBounce 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.social-link:nth-child(2) {
	animation-delay: 0.35s;
}

.social-link:nth-child(3) {
	animation-delay: 0.7s;
}

.social-link:hover {
	transform: translateY(-1px);
	color: #d5fbff;
	box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.social-link:active {
	transform: translateY(1px) scale(0.95);
	background: rgba(12, 30, 50, 0.95);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 8px rgba(0, 240, 255, 0.12);
}

.dev-card__info-icon {
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.dev-card__info-icon:active {
	transform: translateY(1px) scale(0.95);
	background: #152b46;
	box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.42);
}

.dev-card__telemetry {
	margin-top: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.dev-card__telemetry span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #9feeff;
	background: rgba(23, 48, 74, 0.86);
	border: 1px solid rgba(0, 240, 255, 0.3);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.08);
	animation: telemetryBlink 2.8s ease-in-out infinite;
}

.dev-card__telemetry span:nth-child(2) {
	animation-delay: 0.6s;
}

.dev-card__telemetry span:nth-child(3) {
	animation-delay: 1.2s;
}

.skill-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: #1a3351;
	color: #a8ecff;
	border: 1px solid rgba(0, 240, 255, 0.22);
}

.dev-card__divider {
	border: 0;
	height: 1px;
	margin: 0;
	background: var(--line);
}

.dev-card__body {
	min-height: 0;
	display: flex;
	align-items: flex-start;
}

.dev-card__info {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.dev-card__info li {
	display: grid;
	grid-template-columns: 24px 70px 1fr;
	gap: 10px;
	align-items: center;
	font-size: 14px;
}

.dev-card__info-icon {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: #1a3150;
	font-size: 13px;
}

.dev-card__info-label {
	font-weight: 600;
	color: #90a6c1;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dev-card__info-value {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dev-card__quote {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #162c45;
	color: #a7bdd7;
	font-size: 14px;
	line-height: 1.35;
}

.dev-card__quote-line {
	display: inline-block;
	margin-top: 6px;
	color: inherit;
	font-weight: 400;
}

.typewriter-text {
	display: inline-block;
	margin-top: 6px;
	color: #c7f6ff;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 1.2em;
}

.typewriter-text--block {
	display: block;
	margin-top: 4px;
	white-space: normal;
	font-size: 0.9em;
	line-height: 1.4;
	font-family: "Consolas", "Courier New", monospace;
	background: rgba(4, 15, 25, 0.55);
	border: 1px solid rgba(78, 170, 230, 0.2);
	border-radius: 8px;
	padding: 7px 9px;
}

.terminal-line {
	display: block;
	margin: 0;
}

.terminal-line--danger {
	color: #ff6a6a;
}

.terminal-line--warn {
	color: #ffd38a;
}

.terminal-line--ok {
	color: #8df7a9;
}

.terminal-line--muted {
	color: #9fc4e7;
}

.terminal-line--success {
	color: #75f5ff;
}

.typewriter-text::after {
	content: "|";
	margin-left: 2px;
	color: #79dfff;
	animation: caretBlink 0.85s steps(1, end) infinite;
}

.reveal {
	opacity: 0;
	transform: translateY(22px) scale(0.985);
	filter: blur(2px);
	transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.reveal-delay-1 {
	transition-delay: 0.06s;
}

.reveal-delay-2 {
	transition-delay: 0.16s;
}

@keyframes spinSlow {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes floatY {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes auroraFlow {
	0% { background-position: 0% 0%, 100% 100%, 0% 0%; }
	50% { background-position: 10% 8%, 88% 92%, 0% 0%; }
	100% { background-position: 18% 14%, 82% 86%, 0% 0%; }
}

@keyframes vignettePulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.5; }
}

@keyframes iconTwinkle {
	0%, 100% { opacity: 0.68; filter: drop-shadow(0 0 0 rgba(121, 196, 255, 0)); }
	50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(121, 196, 255, 0.35)); }
}

@keyframes cardScan {
	0% { transform: translateY(-180%); opacity: 0; }
	20% { opacity: 0.8; }
	60% { opacity: 0.5; }
	100% { transform: translateY(310%); opacity: 0; }
}

@keyframes pulseRing {
	0% { transform: scale(0.86); opacity: 0.6; }
	70% { transform: scale(1.06); opacity: 0.15; }
	100% { transform: scale(1.12); opacity: 0; }
}

@keyframes avatarAura {
	0%, 100% { transform: scale(0.96); opacity: 0.55; }
	50% { transform: scale(1.06); opacity: 0.85; }
}

@keyframes ringOrbit {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

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

@keyframes avatarFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

@keyframes hudBlink {
	0%, 100% { box-shadow: 0 0 0 rgba(86, 184, 255, 0); }
	50% { box-shadow: 0 0 12px rgba(86, 184, 255, 0.22); }
}

@keyframes gridDrift {
	from { transform: translateY(0); }
	to { transform: translateY(22px); }
}

@keyframes gridGlow {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.28); }
}

@keyframes titlePulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.15); }
}

@keyframes titleIconOrbit {
	0%, 100% {
		transform: translateY(1px) rotate(0deg) scale(1);
		filter: drop-shadow(0 0 10px rgba(255, 90, 108, 0.3));
	}
	30% {
		transform: translateY(-2px) rotate(-6deg) scale(1.06);
		filter: drop-shadow(0 0 18px rgba(255, 76, 106, 0.46));
	}
	60% {
		transform: translateY(-1px) rotate(6deg) scale(1.03);
		filter: drop-shadow(0 0 14px rgba(255, 112, 130, 0.38));
	}
}

@keyframes telemetryBlink {
	0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.08); }
	50% { box-shadow: 0 0 14px rgba(0, 240, 255, 0.22); }
}

@keyframes scanlineMove {
	from { transform: translateY(0); }
	to { transform: translateY(28px); }
}

@keyframes scanlineFlicker {
	0%, 100% { opacity: 0.34; }
	50% { opacity: 0.44; }
}

@keyframes canvasPulse {
	0%, 100% { opacity: 0.74; }
	50% { opacity: 0.86; }
}

@keyframes lightBlobDrift {
	0% { transform: translate3d(-2%, 0%, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(3%, -2%, 0) rotate(5deg) scale(1.04); }
	100% { transform: translate3d(-1%, 2%, 0) rotate(-4deg) scale(1.02); }
}

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

@keyframes socialBounce {
	0%, 100% {
		transform: translateY(0) scale(1);
		box-shadow: 0 0 0 rgba(0, 240, 255, 0);
	}
	20% {
		transform: translateY(-5px) scale(1.03);
		box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
	}
	40% {
		transform: translateY(0) scale(0.98);
	}
	60% {
		transform: translateY(-2px) scale(1.01);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dev-card::before,
	.dev-card__avatar-ring,
	.dev-card__avatar,
	.dev-card__avatar-wrap::before,
	.dev-card__avatar-wrap::after,
	.floating-icon,
	.iot-hud__item,
	.social-link,
	.dev-header__title-icon,
	body.dev-page,
	body.dev-page::after,
	.dev-wrapper::before,
	.dev-wrapper::after,
	#networkCanvas,
	.dev-header__title,
	body.dev-page::before,
	.dev-card__telemetry span {
		animation: none;
	}
}

@media (max-width: 980px) {
	.dev-wrapper {
		padding: 10px;
		gap: 10px;
	}

	.dev-topbar {
		font-size: 12px;
	}

	.dev-header__title {
		top: 40px;
		right: 10px;
		font-size: clamp(20px, 4vw, 28px);
		gap: 8px;
	}

	.dev-header__title-icon {
		width: 54px;
		height: 54px;
		font-size: 38px;
		transform: translateY(1px);
	}

	.btn-back {
		top: 10px;
		left: 10px;
		padding: 6px 10px;
		font-size: 11px;
	}

	.dev-header__brand--topbar {
		top: 42px;
		left: 10px;
	}

	.dev-header__brand--topbar .dev-header__logo {
		width: 54px;
		height: 54px;
	}

	.dev-header__brand--topbar .dev-header__inst-line {
		font-size: 14px;
		font-weight: 700;
	}

	.dev-topbar__copy {
		font-size: 11px;
		padding-bottom: 2px;
	}

	.dev-grid {
		--top-safe-space: 72px;
		grid-template-columns: repeat(2, minmax(240px, 1fr));
		gap: 10px;
		height: calc(100% - var(--top-safe-space));
		margin-top: var(--top-safe-space);
		align-self: start;
	}

	.dev-card {
		padding: 12px;
	}

	.dev-card__meta {
		gap: 8px;
	}

	.dev-card__meta-divider {
		height: 26px;
	}

	.dev-card__social {
		padding-left: 6px;
		gap: 6px;
	}

	.dev-card__skills {
		padding-right: 6px;
	}

	.social-link {
		width: 30px;
		height: 30px;
	}

	.dev-card__name {
		font-size: 20px;
	}
}