* {
	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;
}


/* ────────────────────────────────────────────
   Base
   ──────────────────────────────────────────── */

body {
	background: var(--dr-surface-base);
	color: var(--dr-text-primary);
	font-family: var(--dr-font-body);
	font-weight: 500;
	min-height: 100vh;
	padding: var(--dr-space-xl);
	position: relative;
	overflow-x: hidden;
	line-height: 1.6;
}

/* ── Atmospheric noise texture (non-negotiable) ── */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity: 0.02;
	pointer-events: none;
	z-index: var(--dr-z-noise);
}

/* ── Scanline overlay (non-negotiable) ── */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			var(--dr-scanline) 2px,
			var(--dr-scanline) 4px);
	pointer-events: none;
	z-index: calc(var(--dr-z-noise) - 1);
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: var(--dr-z-content);
}

/* ────────────────────────────────────────────
   Typography
   ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ────────────────────────────────────────────
   Header
   ──────────────────────────────────────────── */

header {
	margin-bottom: var(--dr-space-2xl);
	border-bottom: var(--dr-border-thick);
	padding-bottom: var(--dr-space-xl);
	position: relative;
}

header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		transparent 60%,
		rgba(17, 4, 2, 0.4) 100%
	);
	pointer-events: none;
	z-index: 0;
}

h1 {
	font-family: var(--dr-font-heading);
	font-size: clamp(2rem, 5vw, var(--dr-text-3xl));
	color: var(--fatal-error);
	text-shadow: 0 0 24px rgba(175, 46, 26, 0.7), -1px 1px var(--digital-rust),
		1px -1px var(--dead-thread);
	margin-bottom: var(--dr-space-sm);
	font-weight: 700;
	letter-spacing: 0.15em;
	display: inline-block;
	position: relative;
	z-index: 2;
}

.version-badge {
	display: inline-block;
	background: var(--digital-rust);
	color: var(--dr-text-on-accent);
	padding: var(--dr-space-xs) var(--dr-space-md);
	border-radius: var(--dr-radius);
	font-size: var(--dr-text-sm);
	margin-left: var(--dr-space-md);
	font-weight: 700;
	vertical-align: middle;
	border: var(--dr-border);
	box-shadow: var(--dr-shadow-offset-sm);
	position: relative;
	z-index: 2;
}

.subtitle {
	color: var(--copper-trace);
	font-size: var(--dr-text-lg);
	margin-bottom: var(--dr-space-md);
	font-family: var(--dr-font-heading);
	letter-spacing: 0.05em;
	position: relative;
	z-index: 2;
}

.tagline {
	color: var(--fatal-error);
	font-size: var(--dr-text-base);
	font-style: italic;
	opacity: 0.8;
	position: relative;
	z-index: 2;
}

.lead-links {
	color: var(--dr-text-secondary);
	margin-top: var(--dr-space-md);
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-space-sm) var(--dr-space-xl);
	line-height: 2;
}

.link-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dr-space-xs) var(--dr-space-sm);
}

.link-group-label {
	font-family: var(--dr-font-heading);
	font-size: var(--dr-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fatal-error);
	margin-right: var(--dr-space-xs);
}

.link-group-label::after {
	content: "»";
	margin-left: var(--dr-space-xs);
	color: var(--digital-rust);
}

.link-group ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-space-xs) var(--dr-space-sm);
	list-style: none;
	padding: 0;
	margin: 0;
}

.link-group li {
	display: inline;
}

.link-group li::after {
	content: "·";
	margin-left: var(--dr-space-sm);
	color: var(--dr-text-secondary);
	opacity: 0.5;
}

.link-group li:last-child::after {
	content: none;
}

/* ────────────────────────────────────────────
   Terminal
   ──────────────────────────────────────────── */

.terminal {
	background: var(--dr-surface-base);
	border: var(--dr-border);
	border-radius: var(--dr-radius-lg);
	padding: var(--dr-space-lg);
	margin-bottom: var(--dr-space-xl);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	position: relative;
	overflow: hidden;
}

.terminal::before {
	content: "● ● ●";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: var(--dr-space-sm) var(--dr-space-md);
	background: var(--dr-surface-elevated);
	color: var(--digital-rust);
	border-bottom: var(--dr-border-subtle);
	font-size: var(--dr-text-xs);
	letter-spacing: 0.5rem;
}

