* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual;
	font-variant-numeric: oldstyle-nums tabular-nums;
	hyphens: auto;
	font-kerning: normal;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

:root {
	--ghost-pixel: #f7eae8;
	--phosphor-smoke: #efd5d1;
	--phantom-current: #e7c0ba;
	--corrupted-cache: #dfaba3;
	--copper-trace: #d7968c;
	--fatal-error: #cf8175;
	--rouge-signal: #c76c5e;
	--amber-alert: #bf5747;
	--firewall-breach: #b74230;
	--digital-rust: #af2e1a;
	--kernel-panic: #9d2917;
	--data-rot: #8c2414;
	--bricked-board: #7a2012;
	--dark-packet: #691b0f;
	--daemon-blood: #57170d;
	--bad-sector: #46120a;
	--core-meltdown: #340d07;
	--null-pointer: #230905;
	--event-horizon: #110402;

	--memory-leek: #8fa667;
	--dim-memory-leek: #627247;
	--bright-memory-leek: #94a577;
	--stack-overglow: #d4a759;
	--dim-stack-overglow: #a07e43;
	--bright-stack-overglow: #d3ae6e;
	--blue-screen: #8791b0;
	--dim-blue-screen: #60677c;
	--bright-blue-screen: #999eaf;
	--fractured-shell: #ba5a7d;
	--dim-fractured-shell: #87405a;
	--bright-fractured-shell: #ba6b88;
	--dead-thread: #6fa5a0;
	--dim-dead-thread: #4c726e;
	--bright-dead-thread: #7fa5a1;
	--thermal-throttle: #d78556;
	--dim-thermal-throttle: #a36541;
	--bright-thermal-throttle: #d6926b;
}

body {
	background: linear-gradient(135deg,
			var(--event-horizon) 0%,
			var(--null-pointer) 50%,
			var(--core-meltdown) 100%);
	color: var(--ghost-pixel);
	font-family: "iA Writer Quattro", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 100vh;
	padding: 2rem;
	position: relative;
	overflow-x: hidden;
	line-height: 1.6;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(175, 46, 26, 0.03) 2px,
			rgba(175, 46, 26, 0.03) 4px);
	pointer-events: none;
	z-index: 1;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

header {
	margin-bottom: 3rem;
	border-bottom: 2px solid var(--digital-rust);
	padding-bottom: 2rem;
}

.lead {
	color: var(--phosphor-smoke);
	margin-top: 1rem;
	max-width: 60ch;
}

h1 {
	font-size: 3.5rem;
	color: var(--fatal-error);
	text-shadow: 0 0 20px rgba(175, 46, 26, 0.5), 0 0 40px rgba(175, 46, 26, 0.3);
	margin-bottom: 0.5rem;
	font-weight: bold;
	letter-spacing: 0.15em;
	display: inline-block;
}

.version-badge {
	display: inline-block;
	background: var(--digital-rust);
	color: var(--ghost-pixel);
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 0.9rem;
	margin-left: 1rem;
	font-weight: bold;
	vertical-align: middle;
}

.subtitle {
	color: var(--copper-trace);
	font-size: 1.3rem;
	margin-bottom: 1rem;
	opacity: 0.95;
}

.tagline {
	color: var(--fatal-error);
	font-size: 1rem;
	font-style: italic;
	opacity: 0.8;
}

.terminal {
	background: var(--event-horizon);
	border: 2px solid var(--dark-packet);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 0 30px rgba(175, 46, 26, 0.3),
		inset 0 0 30px rgba(17, 4, 2, 0.5);
	position: relative;
	overflow: hidden;
}

.terminal::before {
	content: "● ● ●";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.5rem 1rem;
	background: var(--core-meltdown);
	color: var(--digital-rust);
	border-bottom: 1px solid var(--bad-sector);
	font-size: 0.8rem;
	letter-spacing: 0.5rem;
}

.terminal-content {
	margin-top: 2rem;
	font-family: "MonoLisa", "MonoLisa Variable", ui-monospace, "Fira Code",
		"Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
		monospace;
	font-size: 0.95rem;
	line-height: 1.6;
}

.prompt {
	color: var(--fatal-error);
	user-select: none;
}

.command {
	color: var(--ghost-pixel);
}

.output {
	color: var(--phosphor-smoke);
	margin-left: 2rem;
	opacity: 0.95;
}

