:root {
 	--bg: #0f1115;
 	--fg: #e6e6e6;
 	--muted: #9aa3b2;
 	--accent: #7be0b5;
 	--bubble: #1a1f29;
 	--bubble-border: #2b3342;
 	--face: #ffd36e;
 	--face-shadow: #e4b857;
 	--btn: #202635;
 	--btn-border: #2b3342;
 	--ring: #3a455a;
 }

 @media (prefers-color-scheme: light) {
 	:root {
 		--bg: #f6f7fb;
 		--fg: #171a21;
 		--muted: #5a6475;
 		--accent: #0ea5e9;
 		--bubble: #ffffff;
 		--bubble-border: #e7eaf0;
 		--face: #ffcc66;
 		--face-shadow: #e2b155;
 		--btn: #fff;
 		--btn-border: #e7eaf0;
 		--ring: #cbd5e1;
 	}
 }

 * {
 	box-sizing: border-box
 }

 html,
 body {
 	height: 100%
 }

 body {
 	margin: 0;
 	font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
 	background: radial-gradient(1200px 800px at 70% 10%, rgba(123, 224, 181, .12), transparent 60%), var(--bg);
 	color: var(--fg);
 	display: grid;
 	place-items: center;
 	padding: 2rem;
 }

 .wrap {
 	width: min(100%, 900px)
 }

 header {
 	margin-bottom: 1.25rem;
 	text-align: center
 }

 header h1 {
 	margin: .2rem 0 .2rem;
 	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem)
 }

 header p {
 	margin: .25rem 0;
 	color: var(--muted)
 }

 .card {
 	background: rgba(255, 255, 255, 0.02);
 	border: 1px solid var(--btn-border);
 	border-radius: 20px;
 	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
 	padding: clamp(1rem, 1.2rem + 1vw, 2rem);
 }

 .stage {
 	display: grid;
 	grid-template-columns: 1fr auto 1fr;
 	align-items: center;
 	gap: clamp(1rem, 3vw, 2rem);
 }


 @media (max-width: 600px) {

 	.stage {
 		display: grid;
 		grid-template-columns: 1fr;
 		align-items: center;
 		gap: clamp(1rem, 3vw, 2rem);
 	}
 }

 /* pixel face container */
 .face {
 	position: relative;
 	width: min(220px, 35vw);
 	aspect-ratio: 1;
 	margin-inline: auto;
 	image-rendering: pixelated;
 	filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .25));
 }

 /* 8-bit style with CSS gradients */
 .face::before {
 	content: "";
 	position: absolute;
 	inset: 0;
 	border-radius: 18%;
 	background:
 		/* eyes */
 		/* radial-gradient(closest-side, #1f2a44 95%, transparent) 32% 40%/10% 10% no-repeat,
     radial-gradient(closest-side, #1f2a44 95%, transparent) 68% 40%/10% 10% no-repeat, */
 		/* blush */
 		radial-gradient(closest-side, rgba(255, 99, 132, .25) 96%, transparent) 25% 58%/14% 10% no-repeat,
 		radial-gradient(closest-side, rgba(255, 99, 132, .25) 96%, transparent) 75% 58%/14% 10% no-repeat,
 		/* mouth */
 		linear-gradient(#1f2a44 0 0) 50% 64%/30% 6% no-repeat,
 		/* base */
 		linear-gradient(var(--face) 0 0);
 	box-shadow:
 		inset 0 -8px 0 0 var(--face-shadow),
 		0 0 0 8px var(--ring);
 	image-rendering: pixelated;
 }

 /* speech bubble */
 .bubble-wrapper {
 	position: relative;
 	max-width: 520px;
 	min-height: 84px;
 }


 .bubble {
 	background: var(--bubble);
 	border: 1px solid var(--bubble-border);
 	border-radius: 18px;
 	padding: 1rem 1.1rem;

 	transition: transform .4s ease, box-shadow .4s ease;
 	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
 	outline: 0;
 }

 .bubble:hover {
 	transform: translateY(-2px);
 	box-shadow: 0 14px 30px rgba(0, 0, 0, .2)
 }

 .bubble.left::after,
 .bubble.right::after {
 	content: "";
 	position: absolute;
 	top: 50%;
 	translate: 0 -50%;
 	border: 10px solid transparent;
 }

 .bubble.left::after {
 	left: -20px;
 	border-right-color: var(--bubble);
 	filter: drop-shadow(-1px 0 var(--bubble-border));
 }

 .bubble.right::after {
 	right: -20px;
 	border-left-color: var(--bubble);
 	filter: drop-shadow(1px 0 var(--bubble-border));
 }

 .bubble a {
 	color: var(--accent);
 	text-decoration: none;
 	border-bottom: 1px dashed color-mix(in oklab, var(--accent), transparent 60%)
 }

 .bubble a:focus-visible {
 	outline: 2px dashed var(--accent);
 	outline-offset: 4px;
 	border-bottom: none
 }

 .type {
 	display: inline-block;
 	border-right: 2px solid color-mix(in oklab, var(--fg), transparent 40%);
 	animation: caret 1s steps(1) infinite
 }

 @keyframes caret {
 	50% {
 		border-color: transparent
 	}
 }

 .controls {
 	display: flex;
 	align-items: center;
 	gap: .5rem;
 	flex-wrap: wrap;
 	justify-content: center;
 	margin-top: 1rem;
 }

 .btn {
 	background: var(--btn);
 	color: var(--fg);
 	border: 1px solid var(--btn-border);
 	padding: .55rem .9rem;
 	border-radius: 999px;
 	cursor: pointer;
 	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
 	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
 	user-select: none;
 }

 .btn:hover {
 	transform: translateY(-1px)
 }

 .btn:active {
 	transform: translateY(0) scale(.98)
 }

 .dots {
 	display: flex;
 	gap: .4rem;
 	align-items: center
 }

 .dot {
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background: color-mix(in oklab, var(--muted), transparent 30%);
 	outline: 0;
 	border: 0;
 }

 .dot[aria-current="true"] {
 	width: 26px;
 	border-radius: 999px;
 	background: var(--accent)
 }

 .sr-only {
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	padding: 0;
 	margin: -1px;
 	overflow: hidden;
 	clip: rect(0, 0, 0, 0);
 	white-space: nowrap;
 	border: 0;
 }

 footer {
 	margin-top: 1.25rem;
 	text-align: center;
 	color: var(--muted);
 	font-size: .95rem
 }


 /* Occhi veri */
 .eye {
 	position: absolute;
 	top: 30%;
 	width: 18%;
 	aspect-ratio: 1;
 	background: #fff;
 	border-radius: 50%;
 	box-shadow: inset 0 0 0 2px #1f2a44, 0 2px 8px rgba(0, 0, 0, .25);
 	overflow: hidden;
 	/* serve per la palpebra */
 }

 .eye.left {
 	left: 24%;
 }

 .eye.right {
 	right: 24%;
 }

 .pupil {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	width: 50%;
 	aspect-ratio: 1;
 	background: #1f2a44;
 	border-radius: 50%;
 	transform: translate(-50%, -50%);
 	transition: transform .06s linear;
 	/* smoothing leggero */
 }

 /* Palpebra (blink) */
 .eye::after {
 	content: "";
 	position: absolute;
 	inset: -2px -2px 0 -2px;
 	background: var(--face);
 	border-radius: inherit;
 	transform-origin: top center;
 	transform: scaleY(0);
 	/* animation: blink 6s infinite; */
 }

 @keyframes blink {

 	0%,
 	3%,
 	97%,
 	100% {
 		transform: scaleY(0);
 	}

 	/* aperto */
 	1.5%,
 	2% {
 		transform: scaleY(1);
 	}

 	/* chiusura rapida */
 	60% {
 		transform: scaleY(1);
 	}

 	/* micro-blink extra */
 	61% {
 		transform: scaleY(0);
 	}
 }

 @media (max-width: 600px) {
 	.kb-controls {
 		display: none;
 	}
 }

 .contact-me {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	font-size: x-large;
 	margin-top: .75rem;
 	gap: 0.5rem;
 }

 .contact-me a {
 	color: var(--fg);
 }