.terminal-content {
	margin-top: 2rem;
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-sm);
	line-height: 1.6;
}

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

.command {
	color: var(--dr-text-primary);
}

.output {
	color: var(--dr-text-secondary);
	margin-left: 2rem;
	opacity: 0.95;
}

.terminal-line {
	margin-bottom: var(--dr-space-sm);
}

@media (prefers-reduced-motion: no-preference) {
	.terminal-line {
		animation: typeIn var(--dr-duration-slow) var(--dr-ease-out-expo);
	}
}

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

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

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

/* ────────────────────────────────────────────
   Section titles (bracket notation)
   ──────────────────────────────────────────── */

.section-title {
	color: var(--fatal-error);
	font-size: var(--dr-text-xl);
	margin: var(--dr-space-2xl) 0 var(--dr-space-lg);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-left: var(--dr-border-thick);
	border-left-color: var(--digital-rust);
	padding-left: var(--dr-space-md);
	font-family: var(--dr-font-heading);
	font-weight: 700;
}

.section-copy {
	color: var(--dr-text-secondary);
	margin-bottom: var(--dr-space-md);
	max-width: 70ch;
}

/* ────────────────────────────────────────────
   Spec cards
   ──────────────────────────────────────────── */

.spec-section {
	margin-top: var(--dr-space-xl);
}

.spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--dr-space-lg);
}

.spec-card {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-lg);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.spec-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md);
}

.spec-card h3 {
	color: var(--fatal-error);
	margin-bottom: var(--dr-space-sm);
	font-size: var(--dr-text-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: var(--dr-font-heading);
}

.spec-card ul {
	list-style: none;
	padding-left: 0;
	color: var(--dr-text-primary);
	line-height: 1.5;
	font-size: var(--dr-text-sm);
}

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

/* ────────────────────────────────────────────
   Token map
   ──────────────────────────────────────────── */

.token-map {
	margin-top: var(--dr-space-2xl);
}

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

.token-card {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--dr-space-sm);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.token-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md);
}

.token-card header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: var(--dr-text-xs);
	color: var(--copper-trace);
	gap: var(--dr-space-sm);
	border: none;
	margin: 0;
	padding: 0;
}

.token-card header > span:first-child {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.token-swatch {
	background: var(--dr-surface-base);
	border: var(--dr-border-subtle);
	border-radius: var(--dr-radius-sm);
	padding: 0.2rem 0.4rem;
	font-size: var(--dr-text-xs);
	color: var(--dr-text-primary);
	position: relative;
}

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

.token-card p {
	color: var(--dr-text-secondary);
	font-size: var(--dr-text-sm);
}

.token-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--dr-text-sm);
}

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

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

/* ────────────────────────────────────────────
   Code showcase
   ──────────────────────────────────────────── */

.code-showcase {
	margin-top: var(--dr-space-2xl);
}

.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(--dr-text-secondary);
	font-style: italic;
}

.md-code {
	color: var(--memory-leek);
	background: var(--dr-surface-highlight);
	padding: 0 0.2rem;
	border-radius: var(--dr-radius-sm);
}

.md-bold {
	color: var(--dr-text-primary);
	font-weight: 700;
}

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

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

.diff-add {
	color: var(--dr-text-primary);
	background: var(--memory-leek-15);
}

.diff-remove {
	color: var(--phantom-current);
	background: var(--amber-alert-15);
}

.diff-context {
	color: var(--dr-text-primary);
}

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

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

.shell-variable {
	color: var(--dr-text-primary);
}

.code-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--dr-space-lg);
	margin-bottom: var(--dr-space-xl);
}

.code-block {
	background: var(--dr-surface-base);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	overflow: hidden;
	position: relative;
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	transition: border-color var(--dr-transition-normal);
}

.code-block:hover {
	border-color: var(--daemon-blood);
}

.code-block-header {
	background: var(--dr-surface-elevated);
	padding: var(--dr-space-sm) var(--dr-space-md);
	border-bottom: var(--dr-border-subtle);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.code-block-title {
	color: var(--fatal-error);
	font-size: var(--dr-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var(--dr-font-heading);
	font-weight: 700;
}

.code-block-lang {
	color: var(--fatal-error);
	font-size: var(--dr-text-xs);
	background: var(--dr-surface-base);
	padding: 0.2rem 0.5rem;
	border-radius: var(--dr-radius-sm);
	border: var(--dr-border-subtle);
}

.code {
	padding: var(--dr-space-lg);
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-sm);
	line-height: 1.6;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bad-sector) transparent;
}