.terminal-line {
	margin-bottom: 0.5rem;
	animation: typeIn 0.5s ease-out;
}

.status-pass {
	color: var(--memory-leek);
	font-weight: bold;
}

@keyframes typeIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.section-title {
	color: var(--fatal-error);
	font-size: 1.5rem;
	margin: 2rem 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-left: 4px solid var(--digital-rust);
	padding-left: 1rem;
}

.section-copy {
	color: var(--phosphor-smoke);
	margin-bottom: 1rem;
	max-width: 70ch;
}

.spec-section {
	margin-top: 2rem;
}

.spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

.spec-card {
	background: var(--event-horizon);
	border: 1px solid var(--dark-packet);
	border-radius: 8px;
	padding: 1.25rem;
	box-shadow: inset 0 0 20px rgba(17, 4, 2, 0.4);
}

.spec-card h3 {
	color: var(--fatal-error);
	margin-bottom: 0.75rem;
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.spec-card ul {
	list-style: none;
	padding-left: 0;
	color: var(--ghost-pixel);
	line-height: 1.5;
	font-size: 0.95rem;
}

.spec-card li {
	margin-bottom: 0.35rem;
}

.token-map {
	margin-top: 3rem;
}

.token-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.token-card {
	background: var(--event-horizon);
	border: 1px solid var(--bad-sector);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.token-card header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--copper-trace);
	gap: 0.5rem;
}

.token-swatch {
	background: var(--event-horizon);
	border: 1px solid var(--dark-packet);
	border-radius: 4px;
	padding: 0.2rem 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	color: var(--ghost-pixel);
	position: relative;
}

.token-swatch::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 2px;
	background: var(--swatch);
	opacity: 0.35;
	z-index: -1;
}

.token-card p {
	color: var(--phosphor-smoke);
	font-size: 0.9rem;
}

.token-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85rem;
}

.error-inline {
	color: var(--amber-alert);
	text-decoration: underline wavy var(--amber-alert);
}

.warning-inline {
	color: var(--stack-overglow);
	text-decoration: underline wavy var(--stack-overglow);
}

.code-showcase {
	margin-top: 3rem;
}

.markdown-code {
	line-height: 1.5;
}

.md-marker {
	color: var(--copper-trace);
}

.md-heading {
	color: var(--fatal-error);
	font-weight: 700;
	text-transform: uppercase;
}

.md-list {
	color: var(--copper-trace);
}

.md-link {
	color: var(--phantom-current);
	text-decoration: underline;
}

.md-url {
	color: var(--dim-stack-overglow);
}

.md-quote {
	color: var(--phosphor-smoke);
	font-style: italic;
}

.md-code {
	color: var(--memory-leek);
	background: var(--bad-sector);
	padding: 0 0.2rem;
	border-radius: 3px;
}

.md-bold {
	color: var(--ghost-pixel);
	font-weight: 700;
}

.json-key {
	color: var(--dead-thread);
}

.diff-meta {
	color: var(--blue-screen);
}

.diff-add {
	color: var(--ghost-pixel);
	background: rgba(143, 166, 103, 0.15);
}

.diff-remove {
	color: var(--phantom-current);
	background: rgba(191, 87, 71, 0.15);
}

.diff-context {
	color: var(--ghost-pixel);
}

.prompt {
	color: var(--phantom-current);
}

.shell-command {
	color: var(--stack-overglow);
}

.shell-flag {
	color: var(--fatal-error);
}

.shell-variable {
	color: var(--ghost-pixel);
}

.ansi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

.ansi-chip {
	border: 1px solid rgba(17, 4, 2, 0.4);
	border-radius: 6px;
	padding: 0.75rem;
	background: var(--chip-bg, var(--event-horizon));
	color: var(--chip-fg, var(--ghost-pixel));
	position: relative;
	box-shadow: inset 0 0 12px rgba(17, 4, 2, 0.25);
}

.ansi-chip::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	border: 1px solid rgba(247, 234, 232, 0.2);
	pointer-events: none;
}

.ansi-label {
	color: var(--chip-fg, var(--copper-trace));
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ansi-name {
	display: block;
	font-weight: bold;
}

.ansi-hex {
	color: var(--chip-fg, var(--phosphor-smoke));
	font-size: 0.8rem;
}

.ui-lab {
	margin-top: 3rem;
}

.ui-grid.advanced {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mini-editor {
	background: var(--null-pointer);
	border: 1px solid var(--dark-packet);
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(17, 4, 2, 0.4);
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	gap: 0.5rem;
}

.editor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--bad-sector);
	padding-bottom: 0.25rem;
}

