.works-page.svelte-z5h6ha {
		--font-display:
			'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
		--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 2rem;
		--space-2xl: 3rem;
		--space-3xl: 4rem;
		--space-4xl: 6rem;

		--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	}

	.works-page.svelte-z5h6ha {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 100vh;
		background: rgb(255, 255, 255);
	}

	.dark .works-page.svelte-z5h6ha {
		background: rgb(9, 9, 11);
	}

	.page-container.svelte-z5h6ha {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 32rem;
		padding: 0 var(--space-xl);
	}

	/* Badge */
	.page-badge.svelte-z5h6ha {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		padding: 0.5rem 1rem;
		background: rgb(244, 244, 245);
		border-radius: 999px;
		margin-bottom: var(--space-xl);
	}

	.dark .page-badge.svelte-z5h6ha {
		background: rgb(39, 39, 42);
	}

	.badge-dot.svelte-z5h6ha {
		width: 6px;
		height: 6px;
		background: rgb(14, 165, 233);
		border-radius: 50%;
		animation: svelte-z5h6ha-pulse 2s infinite;
	}

	@keyframes svelte-z5h6ha-pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
	}

	.badge-text.svelte-z5h6ha {
		font-family: var(--font-body);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: rgb(63, 63, 70);
	}

	.dark .badge-text.svelte-z5h6ha {
		color: rgb(161, 161, 170);
	}

	/* Title */
	.page-title.svelte-z5h6ha {
		font-family: var(--font-display);
		font-size: clamp(3.5rem, 10vw, 6rem);
		font-weight: 900;
		letter-spacing: -0.04em;
		line-height: 0.9;
		text-transform: uppercase;
		color: rgb(9, 9, 11);
		margin: 0 0 var(--space-lg);
	}

	.dark .page-title.svelte-z5h6ha {
		color: rgb(250, 250, 250);
	}

	/* Description */
	.page-description.svelte-z5h6ha {
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.7;
		color: rgb(113, 113, 122);
		max-width: 32ch;
		margin: 0 0 var(--space-2xl);
	}

	.dark .page-description.svelte-z5h6ha {
		color: rgb(161, 161, 170);
	}

	/* Status Card */
	.status-card.svelte-z5h6ha {
		display: flex;
		align-items: center;
		gap: var(--space-lg);
		padding: var(--space-lg) var(--space-xl);
		background: rgb(250, 250, 250);
		border: 1px solid rgba(0, 0, 0, 0.06);
		border-radius: 1rem;
		margin-bottom: var(--space-2xl);
	}

	.dark .status-card.svelte-z5h6ha {
		background: rgb(24, 24, 27);
		border-color: rgba(255, 255, 255, 0.06);
	}

	.status-icon.svelte-z5h6ha {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		background: rgb(255, 255, 255);
		border-radius: 50%;
	}

	.dark .status-icon.svelte-z5h6ha {
		background: rgb(39, 39, 42);
	}

	.status-icon.svelte-z5h6ha svg:where(.svelte-z5h6ha) {
		width: 1.25rem;
		height: 1.25rem;
		color: rgb(113, 113, 122);
	}

	.status-content.svelte-z5h6ha {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}

	.status-label.svelte-z5h6ha {
		font-family: var(--font-display);
		font-size: 0.875rem;
		font-weight: 700;
		color: rgb(24, 24, 27);
	}

	.dark .status-label.svelte-z5h6ha {
		color: rgb(250, 250, 250);
	}

	.status-text.svelte-z5h6ha {
		font-family: var(--font-body);
		font-size: 0.75rem;
		color: rgb(113, 113, 122);
	}

	.dark .status-text.svelte-z5h6ha {
		color: rgb(161, 161, 170);
	}

	/* Quick Links */
	.quick-links.svelte-z5h6ha {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-md);
	}

	.link-pill.svelte-z5h6ha {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		padding: 0.625rem 1.25rem;
		background: rgb(244, 244, 245);
		border-radius: 999px;
		font-family: var(--font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		color: rgb(63, 63, 70);
		text-decoration: none;
		transition: all 200ms var(--ease-out-expo);
	}

	.dark .link-pill.svelte-z5h6ha {
		background: rgb(39, 39, 42);
		color: rgb(161, 161, 170);
	}

	.link-pill.svelte-z5h6ha:hover {
		background: rgb(24, 24, 27);
		color: rgb(255, 255, 255);
	}

	.dark .link-pill.svelte-z5h6ha:hover {
		background: rgb(250, 250, 250);
		color: rgb(24, 24, 27);
	}

	.link-pill.svelte-z5h6ha svg:where(.svelte-z5h6ha) {
		width: 0.875rem;
		height: 0.875rem;
		opacity: 0;
		transform: translateX(-4px);
		transition: all 200ms ease;
	}

	.link-pill.svelte-z5h6ha:hover svg:where(.svelte-z5h6ha) {
		opacity: 1;
		transform: translateX(0);
	}