.code:hover {
	scrollbar-color: var(--dark-packet) transparent;
}

/* ── Syntax tokens ── */

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

.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(--dr-text-primary);
}

.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(--dr-text-primary);
}

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

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

.selector {
	color: var(--dr-text-primary);
}

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

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

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

/* ────────────────────────────────────────────
   Palette sections
   ──────────────────────────────────────────── */

.palette-section {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-lg);
	margin: var(--dr-space-xl) 0;
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.palette-header {
	color: var(--fatal-error);
	margin-bottom: var(--dr-space-lg);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: var(--dr-font-heading);
	font-weight: 700;
}

.color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--dr-space-sm);
}

.color-chip {
	height: 80px;
	border-radius: var(--dr-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: var(--dr-text-xs);
	font-weight: 700;
	background: var(--chip-bg, var(--dr-surface-base));
	color: var(--chip-fg, var(--dr-text-primary));
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		border-color var(--dr-transition-fast);
	position: relative;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: default;
}

.color-chip:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md);
	border-color: var(--dr-surface-highlight);
}

.color-chip:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

.color-name {
	padding: 2px 6px;
	border-radius: var(--dr-radius-sm);
	text-align: center;
}

.color-hex {
	font-size: 0.65rem;
	opacity: 0.8;
	margin-top: 2px;
	font-family: var(--dr-font-mono);
}

/* ── ANSI grid ── */

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

.ansi-chip {
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-sm);
	background: var(--chip-bg, var(--dr-surface-base));
	color: var(--chip-fg, var(--dr-text-primary));
	position: relative;
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.ansi-chip:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md);
}

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

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

.ansi-hex {
	color: var(--chip-fg, var(--dr-text-secondary));
	font-size: var(--dr-text-xs);
	font-family: var(--dr-font-mono);
}

/* ────────────────────────────────────────────
   UI Lab
   ──────────────────────────────────────────── */

.ui-lab {
	margin-top: var(--dr-space-2xl);
}

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

.mini-editor {
	background: var(--dr-surface-secondary);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	display: flex;
	flex-direction: column;
	gap: var(--dr-space-sm);
	padding: var(--dr-space-sm);
}

.editor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: var(--dr-border-subtle);
	padding-bottom: var(--dr-space-xs);
}

.tabs {
	display: flex;
	gap: var(--dr-space-sm);
}

.tab {
	padding: var(--dr-space-xs) var(--dr-space-sm);
	border-radius: 0;
	background: var(--dr-surface-base);
	color: var(--dr-text-secondary);
	font-size: var(--dr-text-xs);
}

.tab.active {
	background: var(--dr-surface-elevated);
	color: var(--dr-text-primary);
	border-bottom: 2px solid var(--digital-rust);
}

.tab-indicator {
	color: var(--stack-overglow);
	font-size: var(--dr-text-xs);
}

.editor-body {
	display: flex;
	background: var(--dr-surface-base);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
}

