.anat-app-frame {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(19rem, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"header header"
		"workspace context"
		"footer footer";
	width: min(100%, var(--anat-content-max));
	min-height: 100dvh;
	margin: 0 auto;
	background: var(--anat-bg-workspace);
	box-shadow: var(--anat-shadow-elevated);
}

.anat-app-header {
	position: sticky;
	top: 0;
	z-index: var(--anat-z-sticky);
	grid-area: header;
	border-bottom: 1px solid var(--anat-border-subtle);
	background: var(--anat-surface-app-bar);
	backdrop-filter: blur(1rem);
}

.anat-app-header__inner {
	display: grid;
	min-height: var(--anat-app-bar-height);
	grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
	align-items: center;
	gap: clamp(var(--anat-space-4), 3vw, var(--anat-space-7));
	padding: var(--anat-space-1) clamp(var(--anat-space-4), 2.2vw, var(--anat-space-6));
}

.anat-app-header .anat-marketing-brand {
	flex: 0 0 auto;
	justify-self: start;
}

.anat-app-header .anat-marketing-brand__mark {
	width: 2.5rem;
}

.anat-app-header .anat-marketing-brand__wordmark strong {
	font-size: 1rem;
}

.anat-app-header .anat-marketing-brand__wordmark span {
	margin-top: 0.3rem;
	font-size: 0.625rem;
}

.anat-app-header__navigation {
	min-width: 0;
	justify-self: center;
}

.anat-app-header__navigation .anat-navigation ul {
	display: flex;
	align-items: center;
	gap: clamp(0.15rem, 0.7vw, var(--anat-space-3));
}

.anat-app-header__navigation .anat-navigation__item {
	min-height: var(--anat-control-height);
	padding-inline: clamp(var(--anat-space-2), 0.9vw, var(--anat-space-4));
	white-space: nowrap;
}

.anat-app-header__navigation .anat-navigation__item.is-current {
	border-color: transparent;
	border-bottom-color: var(--anat-accent);
	border-radius: 0;
	background: transparent;
	color: var(--anat-text-primary);
}

.anat-mobile-navigation {
	display: none;
}

.anat-workspace {
	grid-area: workspace;
	min-width: 0;
	padding: clamp(1rem, 1.8vw, 1.75rem);
	background:
		radial-gradient(circle at 55% 35%, var(--anat-surface-workspace-glow), transparent 42%),
		var(--anat-bg-workspace);
}

.anat-workspace-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--anat-content-gap);
	margin-bottom: var(--anat-space-4);
}

.anat-workspace-header__copy {
	max-width: 46rem;
}

.anat-workspace-header h1 {
	margin-bottom: var(--anat-space-2);
	font-size: var(--anat-font-size-2xl);
}

.anat-workspace-header p:last-child {
	margin-bottom: 0;
	color: var(--anat-text-secondary);
}

.anat-workspace-actions {
	display: grid;
	gap: var(--anat-space-3);
	padding-top: var(--anat-space-5);
	border-top: 1px solid var(--anat-border-subtle);
}

.anat-workspace-actions__label {
	color: var(--anat-text-muted);
	font-size: var(--anat-font-size-xs);
	font-weight: var(--anat-weight-bold);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.anat-workspace-actions__buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--anat-space-2);
}

.anat-stage {
	display: grid;
	min-height: max(34rem, calc(100dvh - 12rem));
	grid-template-rows: auto minmax(0, 1fr);
	margin-top: var(--anat-space-5);
	overflow: hidden;
	border: 1px solid var(--anat-border-subtle);
	border-radius: var(--anat-radius-lg);
	background:
		linear-gradient(var(--anat-border-subtle) 1px, transparent 1px),
		linear-gradient(90deg, var(--anat-border-subtle) 1px, transparent 1px),
		linear-gradient(145deg, var(--anat-surface-stage-start), var(--anat-surface-stage-end));
	background-size: 4rem 4rem, 4rem 4rem, auto;
	box-shadow: var(--anat-shadow-stage-inset);
}

.anat-stage-heading,
.anat-stage-toolbar {
	display: flex;
	min-height: 4.5rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--anat-space-4);
	padding: var(--anat-space-4) var(--anat-space-5);
	border-bottom: 1px solid var(--anat-border-subtle);
	background: var(--anat-surface-toolbar);
	backdrop-filter: blur(0.75rem);
}

