/* Typography & layout */
html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	-webkit-text-size-adjust: 100%;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.5;
	color: #0b0f19;
}

/* Fluid type without media queries */
h1 {
	font-size: clamp(20px, 3.6vw, 28px);
	margin: 16px;
}

h2 {
	font-size: clamp(18px, 3.2vw, 24px);
	margin: 14px 16px;
}

p, li, button {
	font-size: clamp(14px, 2.8vw, 16px);
}

/* Content width on large screens, full-bleed on mobile */
.wrap, main, .container {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px;
}

/* Make injected cards/snippets responsive */
.ih-card {
	margin: 16px;
}

	.ih-card img, .ih-card video, .ih-card canvas {
		max-width: 100%;
		height: auto;
	}

/* Don’t let long code/IDs overflow */
pre, code {
	white-space: pre-wrap;
	word-break: break-word;
}

/* Touch targets */
button, a[role="button"] {
	min-height: 44px;
	padding: 10px 14px;
}

/* Glass style helpers (works on light & dark) */
.gb-glass {
	background: rgba(255,255,255,0.78);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,.30);
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	color: #0b0f19;
}

@media (prefers-color-scheme: dark) {
	.gb-glass {
		background: rgba(22,26,34,0.6);
		border-color: rgba(255,255,255,0.25);
		color: #e7eef7;
	}
}