.gutter {
	background: var(--dr-surface-secondary);
	padding: var(--dr-space-sm);
	border-right: var(--dr-border-subtle);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.line-number {
	color: var(--dr-surface-highlight);
	font-size: var(--dr-text-xs);
}

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

.code-lines {
	padding: var(--dr-space-sm) var(--dr-space-md);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.code-line {
	font-family: var(--dr-font-mono);
}

.status-bar {
	display: flex;
	gap: var(--dr-space-sm);
	font-size: var(--dr-text-xs);
	background: var(--dr-surface-secondary);
	padding: var(--dr-space-xs) var(--dr-space-sm);
	border-radius: var(--dr-radius-sm);
}

.status-item {
	color: var(--dr-text-primary);
}

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

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

.panel.demo-panel {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-md);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
}

.panel h3 {
	margin-top: 0;
	color: var(--stack-overglow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--dr-text-sm);
	font-family: var(--dr-font-heading);
	font-weight: 700;
}

.diff-legend {
	display: flex;
	gap: var(--dr-space-sm);
	flex-wrap: wrap;
	margin-bottom: var(--dr-space-sm);
}

.badge {
	border-radius: var(--dr-radius);
	padding: 0.2rem 0.6rem;
	font-size: var(--dr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	border: 1px solid;
}

.badge.add {
	background: var(--memory-leek-15);
	color: var(--memory-leek);
	border-color: var(--memory-leek-30);
}

.badge.mod {
	background: var(--dead-thread-15);
	color: var(--dead-thread);
	border-color: var(--dead-thread-30);
}

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

.badge.info {
	background: var(--phantom-current-15);
	color: var(--phantom-current);
	border-color: var(--phantom-current-30);
}

.badge.warning {
	background: var(--stack-overglow-15);
	color: var(--stack-overglow);
	border-color: var(--stack-overglow-30);
}

.diff-block {
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	overflow: hidden;
}

.diff-line {
	padding: 0.35rem var(--dr-space-sm);
	font-size: var(--dr-text-sm);
}

.diff-line.add {
	background: var(--memory-leek-15);
	color: var(--dr-text-primary);
}

.diff-line.mod {
	background: var(--dead-thread-15);
	color: var(--dr-text-primary);
}

.diff-line.del {
	background: var(--amber-alert-15);
	color: var(--phantom-current);
}

.diagnostic-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--dr-space-sm);
}

.diagnostic {
	margin-bottom: 0.4rem;
	font-size: var(--dr-text-sm);
}

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

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

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

.hint-row {
	display: flex;
	gap: var(--dr-space-sm);
}

.hint {
	font-size: var(--dr-text-xs);
	color: var(--phosphor-smoke-70);
	background: var(--dr-surface-highlight);
	padding: var(--dr-space-xs) var(--dr-space-sm);
	border-radius: var(--dr-radius-sm);
	font-style: italic;
}

/* ────────────────────────────────────────────
   Accessibility panel
   ──────────────────────────────────────────── */

.accessibility-panel {
	margin-top: var(--dr-space-2xl);
	padding: var(--dr-space-lg);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	background: var(--dr-surface-elevated);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.accessibility-panel .section-title {
	margin-top: 0;
}

.access-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--dr-space-lg);
}

.contrast-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--dr-text-sm);
}

.contrast-table th,
.contrast-table td {
	border: var(--dr-border-subtle);
	padding: var(--dr-space-sm);
	text-align: left;
}

.contrast-table th {
	background: var(--dr-surface-elevated);
	font-family: var(--dr-font-heading);
	font-weight: 700;
}

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

.license-note {
	margin-top: var(--dr-space-sm);
	font-style: italic;
	color: var(--copper-trace);
}

.license-note a {
	color: var(--phantom-current);
}

/* ────────────────────────────────────────────
   Preview section
   ──────────────────────────────────────────── */

.preview-section {
	margin-top: var(--dr-space-2xl);
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--dr-space-lg);
}

.preview-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: var(--dr-radius);
	border: var(--dr-border);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		border-color var(--dr-transition-fast);
	cursor: pointer;
	background: var(--dr-surface-base);
}

.preview-img:hover {
	transform: translate(-2px, -2px);
	border-color: var(--digital-rust);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm);
}

.preview-img:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

/* ────────────────────────────────────────────
   Buttons (unused on main page but kept aligned)
   ──────────────────────────────────────────── */

.btn {
	display: inline-block;
	padding: var(--dr-space-sm) var(--dr-space-lg);
	border: 2px solid var(--dark-packet);
	background: transparent;
	color: var(--dr-text-secondary);
	font-family: var(--dr-font-heading);
	font-weight: 600;
	font-size: var(--dr-text-sm);
	border-radius: var(--dr-radius);
	cursor: pointer;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		background-color var(--dr-transition-fast),
		border-color var(--dr-transition-fast),
		color var(--dr-transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.25rem;
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	text-decoration: none;
}

.btn:hover {
	background: var(--dr-surface-elevated);
	border-color: var(--digital-rust);
	color: var(--dr-text-primary);
	transform: var(--dr-press-hover);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-inner-highlight);
}

.btn:active {
	transform: var(--dr-press-active);
	box-shadow: var(--dr-shadow-active);
}

.btn:focus-visible {
	outline: var(--dr-focus-ring);
	outline-offset: var(--dr-focus-ring-offset);
}

