.app-shell {
	width: min(1760px, calc(100% - 16px));
	margin: 0 auto;
	padding: 20px 0 32px;
}

.site-header {
	padding: 8px 0 20px;
}

.site-main {
	display: grid;
	gap: 16px;
}

.section-grid,
.tool-layout {
	display: grid;
	gap: 16px;
}

.section-grid {
	grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
}

.tool-shell {
	display: grid;
	gap: 16px;
}

.tool-layout {
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.tool-layout-json {
	grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.site-nav {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	background: rgba(248, 251, 255, 0.76);
	backdrop-filter: blur(12px);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.45),
		0 10px 30px rgba(28, 52, 37, 0.04);
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(22, 37, 29, 0.24);
	backdrop-filter: blur(4px);
	z-index: 40;
}

.site-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: min(320px, calc(100% - 32px));
	height: 100dvh;
	padding: 16px;
	display: grid;
	align-content: start;
	gap: 18px;
	background:
		linear-gradient(180deg, rgba(247, 251, 247, 0.98), rgba(236, 244, 238, 0.98));
	box-shadow:
		inset -1px 0 0 rgba(255, 255, 255, 0.45),
		20px 0 40px rgba(22, 37, 29, 0.12);
	transform: translateX(calc(-100% - 12px));
	transition: transform 180ms ease;
	z-index: 50;
}

.site-drawer.is-open {
	transform: translateX(0);
}

.drawer-head,
.drawer-section,
.drawer-links {
	display: grid;
	gap: 12px;
}

.drawer-head {
	grid-template-columns: 1fr auto;
	align-items: start;
}

@media (max-width: 860px) {
	.app-shell {
		width: min(100% - 12px, 1760px);
		padding-top: 12px;
	}

	.hero,
	.section-grid,
	.tool-layout,
	.tool-layout-json {
		grid-template-columns: 1fr;
	}

	.site-nav,
	.section-head,
	.panel-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.nav-left {
		width: 100%;
		flex-wrap: wrap;
	}
}