.anat-stage-heading__label,
.anat-stage-heading__hint,
.anat-stage-toolbar__label,
.anat-stage-toolbar__hint {
	display: block;
}

.anat-stage-heading__label,
.anat-stage-toolbar__label {
	color: var(--anat-text-primary);
	font-size: var(--anat-font-size-sm);
	font-weight: var(--anat-weight-bold);
}

.anat-stage-heading__hint,
.anat-stage-toolbar__hint {
	color: var(--anat-text-muted);
	font-size: var(--anat-font-size-xs);
}

.anat-stage-heading__state {
	padding: var(--anat-space-1) var(--anat-space-3);
	border: 1px solid var(--anat-border-subtle);
	border-radius: var(--anat-radius-pill);
	background: var(--anat-accent-surface);
	color: var(--anat-accent-hover);
	font-size: var(--anat-font-size-xs);
	font-weight: var(--anat-weight-bold);
}

.anat-stage-empty {
	display: flex;
	max-width: 36rem;
	align-items: center;
	align-self: center;
	justify-self: center;
	flex-direction: column;
	padding: var(--anat-space-7) var(--anat-space-5);
	text-align: center;
}

.anat-stage-empty h2 {
	margin-bottom: var(--anat-space-3);
	font-size: var(--anat-font-size-xl);
}

.anat-stage-empty > p:not(.anat-eyebrow) {
	margin-bottom: var(--anat-space-5);
	color: var(--anat-text-secondary);
}

.anat-stage-mark {
	width: 7.5rem;
	height: 7.5rem;
	margin-bottom: var(--anat-space-5);
	filter: drop-shadow(0 0 1.5rem var(--anat-accent-mark-shadow));
}

.anat-stage-mark circle,
.anat-stage-mark path {
	fill: none;
	stroke: var(--anat-accent);
	stroke-width: 2;
}

.anat-stage-mark path {
	fill: var(--anat-accent-mark-fill);
}

.anat-stage-mark .anat-stage-mark__node {
	fill: var(--anat-accent-hover);
	stroke: var(--anat-bg-app);
	stroke-width: 3;
}

.anat-context-panel {
	position: sticky;
	top: calc(var(--anat-app-bar-height) + var(--anat-space-4));
	grid-area: context;
	min-width: 0;
	align-self: start;
	margin: var(--anat-space-4) var(--anat-space-4) var(--anat-space-4) 0;
	padding: clamp(1.1rem, 1.6vw, 1.5rem);
	border: 1px solid var(--anat-border-subtle);
	border-radius: var(--anat-radius-lg);
	background: linear-gradient(180deg, var(--anat-surface-context-start), var(--anat-surface-context-end));
	box-shadow: var(--anat-shadow-elevated);
}

.anat-context-panel__header {
	padding-bottom: var(--anat-space-4);
}

.anat-context-panel__header h2 {
	margin-bottom: var(--anat-space-2);
	font-size: var(--anat-font-size-xl);
	overflow-wrap: anywhere;
}

.anat-context-panel__header p:last-child {
	margin-bottom: 0;
	color: var(--anat-text-secondary);
	font-size: var(--anat-font-size-sm);
}

.anat-context-panel__terms {
	display: grid;
	gap: var(--anat-space-1);
	color: var(--anat-text-secondary);
	font-size: var(--anat-font-size-sm);
}

.anat-context-panel__terms [lang="la"] {
	color: var(--anat-accent-hover);
	font-style: italic;
}

.anat-app-footer {
	display: flex;
	grid-area: footer;
	justify-content: flex-start;
	gap: var(--anat-space-4);
	padding: var(--anat-space-3) clamp(var(--anat-space-4), 3vw, var(--anat-space-7));
	border-top: 1px solid var(--anat-border-subtle);
	background: var(--anat-bg-app);
	color: var(--anat-text-muted);
	font-size: var(--anat-font-size-xs);
}

@media (max-width: 73.75rem) and (min-width: 64rem) {
	.anat-app-frame {
		grid-template-columns: minmax(0, 3fr) minmax(18rem, 1fr);
	}

	.anat-workspace {
		padding-inline: var(--anat-space-5);
	}

	.anat-workspace-header {
		gap: var(--anat-space-4);
	}

}

