:root {
	--color-ink: #151718;
	--color-muted: #5f676d;
	--color-line: #d9dee2;
	--color-surface: #ffffff;
	--color-soft: #f4f6f7;
	--color-accent: #127c70;
	--color-accent-strong: #0c5f56;
	--color-warm: #f4b24d;
	--shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
	--wrap: min(1120px, calc(100vw - 32px));
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--color-ink);
	background: var(--color-soft);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: 0;
}

a {
	color: var(--color-accent-strong);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

img,
iframe,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 1000;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	background: var(--color-ink);
	color: #fff;
	border-radius: 6px;
}

.wrap {
	width: var(--wrap);
	margin-inline: auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--color-line);
	backdrop-filter: blur(12px);
}

.site-header__inner,
.site-footer__inner {
	width: var(--wrap);
	margin-inline: auto;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}

.site-title {
	margin: 0;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
}

.site-title a {
	color: var(--color-ink);
	text-decoration: none;
}

.site-description {
	margin: 3px 0 0;
	color: var(--color-muted);
	font-size: 0.86rem;
}

.menu,
.footer-menu {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu a,
.footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 10px;
	color: var(--color-ink);
	text-decoration: none;
	border-radius: 6px;
}

.menu a:hover,
.menu a:focus,
.footer-menu a:hover,
.footer-menu a:focus {
	background: var(--color-soft);
	color: var(--color-accent-strong);
}

.page-hero {
	background:
		linear-gradient(120deg, rgba(18, 124, 112, 0.88), rgba(21, 23, 24, 0.92)),
		url("../img/workbench.jpg");
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 86px 0 58px;
}

.page-hero.compact {
	padding: 58px 0 42px;
}

.hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
	gap: 36px;
	align-items: end;
}

.eyebrow {
	margin: 0 0 10px;
	color: currentColor;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
	opacity: 0.78;
}

h1,
h2,
h3 {
	line-height: 1.12;
	letter-spacing: 0;
}

h1 {
	max-width: 820px;
	margin: 0;
	font-size: clamp(2.3rem, 6vw, 5rem);
}

h2 {
	margin: 0 0 12px;
	font-size: 1.35rem;
}

.hero-copy {
	max-width: 720px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.08rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.button,
button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 16px;
	color: #fff;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: 6px;
	font-weight: 750;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--color-accent-strong);
	border-color: var(--color-accent-strong);
}

.button.secondary {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
}

.hero-meter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.hero-meter span {
	display: grid;
	place-items: center;
	min-height: 84px;
	padding: 12px;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 8px;
	font-weight: 800;
}

.lab-grid,
.content-grid,
.test-panel {
	margin-top: 34px;
	margin-bottom: 34px;
}

.lab-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.lab-card,
.entry-card,
.widget,
.test-panel,
.entry-content {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.lab-card,
.entry-card,
.widget,
.test-panel {
	padding: 22px;
}

.lab-card p,
.entry-card p,
.widget p {
	margin-bottom: 0;
	color: var(--color-muted);
}

.content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.content-stack {
	display: grid;
	gap: 18px;
}

.entry-content {
	padding: clamp(22px, 4vw, 42px);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-meta {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.plugin-sidebar {
	display: grid;
	gap: 16px;
}

.search-form {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 560px;
}

.search-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	color: var(--color-ink);
	background: #fff;
	border: 1px solid #b8c0c7;
	border-radius: 6px;
}

textarea {
	min-height: 126px;
}

.test-panel {
	width: var(--wrap);
	margin-inline: auto;
}

.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
}

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

.plugin-status-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--color-line);
}

.plugin-status-list strong {
	display: inline-flex;
	min-width: 72px;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 0.78rem;
}

.plugin-status-list .is-active {
	color: #063d35;
	background: #cef3ec;
}

.plugin-status-list .is-inactive {
	color: #60410a;
	background: #ffe7b8;
}

.site-footer {
	margin-top: 54px;
	padding: 32px 0;
	color: #dfe7e6;
	background: #151718;
}

.site-footer a {
	color: #fff;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 22px;
}

.site-footer__credit {
	margin: 18px 0 0;
	color: #aab5b4;
}

.navigation.pagination {
	margin-top: 18px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	text-decoration: none;
}

.page-numbers.current {
	color: #fff;
	background: var(--color-accent);
	border-color: var(--color-accent);
}

@media (max-width: 840px) {
	.site-header__inner,
	.hero-layout,
	.content-grid,
	.lab-grid {
		grid-template-columns: 1fr;
	}

	.site-header__inner {
		display: grid;
		padding: 14px 0;
	}

	.menu,
	.footer-menu {
		flex-wrap: wrap;
	}

	.content-grid {
		gap: 18px;
	}

	.hero-meter,
	.footer-widgets {
		grid-template-columns: 1fr;
	}

	h1 {
		font-size: clamp(2.1rem, 12vw, 3.4rem);
	}
}

@media (max-width: 520px) {
	.search-form,
	.hero-actions {
		display: grid;
	}

	.button,
	button,
	input[type="submit"] {
		width: 100%;
	}
}