.tabs {
	display: flex;
	gap: 0.5rem;
}

.tab {
	padding: 0.25rem 0.6rem;
	border-radius: 4px 4px 0 0;
	background: var(--event-horizon);
	color: var(--phosphor-smoke);
	font-size: 0.8rem;
}

.tab.active {
	background: var(--core-meltdown);
	color: var(--ghost-pixel);
	border-bottom: 2px solid var(--digital-rust);
}

.tab-indicator {
	color: var(--stack-overglow);
	font-size: 0.75rem;
}

.editor-body {
	display: flex;
	background: var(--event-horizon);
	border: 1px solid var(--dark-packet);
	border-radius: 6px;
}

.gutter {
	background: var(--null-pointer);
	padding: 0.5rem;
	border-right: 1px solid var(--bad-sector);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.line-number {
	color: var(--bad-sector);
	font-size: 0.8rem;
}

.line-number.active {
	color: var(--phantom-current);
}

.code-lines {
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.code-line {
	font-family: "MonoLisa", "MonoLisa Variable", ui-monospace, "Fira Code",
		"Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
		monospace;
}

.status-bar {
	display: flex;
	gap: 0.75rem;
	font-size: 0.75rem;
	background: var(--bricked-board);
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
}

.status-item {
	color: var(--ghost-pixel);
}

.status-item.warning {
	color: var(--stack-overglow);
}

.status-item.success {
	color: var(--memory-leek);
}

.panel.demo-panel {
	background: var(--event-horizon);
	border: 1px solid var(--dark-packet);
	border-radius: 8px;
	padding: 1rem;
	box-shadow: inset 0 0 25px rgba(17, 4, 2, 0.4);
}

.panel h3 {
	margin-top: 0;
	color: var(--stack-overglow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.9rem;
}

.diff-legend {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.badge {
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.badge.add {
	background: rgba(143, 166, 103, 0.2);
	color: var(--memory-leek);
}

.badge.mod {
	background: rgba(111, 165, 160, 0.2);
	color: var(--dead-thread);
}

.badge.del {
	background: rgba(191, 87, 71, 0.2);
	color: var(--amber-alert);
}

.badge.info {
	background: rgba(231, 192, 186, 0.2);
	color: var(--phantom-current);
}

.diff-block {
	border: 1px solid var(--bad-sector);
	border-radius: 6px;
	overflow: hidden;
}

.diff-line {
	padding: 0.35rem 0.5rem;
	font-size: 0.85rem;
}

.diff-line.add {
	background: rgba(143, 166, 103, 0.15);
	color: var(--ghost-pixel);
}

.diff-line.mod {
	background: rgba(111, 165, 160, 0.15);
	color: var(--dead-thread);
}

.diff-line.del {
	background: rgba(191, 87, 71, 0.15);
	color: var(--phantom-current);
}

.diagnostic-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0.75rem;
}

.diagnostic {
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
}

.diagnostic.error {
	color: var(--amber-alert);
	text-decoration: underline wavy var(--amber-alert);
}

.diagnostic.warning {
	color: var(--stack-overglow);
	text-decoration: underline wavy var(--stack-overglow);
}

.diagnostic.info {
	color: var(--dead-thread);
}

.hint-row {
	display: flex;
	gap: 0.5rem;
}

.hint {
	font-size: 0.75rem;
	color: rgba(239, 213, 209, 0.7);
	background: rgba(70, 18, 10, 0.5);
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	font-style: italic;
}

.accessibility-panel {
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px solid var(--dark-packet);
	border-radius: 8px;
	background: var(--event-horizon);
	box-shadow: inset 0 0 30px rgba(17, 4, 2, 0.4);
}

.access-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

.contrast-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.contrast-table th,
.contrast-table td {
	border: 1px solid var(--bad-sector);
	padding: 0.5rem;
	text-align: left;
}

.contrast-table th {
	background: var(--core-meltdown);
}

.cue-list {
	list-style: none;
	padding: 0;
	line-height: 1.6;
}

.license-note {
	margin-top: 0.5rem;
	font-style: italic;
	opacity: 0.8;
}

.code-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.code-block {
	background: var(--event-horizon);
	border: 1px solid var(--core-meltdown);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.code-block-header {
	background: var(--core-meltdown);
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--bad-sector);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.code-block-title {
	color: var(--amber-alert);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.code-block-lang {
	color: var(--fatal-error);
	font-size: 0.8rem;
	background: var(--event-horizon);
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
}

.code {
	padding: 1.5rem;
	font-family: "MonoLisa", "MonoLisa Variable", ui-monospace, "Fira Code",
		"Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
		monospace;
	font-size: 0.9rem;
	line-height: 1.6;
	overflow-x: auto;
}

.keyword {
	color: var(--fatal-error);
	font-weight: bold;
}

.function {
	color: var(--stack-overglow);
}

.class-name {
	color: var(--dead-thread);
}

.string {
	color: var(--memory-leek);
}

.number {
	color: var(--thermal-throttle);
}

.comment {
	color: var(--dim-thermal-throttle);
	font-style: italic;
}

.variable {
	color: var(--ghost-pixel);
}

.operator {
	color: var(--copper-trace);
}

.punctuation {
	color: var(--copper-trace);
}

.special {
	color: var(--copper-trace);
}

.support {
	color: var(--dim-stack-overglow);
}

.decorator {
	color: var(--dead-thread);
	font-style: italic;
}

.literal {
	color: var(--bright-stack-overglow);
}

.constant {
	color: var(--bright-stack-overglow);
}

.parameter {
	color: var(--ghost-pixel);
}

.type {
	color: var(--dead-thread);
}

.pseudo {
	color: var(--dim-stack-overglow);
}

.selector {
	color: var(--ghost-pixel);
}

.css-class {
	color: var(--dead-thread);
}

.at-rule {
	color: var(--fatal-error);
}

.error {
	color: var(--amber-alert);
	text-decoration: wavy underline;
}

.palette-section {
	background: var(--event-horizon);
	border: 1px solid var(--daemon-blood);
	border-radius: 8px;
	padding: 1.5rem;
	margin: 2rem 0;
}

.palette-header {
	color: var(--amber-alert);
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.75rem;
}

.color-chip {
	height: 80px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: bold;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
}

.color-chip:hover {
	transform: scale(1.05);
	z-index: 10;
	box-shadow: 0 0 30px rgba(175, 46, 26, 0.5);
	border-color: var(--fatal-error);
}

.color-name {
	padding: 2px 6px;
	border-radius: 2px;
	text-align: center;
}

.color-hex {
	font-size: 0.65rem;
	opacity: 0.8;
	margin-top: 2px;
	font-family: "MonoLisa", "MonoLisa Variable", ui-monospace, "Fira Code",
		"Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
		monospace;
}

.ui-demo {
	background: var(--event-horizon);
	border: 1px solid var(--daemon-blood);
	border-radius: 8px;
	padding: 1.5rem;
	margin: 2rem 0;
}

.ui-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 1.5rem;
}

.btn {
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--copper-trace);
	background: transparent;
	color: var(--phantom-current);
	font-family: "MonoLisa", "MonoLisa Variable", ui-monospace, "Fira Code",
		"Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
		monospace;
	font-size: 0.9rem;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.25rem;
}

.btn:hover {
	background: var(--bad-sector);
	color: var(--ghost-pixel);
	box-shadow: 0 0 20px rgba(207, 129, 117, 0.5);
}

.btn-primary {
	background: var(--digital-rust);
	border-color: var(--digital-rust);
	color: var(--ghost-pixel);
}

.btn-primary:hover {
	background: var(--amber-alert);
	border-color: var(--amber-alert);
}

.btn-success {
	border-color: var(--memory-leek);
	color: var(--memory-leek);
}

.btn-success:hover {
	background: var(--memory-leek);
	color: var(--event-horizon);
}

.btn-warning {
	border-color: var(--stack-overglow);
	color: var(--stack-overglow);
}

.btn-warning:hover {
	background: var(--stack-overglow);
	color: var(--event-horizon);
}

.btn-error {
	border-color: var(--amber-alert);
	color: var(--amber-alert);
}

.btn-error:hover {
	background: var(--amber-alert);
	color: var(--event-horizon);
}

a {
	color: var(--phantom-current);
	text-decoration: underline;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--fatal-error);
	text-decoration: underline;
}

a:visited {
	color: var(--corrupted-cache);
}

a:active {
	color: var(--digital-rust);
}

.status {
	padding: 1rem;
	border-radius: 4px;
	margin: 0.5rem 0;
	border-left: 4px solid;
}

.status-success {
	background: rgba(143, 166, 103, 0.1);
	border-color: var(--memory-leek);
	color: var(--memory-leek);
}

.status-warning {
	background: rgba(212, 167, 89, 0.1);
	border-color: var(--stack-overglow);
	color: var(--stack-overglow);
}

.status-error {
	background: rgba(191, 87, 71, 0.1);
	border-color: var(--amber-alert);
	color: var(--amber-alert);
}

.status-info {
	background: rgba(111, 165, 160, 0.1);
	border-color: var(--dead-thread);
	color: var(--dead-thread);
}

.cursor {
	display: inline-block;
	width: 10px;
	height: 20px;
	background: var(--stack-overglow);
	vertical-align: text-bottom;
}

@keyframes blink {

	0%,
	50% {
		opacity: 1;
	}

	51%,
	100% {
		opacity: 0;
	}
}

.code,
.code-line,
pre,
code {
	hyphens: none;
}

@keyframes glitch {
	0% {
		text-shadow: 0 0 24px rgba(175, 46, 26, 0.7), -1px -1px var(--digital-rust),
			1px 1px var(--dead-thread);
		transform: translate3d(0, 0, 0);
		filter: hue-rotate(0deg) saturate(130%);
		clip-path: inset(0 0 0 0);
	}

	4% {
		text-shadow: 4px -2px var(--fractured-shell), -4px 2px var(--dead-thread),
			0 0 32px rgba(175, 46, 26, 0.8);
		transform: translate3d(-2px, 1px, 0) skewX(1deg);
		filter: hue-rotate(-6deg) saturate(160%);
		clip-path: inset(12% 0 28% 0);
	}

	9% {
		text-shadow: -6px 0 var(--memory-leek), 6px 0 var(--thermal-throttle),
			0 0 18px rgba(175, 46, 26, 0.6);
		transform: translate3d(2px, -3px, 0) skewY(-1.5deg);
		filter: hue-rotate(12deg) saturate(140%);
		clip-path: inset(0 0 8% 0);
	}

	15% {
		text-shadow: -2px 2px var(--digital-rust), 3px -3px var(--dead-thread),
			-1px -1px var(--fractured-shell);
		transform: translate3d(-1px, 2px, 0) scale(1.01);
		filter: hue-rotate(-18deg) saturate(180%);
		clip-path: inset(32% 0 6% 0);
	}

	24% {
		text-shadow: 8px 2px var(--amber-alert), -8px -2px var(--dead-thread);
		transform: translate3d(3px, -2px, 0) skewX(-1.2deg);
		filter: hue-rotate(25deg) saturate(150%);
		clip-path: inset(6% 0 40% 0);
	}

	38% {
		text-shadow: -3px 0 var(--fractured-shell), 3px 0 rgba(143, 166, 103, 0.6),
			0 0 26px rgba(175, 46, 26, 0.9);
		transform: translate3d(-4px, 1px, 0) skewY(2deg);
		filter: hue-rotate(-32deg) saturate(170%);
		clip-path: inset(18% 0 20% 0);
	}

	52% {
		text-shadow: 10px -3px var(--dead-thread), -10px 3px var(--thermal-throttle),
			0 0 16px rgba(175, 46, 26, 0.4);
		transform: translate3d(5px, -4px, 0) skewX(2deg) skewY(-1deg);
		filter: hue-rotate(38deg) saturate(150%);
		clip-path: inset(0 0 0 0);
	}

	67% {
		text-shadow: -5px -1px rgba(207, 129, 117, 0.9),
			5px 1px rgba(111, 165, 160, 0.9);
		transform: translate3d(-3px, 4px, 0) scale(1.015);
		filter: hue-rotate(-48deg) saturate(175%) contrast(115%);
		clip-path: inset(14% 0 14% 0);
	}

	82% {
		text-shadow: 12px 0 rgba(175, 46, 26, 0.9), -12px 0 rgba(143, 166, 103, 0.7),
			0 0 40px rgba(175, 46, 26, 0.9);
		transform: translate3d(6px, -2px, 0) skewX(-2deg) skewY(2deg);
		filter: hue-rotate(54deg) saturate(210%);
		clip-path: inset(48% 0 4% 0);
	}

	100% {
		text-shadow: 0 0 24px rgba(175, 46, 26, 0.75), -1px 1px var(--digital-rust),
			1px -1px var(--dead-thread);
		transform: translate3d(0, 0, 0);
		filter: hue-rotate(0deg) saturate(130%);
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	h1:hover {
		animation: glitch 0.9s steps(2, end) infinite alternate;
	}

	h1 {
		will-change: transform, filter, text-shadow, clip-path;
	}

	.cursor {
		animation: blink 1s infinite;
	}
}

footer {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bad-sector);
	text-align: center;
	color: var(--copper-trace);
	font-size: 0.9rem;
}

.preview-section {
	margin-top: 3rem;
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.preview-img {
	width: auto;
	height: 200px;
	border-radius: 8px;
	border: 1px solid var(--dark-packet);
	box-shadow: 0 0 20px rgba(17, 4, 2, 0.4);
	transition: transform 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
	background: var(--event-horizon);
}

.preview-img:hover {
	transform: scale(1.02);
	border-color: var(--digital-rust);
	box-shadow: 0 0 30px rgba(175, 46, 26, 0.3);
}

.lite-light {
	align-items: center;
	background: rgba(17, 4, 2, 0.95);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	backdrop-filter: blur(4px);

	&.lite-light-active {
		display: flex;
	}

	.lite-light-prev {
		left: 10px;
		position: absolute;
	}

	.lite-light-next {
		position: absolute;
		right: 10px;
	}

	img {
		background-color: var(--event-horizon);
		border: 1px solid var(--digital-rust);
		box-shadow: 0 0 40px rgba(175, 46, 26, 0.4);
		padding: 0;
	}
}

.lite-light-arrow {
	border: solid var(--digital-rust);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 10px;
	transform: scale(1);
	transition: all 0.3s ease;

	&:hover {
		cursor: pointer;
		transform: scale(1.1);
		border-color: var(--amber-alert);
		filter: drop-shadow(0 0 10px var(--digital-rust));
	}

	&.lite-light-right {
		-webkit-transform: rotate(-45deg);
		margin-right: 10px;
		transform: scale(1) rotate(-45deg);

		&:hover {
			transform: scale(1.05) rotate(-45deg);
		}
	}

	&.lite-light-left {
		-webkit-transform: rotate(135deg);
		margin-left: 10px;
		transform: scale(1) rotate(135deg);

		&:hover {
			transform: scale(1.05) rotate(135deg);
		}
	}
}

.lite-light-close {
	&.lite-light-button {
		background: none;
		border: none;
		color: var(--digital-rust);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		height: 21.5px;
		justify-content: space-between;
		position: absolute;
		right: 15px;
		top: 15px;
		transform: scale(1);
		transition: all 0.3s ease;
		width: 22px;

		&:hover {
			transform: scale(1.1);

			.lite-light-bar {
				background-color: var(--amber-alert);
				box-shadow: 0 0 10px var(--digital-rust);
			}
		}
	}

	.lite-light-bar {
		background-color: var(--digital-rust);
		display: block;
		height: 2px;
		transition: all 100ms ease-in-out;
		width: 100%;

		&:nth-of-type(1) {
			transform: rotate(45deg);
			transform-origin: top left;
			transition: all 100ms ease-in-out;
			width: 30px;
		}

		&:nth-of-type(2) {
			transform: rotate(-45deg);
			transform-origin: bottom left;
			transition: all 100ms ease-in-out;
			width: 30px;
		}
	}
}

@keyframes lite-light-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes lite-light-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.lite-light-fade-in {
	animation: lite-light-fade-in 0.15s ease-in-out forwards;
}

.lite-light-fade-out {
	animation: lite-light-fade-out 0.15s ease-in-out forwards;
}

@media (max-width: 768px) {
	.lite-light {

		.lite-light-prev,
		.lite-light-next {
			display: none;
		}

		img {
			max-height: 80vh;
			max-width: 90%;
			padding: 5px;
		}

		.lite-light-close {
			font-size: 2rem;
			right: 25px;
			top: 25px;
		}
	}

	.lite-light-close.lite-light-button {
		height: 21.5px;
	}
}

@supports (-webkit-touch-callout: none) {
	.lite-light img {
		-webkit-transform: translateZ(0);
		backface-visibility: hidden;
		transform: translateZ(0);
	}
}