.btn-primary {
	background: var(--digital-rust);
	border-color: var(--digital-rust);
	color: var(--dr-text-on-accent);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.btn-primary:hover {
	background: var(--firewall-breach);
	border-color: var(--firewall-breach);
	color: var(--dr-text-on-accent);
	transform: var(--dr-press-hover);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm),
		var(--dr-shadow-inner-highlight);
}

.btn-primary:active {
	transform: var(--dr-press-active);
	box-shadow: var(--dr-shadow-active);
}

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

.btn-success:hover {
	background: var(--memory-leek);
	border-color: var(--memory-leek);
	color: var(--dr-surface-base);
}

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

.btn-warning:hover {
	background: var(--stack-overglow);
	border-color: var(--stack-overglow);
	color: var(--dr-surface-base);
}

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

.btn-error:hover {
	background: var(--firewall-breach);
	border-color: var(--firewall-breach);
	color: var(--ghost-pixel);
}

.btn:disabled,
.btn[disabled] {
	background: var(--dr-surface-highlight);
	border-color: var(--dr-surface-highlight);
	color: var(--dr-text-muted, rgba(239, 213, 209, 0.5));
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	opacity: 0.7;
}

/* ────────────────────────────────────────────
   Links
   ──────────────────────────────────────────── */

a {
	color: var(--dr-text-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--dr-transition-fast),
		text-decoration-thickness var(--dr-transition-fast);
}

a:hover {
	color: var(--dr-text-link-hover);
	text-decoration-thickness: 2px;
}

a:visited {
	color: var(--dr-text-link-visited);
}

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

/* ────────────────────────────────────────────
   Status messages
   ──────────────────────────────────────────── */

.status {
	padding: var(--dr-space-md);
	border-radius: var(--dr-radius);
	margin: var(--dr-space-sm) 0;
	border: var(--dr-border);
	background: var(--dr-surface-elevated);
}

.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-text);
}

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

/* ────────────────────────────────────────────
   Cursor & blinking
   ──────────────────────────────────────────── */

.cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.2em;
	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;
}

/* ────────────────────────────────────────────
   Glitch animation (title)
   ──────────────────────────────────────────── */

@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;
		will-change: transform, text-shadow;
	}

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

/* ────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────── */

footer {
	margin-top: var(--dr-space-3xl);
	padding-top: var(--dr-space-xl);
	border-top: var(--dr-border);
	text-align: center;
	color: var(--copper-trace);
	font-size: var(--dr-text-sm);
}

.footer-tagline {
	margin-top: var(--dr-space-md);
	color: var(--fatal-error);
	font-family: var(--dr-font-heading);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ────────────────────────────────────────────
   UI demo / grid (unused on main page)
   ──────────────────────────────────────────── */

.ui-demo {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-lg);
	margin: var(--dr-space-xl) 0;
}

.ui-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--dr-space-xl);
	margin-top: var(--dr-space-lg);
}

/* ────────────────────────────────────────────
/* ────────────────────────────────────────────
   Lightbox (native <dialog>)
   ──────────────────────────────────────────── */

.lightbox {
	background: var(--event-horizon-95);
	border: none;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}

.lightbox::backdrop {
	background: var(--event-horizon-95);
}

.lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.lightbox-img {
	max-width: 85vw;
	max-height: 85vh;
	object-fit: contain;
	background-color: var(--dr-surface-base);
	border: var(--dr-border);
	box-shadow: var(--dr-shadow-offset-lg),
		var(--dr-shadow-glow-md);
}

.lightbox-close,
.lightbox-nav {
	position: fixed;
	font-family: var(--dr-font-heading);
	font-size: var(--dr-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: var(--dr-border);
	background: var(--dr-surface-elevated);
	color: var(--dr-text-primary);
	cursor: pointer;
	box-shadow: var(--dr-shadow-offset-sm);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		background var(--dr-transition-fast);
	z-index: 1001;
}

.lightbox-close:hover,
.lightbox-nav:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md);
	background: var(--dr-surface-highlight);
}

.lightbox-close:active,
.lightbox-nav:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

.lightbox-close {
	top: 1rem;
	right: 1rem;
	padding: var(--dr-space-sm) var(--dr-space-md);
	border-radius: var(--dr-radius);
}

.lightbox-prev {
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	padding: var(--dr-space-md) var(--dr-space-sm);
	border-radius: var(--dr-radius);
}