@media (max-width: 63.9375rem) {
	.anat-app-frame {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"header"
			"workspace"
			"context"
			"footer";
	}

	.anat-context-panel {
		position: static;
		margin: 0 var(--anat-space-5) var(--anat-space-5);
	}

	.anat-workspace-actions__buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 63.9375rem) {
	.anat-app-header__navigation {
		display: none;
	}

	.anat-mobile-navigation {
		position: relative;
		display: block;
		grid-column: 3;
		justify-self: end;
	}

	.anat-menu-trigger {
		display: inline-flex;
		min-height: var(--anat-control-height);
		align-items: center;
		gap: var(--anat-space-2);
		padding: var(--anat-space-2) var(--anat-space-3);
		border: 1px solid var(--anat-border-strong);
		border-radius: var(--anat-radius-md);
		background: var(--anat-surface-interactive);
		color: var(--anat-text-primary);
		font-size: var(--anat-font-size-sm);
		font-weight: var(--anat-weight-bold);
		cursor: pointer;
		list-style: none;
	}

	.anat-menu-trigger::-webkit-details-marker {
		display: none;
	}

	.anat-menu-trigger__lines,
	.anat-menu-trigger__lines::before,
	.anat-menu-trigger__lines::after {
		display: block;
		width: 1.1rem;
		height: 0.125rem;
		background: currentcolor;
		content: "";
	}

	.anat-menu-trigger__lines {
		position: relative;
	}

	.anat-menu-trigger__lines::before {
		position: absolute;
		top: -0.35rem;
	}

	.anat-menu-trigger__lines::after {
		position: absolute;
		top: 0.35rem;
	}

	.anat-mobile-navigation__drawer {
		position: absolute;
		top: calc(100% + var(--anat-space-2));
		right: 0;
		width: min(22rem, calc(100vw - (2 * var(--anat-space-4))));
		padding: var(--anat-space-4);
		border: 1px solid var(--anat-border-strong);
		border-radius: var(--anat-radius-lg);
		background: var(--anat-bg-elevated);
		box-shadow: var(--anat-shadow-drawer);
	}
}

@media (max-width: 55.9375rem) {
	.anat-app-header__inner {
		gap: var(--anat-space-4);
	}

	.anat-app-header .anat-marketing-brand__mark {
		width: 2.25rem;
	}
}

@media (max-width: 47.9375rem) {
	.anat-app-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-inline: var(--anat-space-4);
	}

	.anat-mobile-navigation {
		grid-column: 2;
	}

	.anat-app-header .anat-marketing-brand__mark {
		width: 1.9rem;
	}

	.anat-app-header .anat-marketing-brand__wordmark strong {
		font-size: var(--anat-font-size-sm);
	}

	.anat-app-header .anat-marketing-brand__wordmark span {
		font-size: 0.5625rem;
		letter-spacing: 0.24em;
	}

	.anat-workspace {
		padding: var(--anat-space-4);
	}

	.anat-context-panel {
		margin: 0 var(--anat-space-4) var(--anat-space-4);
		padding: var(--anat-space-4);
	}

	.anat-workspace-header {
		flex-direction: column;
	}

	.anat-workspace-actions__buttons {
		width: 100%;
	}

	.anat-workspace-actions__buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.anat-stage {
		min-height: 28rem;
		background-size: 3rem 3rem, 3rem 3rem, auto;
	}

	.anat-stage-heading,
	.anat-stage-toolbar {
		padding: var(--anat-space-3) var(--anat-space-4);
	}

	.anat-stage-heading__hint,
	.anat-stage-toolbar__hint {
		max-width: 14rem;
	}

	.anat-stage-empty {
		padding: var(--anat-space-6) var(--anat-space-4);
	}

	.anat-stage-mark {
		width: 6rem;
		height: 6rem;
	}

	.anat-app-footer {
		flex-direction: column;
		gap: var(--anat-space-1);
	}
}

@media (max-width: 29.9375rem) {
	.anat-app-header .anat-marketing-brand__wordmark span {
		display: none;
	}

	.anat-workspace-actions__buttons {
		grid-template-columns: 1fr;
	}

	.anat-button {
		width: 100%;
	}

	.anat-stage-heading__state {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}