:root {
	--bg-main: #f4f6ff;
	--bg-grad-a: #fff2d8;
	--bg-grad-b: #d8f4ff;
	--ink: #1b2130;
	--ink-soft: #4f5872;
	--brand: #0f62fe;
	--brand-2: #08a88a;
	--card: #ffffff;
	--stroke: #dfe5f2;
	--vscode-bg: #1e1e1e;
	--vscode-top: #2b2b2b;
	--vscode-ln: #858585;
	--vscode-text: #d4d4d4;
	--vscode-keyword: #569cd6;
	--vscode-string: #ce9178;
	--vscode-fn: #dcdcaa;
	--vscode-var: #9cdcfe;
	--vscode-const: #4fc1ff;
	--vscode-comment: #6a9955;
	--vscode-prop: #9cdcfe;
	--vscode-tag: #569cd6;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Figtree", "Segoe UI", sans-serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 12% 8%, var(--bg-grad-a) 0%, transparent 35%),
		radial-gradient(circle at 88% 14%, var(--bg-grad-b) 0%, transparent 32%),
		var(--bg-main);
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 50;
	background: #111827;
	color: #ffffff;
	padding: 0.65rem 0.95rem;
	border-radius: 0.5rem;
}

.skip-link:focus-visible {
	top: 1rem;
}

:where(a, button, summary):focus-visible {
	outline: 3px solid #ff5d24;
	outline-offset: 3px;
}

.glass {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(6px);
}

.section-title {
	letter-spacing: -0.02em;
}

.tree {
	font-family: "Cascadia Code", "Consolas", monospace;
}

.tree ul {
	margin-left: 1.2rem;
	border-left: 1px dashed #aeb8cf;
	padding-left: 1rem;
}

.tree li {
	margin: 0.35rem 0;
	position: relative;
}

.tree li::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 0.85rem;
	width: 0.65rem;
	border-top: 1px dashed #aeb8cf;
}

.vscode {
	border: 1px solid #343434;
	border-radius: 0.9rem;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(16, 24, 40, 0.2);
}

.vscode-topbar {
	background: var(--vscode-top);
	color: #d8d8d8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.45rem 0.75rem;
	font-size: 0.78rem;
}

.vscode-dots {
	display: flex;
	gap: 0.35rem;
}

.vscode-dot {
	width: 0.62rem;
	height: 0.62rem;
	border-radius: 50%;
}

.dot-red {
	background: #ff5f57;
}

.dot-yellow {
	background: #febc2e;
}

.dot-green {
	background: #28c840;
}

.vscode-code {
	background: var(--vscode-bg);
	color: var(--vscode-text);
	display: grid;
	grid-template-columns: auto 1fr;
	font-family: "Cascadia Code", "Consolas", monospace;
	font-size: 0.9rem;
	line-height: 1.6;
}

.vscode-lines {
	color: var(--vscode-ln);
	text-align: right;
	user-select: none;
	padding: 1rem 0.65rem 1rem 1rem;
	border-right: 1px solid #2f2f2f;
}

.vscode-lines > span,
.vscode-content > span {
	display: block;
}

.vscode-content {
	padding: 1rem;
	overflow-x: auto;
}

.k {
	color: var(--vscode-keyword);
}

.s {
	color: var(--vscode-string);
}

.f {
	color: var(--vscode-fn);
}

.v {
	color: var(--vscode-var);
}

.c {
	color: var(--vscode-comment);
}

.p {
	color: var(--vscode-prop);
}

.t {
	color: var(--vscode-tag);
}

.badge {
	border: 1px solid #d2def6;
	background: #eef4ff;
	color: #244391;
	font-weight: 600;
	font-size: 0.78rem;
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
}

.stagger {
	animation: riseIn 0.65s ease both;
}

.stagger:nth-child(2) {
	animation-delay: 0.08s;
}

.stagger:nth-child(3) {
	animation-delay: 0.16s;
}

.stagger:nth-child(4) {
	animation-delay: 0.24s;
}

@keyframes riseIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 640px) {
	.vscode-code {
		font-size: 0.8rem;
	}
}