.lightbox-prev:hover {
	transform: translate(-2px, calc(-50% - 2px));
}

.lightbox-prev:active {
	transform: translate(0, -50%);
}

.lightbox-next {
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	padding: var(--dr-space-md) var(--dr-space-sm);
	border-radius: var(--dr-radius);
}

.lightbox-next:hover {
	transform: translate(2px, calc(-50% - 2px));
}

.lightbox-next:active {
	transform: translate(4px, -50%);
}

@media (max-width: 768px) {
	.lightbox {
		padding: 0;
	}

	.lightbox-img {
		max-height: 80vh;
		max-width: 90vw;
		padding: 0;
	}

	.lightbox-prev,
	.lightbox-next {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lightbox {
		animation: none;
	}
}

/* ────────────────────────────────────────────
   UI Components (Digital Rust UI Specification)
   ──────────────────────────────────────────── */

/* ── Component demo layout ── */
.ui-components-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--dr-space-lg);
	margin-top: var(--dr-space-lg);
}

.component-panel {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-lg);
}

.component-panel > h3 {
	color: var(--fatal-error);
	font-size: var(--dr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--dr-space-md);
	border-bottom: var(--dr-border-subtle);
	padding-bottom: var(--dr-space-sm);
}

.component-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dr-space-sm);
	margin-bottom: var(--dr-space-md);
}

.component-row:last-child {
	margin-bottom: 0;
}

.component-note {
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-xs);
	color: var(--dr-text-secondary);
	margin-top: var(--dr-space-sm);
}

/* ── Inputs (recessed wells) ── */
.dr-input,
.dr-textarea {
	background: var(--dr-surface-base);
	border: 2px solid var(--dr-surface-highlight);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-sm) 0.75rem;
	color: var(--dr-text-primary);
	font-family: var(--dr-font-body);
	font-size: var(--dr-text-base);
	font-weight: 500;
	width: 100%;
	transition: border-color var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.dr-input:hover:not(:focus),
.dr-textarea:hover:not(:focus) {
	border-color: var(--dark-packet);
}

.dr-input:focus,
.dr-textarea:focus {
	outline: var(--dr-focus-ring);
	outline-offset: var(--dr-focus-ring-offset);
	border-color: var(--digital-rust);
}

.dr-input::placeholder,
.dr-textarea::placeholder {
	color: rgba(239, 213, 209, 0.5);
	font-style: italic;
}

.dr-input:disabled,
.dr-textarea:disabled {
	border-color: transparent;
	color: rgba(239, 213, 209, 0.5);
	cursor: not-allowed;
}

.dr-input[aria-invalid="true"] {
	border-color: var(--amber-alert);
}

.dr-textarea {
	min-height: 96px;
	resize: vertical;
}

.dr-field {
	margin-bottom: var(--dr-space-md);
}

.dr-field > label {
	display: block;
	font-family: var(--dr-font-heading);
	font-size: var(--dr-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dr-text-secondary);
	margin-bottom: var(--dr-space-xs);
}

.dr-field .field-error {
	font-size: var(--dr-text-xs);
	color: var(--amber-alert-text);
	margin-top: var(--dr-space-xs);
}

/* ── Checkbox ── */
.dr-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--dr-space-sm);
	cursor: pointer;
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
	user-select: none;
}

.dr-checkbox input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 2px solid var(--dark-packet);
	border-radius: var(--dr-radius-sm);
	background: var(--dr-surface-base);
	box-shadow: var(--dr-shadow-offset-sm);
	cursor: pointer;
	position: relative;
	margin: 0;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		background-color var(--dr-transition-fast),
		border-color var(--dr-transition-fast);
}

.dr-checkbox input:hover {
	border-color: var(--digital-rust);
	transform: var(--dr-press-hover);
	box-shadow: var(--dr-shadow-hover-md);
}

.dr-checkbox input:active {
	transform: var(--dr-press-active);
	box-shadow: var(--dr-shadow-active);
}

.dr-checkbox input:focus-visible {
	outline: var(--dr-focus-ring);
	outline-offset: var(--dr-focus-ring-offset);
}

.dr-checkbox input:checked {
	background: var(--digital-rust);
	border-color: var(--digital-rust);
}

