:root {
	--bg: #0F1419;
	--surface: #141B22;
	--surface-alt: #1A222B;
	--text: #DDE7EA;
	--text-muted: #8FA0A8;
	--border: rgba(255, 255, 255, 0.08);
	--green: #2EC4B6;
	--green-hover: #35D8C8;
	--white: #fff;
}

/* Demo page */
.am-demo {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 720px;
	margin: 60px auto;
	padding: 0 20px;
	line-height: 1.6666;
	color: var(--text);
	background: var(--bg);
}

.am-demo h1 { 
	font-family: 'Space Grotesk', sans-serif; 
	font-size: 28px; 
	color: var(--white); 
}

.am-demo .demo-actions { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 12px; 
	margin: 24px 0 40px; 
}

.am-demo button.demo-trigger {
	font: inherit;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--green);
	background: var(--green);
	color: var(--bg);
	cursor: pointer;
}

.am-demo button.demo-trigger:hover { 
	background: var(--green-hover); 
	border-color: var(--green-hover); 
}

.am-demo code { 
	background: var(--surface); 
	color: var(--green); 
	padding: 2px 6px; 
	border-radius: 4px;
}

.am-demo pre {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 14px 16px;
	overflow-x: auto;
	white-space: pre-wrap;
}

.am-demo pre code {
	background: none;
	color: inherit;
	padding: 0;
}

/* Modal component */

[data-modal],
[data-modal] *,
[data-modal] *::before,
[data-modal] *::after {
	box-sizing: border-box;
}

[data-modal] {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 18, 26, 0.6);
}

[data-modal][hidden] {
	display: none;
}

.accessible-modal-box {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #0F1419;
	border-radius: 8px;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.accessible-modal-box label { 
	display: block; 
	margin: 14px 0 6px; 
	font-weight: 600; 
}

.accessible-modal-box input,
.accessible-modal-box textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font: inherit;
	background: var(--surface-alt);
	color: var(--text);
}

.accessible-modal-box .form-actions { 
	margin-top: 20px; 
	display: flex; 
	gap: 10px; 
}

.accessible-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: var(--white);
	background: transparent;
	font-size: 20px;
	cursor: pointer;
}

.accessible-modal-close:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
}

[data-modal] :focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	[data-modal] {
		animation: accessible-modal-fade 0.15s ease-out;
	}

	.accessible-modal-box {
		animation: accessible-modal-scale 0.15s ease-out;
	}
}

@keyframes accessible-modal-fade {
	from { 
		opacity: 0; 
	}
	to { 
		opacity: 1; 
	}
}

@keyframes accessible-modal-scale {
	from { 
		transform: scale(0.96); 
		opacity: 0; 
	}
	to { 
		transform: scale(1); 
		opacity: 1; 
	}
}