.dr-checkbox input:checked::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--dr-text-on-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.dr-checkbox input:disabled {
	border-color: var(--dr-surface-highlight);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ── Toggle ── */
.dr-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dr-space-sm);
	cursor: pointer;
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
	user-select: none;
}

.dr-toggle input {
	appearance: none;
	-webkit-appearance: none;
	width: 40px;
	height: 22px;
	flex: 0 0 40px;
	background: var(--dr-surface-highlight);
	border: 2px solid var(--dark-packet);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-sm);
	cursor: pointer;
	position: relative;
	margin: 0;
	transition: background-color var(--dr-transition-fast),
		border-color var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.dr-toggle input::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 14px;
	height: 14px;
	background: var(--ghost-pixel);
	border-radius: var(--dr-radius-sm);
	box-shadow: 1px 1px 0 0 var(--dr-surface-highlight),
		var(--dr-shadow-inner-lowlight);
	transition: transform var(--dr-transition-fast);
}

.dr-toggle input:checked {
	background: var(--digital-rust);
	border-color: var(--digital-rust);
}

.dr-toggle input:checked::after {
	transform: translateX(18px);
}

.dr-toggle input:hover {
	border-color: var(--digital-rust);
}

.dr-toggle input:focus-visible {
	outline: var(--dr-focus-ring);
	outline-offset: var(--dr-focus-ring-offset);
}

/* ── Slider ── */
.dr-slider {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	background: var(--dr-surface-base);
	border: 1px solid var(--dr-surface-highlight);
	border-radius: var(--dr-radius-sm);
	cursor: pointer;
}

.dr-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: var(--ghost-pixel);
	border: 2px solid var(--dark-packet);
	border-radius: var(--dr-radius-sm);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-lowlight);
	cursor: pointer;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.dr-slider::-webkit-slider-thumb:hover {
	transform: var(--dr-press-hover);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-inner-lowlight);
}

.dr-slider::-webkit-slider-thumb:active {
	transform: var(--dr-press-active);
	box-shadow: var(--dr-shadow-active);
}

.dr-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: var(--ghost-pixel);
	border: 2px solid var(--dark-packet);
	border-radius: var(--dr-radius-sm);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-lowlight);
	cursor: pointer;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.dr-slider::-moz-range-progress {
	background: var(--digital-rust);
	height: 4px;
}

.dr-slider:focus-visible {
	outline: var(--dr-focus-ring);
	outline-offset: 4px;
}

/* ── Tabs ── */
.dr-tabs {
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	background: var(--dr-surface-secondary);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	overflow: hidden;
}

.dr-tab-bar {
	display: flex;
	background: var(--dr-surface-elevated);
	border-bottom: var(--dr-border);
}

.dr-tab {
	padding: var(--dr-space-sm) var(--dr-space-md);
	font-family: var(--dr-font-heading);
	font-size: var(--dr-text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--dr-text-secondary);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color var(--dr-transition-fast),
		background-color var(--dr-transition-fast);
}

.dr-tab:hover {
	color: var(--dr-text-primary);
	background: var(--dr-surface-highlight);
}

.dr-tab[aria-selected="true"],
.dr-tab.active {
	background: var(--dr-surface-secondary);
	color: var(--dr-text-primary);
	border-bottom-color: var(--digital-rust);
}

.dr-tab-body {
	padding: var(--dr-space-md);
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
}

/* ── Menu ── */
.dr-menu {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-xs);
	list-style: none;
	max-width: 260px;
}

.dr-menu li {
	padding: var(--dr-space-xs) var(--dr-space-sm);
	border-radius: var(--dr-radius-sm);
	color: var(--dr-text-secondary);
	font-size: var(--dr-text-sm);
	cursor: pointer;
	transition: background-color var(--dr-transition-fast),
		color var(--dr-transition-fast);
}

.dr-menu li:hover,
.dr-menu li[aria-selected="true"] {
	background: var(--dr-surface-highlight);
	color: var(--dr-text-primary);
}

.dr-menu .menu-separator {
	margin: var(--dr-space-xs) calc(var(--dr-space-xs) * -1);
	border-bottom: 1px solid var(--dr-surface-highlight);
	padding: 0;
	cursor: default;
}

.dr-menu .menu-separator:hover {
	background: transparent;
}

/* ── Modal / dialog demo ── */
.dr-modal-demo {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-lg),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-lg);
	max-width: 380px;
}

.dr-modal-demo h4 {
	color: var(--fatal-error);
	font-family: var(--dr-font-heading);
	font-size: var(--dr-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--dr-space-sm);
}

.dr-modal-demo p {
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
	margin-bottom: var(--dr-space-md);
}

.dr-modal-demo .modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--dr-space-sm);
}

/* ── Toasts ── */
.dr-toast {
	background: var(--bricked-board);
	color: var(--dr-text-primary);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-sm) var(--dr-space-md);
	font-size: var(--dr-text-sm);
	margin-bottom: var(--dr-space-sm);
}

.dr-toast.success { border-left: 3px solid var(--memory-leek); }
.dr-toast.warning { border-left: 3px solid var(--stack-overglow); }
.dr-toast.error   { border-left: 3px solid var(--amber-alert); }
.dr-toast.info    { border-left: 3px solid var(--dead-thread); }

/* ── Tooltip ── */
.dr-tooltip-demo {
	display: inline-block;
	position: relative;
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-xs) var(--dr-space-sm);
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
	max-width: 240px;
}

/* ── Callouts ── */
.dr-callout {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	padding: var(--dr-space-md);
	margin-bottom: var(--dr-space-md);
}

.dr-callout .callout-title {
	font-family: var(--dr-font-heading);
	font-weight: 700;
	font-size: var(--dr-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dr-text-primary);
	margin-bottom: var(--dr-space-xs);
}

.dr-callout p {
	font-size: var(--dr-text-sm);
	color: var(--dr-text-secondary);
}

.dr-callout.note    { border-left: 3px solid var(--dead-thread); }
.dr-callout.note .callout-title       { color: var(--dead-thread); }
.dr-callout.warning { border-left: 3px solid var(--stack-overglow); }
.dr-callout.warning .callout-title    { color: var(--stack-overglow); }
.dr-callout.error   { border-left: 3px solid var(--amber-alert); }
.dr-callout.error .callout-title      { color: var(--amber-alert-text); }

/* ── Badges (spec-compliant, supplements .badge in UI lab) ── */
.badge.warn {
	color: var(--stack-overglow);
	background: rgba(212, 167, 89, 0.15);
	border: 1px solid rgba(212, 167, 89, 0.3);
}

.badge.info {
	color: var(--dead-thread);
	background: rgba(111, 165, 160, 0.15);
	border: 1px solid rgba(111, 165, 160, 0.3);
}

/* ── Status bar demo ── */
.dr-statusbar {
	display: flex;
	gap: var(--dr-space-md);
	background: var(--bricked-board);
	border-top: var(--dr-border);
	padding: var(--dr-space-xs) var(--dr-space-sm);
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-xs);
	color: var(--dr-text-primary);
	border-radius: 0 0 var(--dr-radius) var(--dr-radius);
}

.dr-statusbar .status-success { color: var(--memory-leek); }
.dr-statusbar .status-warning { color: var(--stack-overglow); }
.dr-statusbar .status-error   { color: var(--amber-alert-text); }

/* ────────────────────────────────────────────
   Selection & Focus (design system)
   ──────────────────────────────────────────── */

::selection {
	background: var(--digital-rust);
	color: var(--dr-text-on-accent);
}

:focus-visible {
	outline: 2px solid var(--stack-overglow);
	outline-offset: 2px;
}

/* ────────────────────────────────────────────
   Scrollbar (design system)
   ──────────────────────────────────────────── */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--dark-packet);
	border-radius: 4px;
	border: 2px solid var(--dr-surface-secondary);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--digital-rust);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--dark-packet) transparent;
}

/* ────────────────────────────────────────────
   Small mobile / narrow viewport
   ──────────────────────────────────────────── */

@media (max-width: 480px) {
	body {
		padding: var(--dr-space-sm);
	}

	.container {
		padding: 0;
	}

	h1 {
		font-size: clamp(1.75rem, 10vw, 2.5rem);
		letter-spacing: 0.05em;
	}

	.token-grid {
		grid-template-columns: 1fr;
	}

	.color-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.color-chip {
		height: 72px;
	}

	.color-hex {
		font-size: 0.6rem;
	}

	.ansi-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ────────────────────────────────────────────
   Reduced motion (design system)
   ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	body::before, body::after {
		content: none;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}