@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
	--bg-1: #f7f3ea;
	--bg-2: #f6fcf8;
	--bg-radial-left: #f5d89f4a;
	--bg-radial-right: #7ac0b15a;
	--ink: #18202a;
	--muted: #5a6372;
	--card: rgba(255, 255, 255, 0.7);
	--card-strong: rgba(255, 255, 255, 0.88);
	--line: rgba(24, 32, 42, 0.14);
	--panel-border: rgba(255, 255, 255, 0.7);
	--textarea-bg: rgba(255, 255, 255, 0.75);
	--textarea-bg-focus: rgba(255, 255, 255, 0.92);
	--textarea-ink: #24303f;
	--focus-ring: rgba(76, 160, 138, 0.2);
	--focus-line: #4ca08a;
	--svg-layer-1: rgba(255, 255, 255, 0.8);
	--svg-layer-2: rgba(255, 255, 255, 0.7);
	--svg-layer-3: rgba(249, 252, 252, 0.45);
	--table-border: rgba(17, 35, 43, 0.1);
	--table-cell-border: rgba(19, 50, 64, 0.1);
	--table-head-bg: rgba(16, 126, 103, 0.15);
	--table-head-ink: #124a3e;
	--steps-ink: #3f4858;
	--node-fill: #fffdf9;
	--node-stroke: #1d2c2f;
	--node-accept: #215c2b;
	--node-label: #152029;
	--edge-color: #2d3843;
	--edge-label: #1c2127;
	--edge-label-stroke: rgba(255, 255, 255, 0.95);
	--aurora-a: rgba(230, 157, 42, 0.25);
	--aurora-b: rgba(14, 138, 111, 0.22);
	--brand: #0e8a6f;
	--brand-deep: #0a6e59;
	--accent: #e69d2a;
	--ok: #2f7e48;
	--hover-row-bg: rgba(223, 65, 140, 0.14);
	--hover-row-ink: #7c1f52;
	--hover-row-border: rgba(215, 56, 132, 0.3);
	--hover-node-fill: #ffe6f3;
	--hover-node-stroke: #cc2f82;
	--hover-node-glow: rgba(204, 47, 130, 0.28);
	--hover-edge-stroke: #cc2f82;
	--hover-edge-glow: rgba(204, 47, 130, 0.24);
	--shadow: 0 18px 40px rgba(21, 36, 30, 0.12);
	--radius-xl: 22px;
	--radius-md: 14px;
}

body[data-theme='dark'] {
	--bg-1: #141a22;
	--bg-2: #0f161d;
	--bg-radial-left: #e69d2a2b;
	--bg-radial-right: #1ca28740;
	--ink: #e6edf5;
	--muted: #a3b1c1;
	--card: rgba(23, 33, 44, 0.72);
	--card-strong: rgba(21, 31, 42, 0.9);
	--line: rgba(182, 205, 231, 0.2);
	--panel-border: rgba(172, 202, 232, 0.24);
	--textarea-bg: rgba(13, 21, 30, 0.88);
	--textarea-bg-focus: rgba(10, 18, 27, 0.95);
	--textarea-ink: #dbe6f1;
	--focus-ring: rgba(53, 163, 136, 0.24);
	--focus-line: #3aa98c;
	--svg-layer-1: rgba(37, 56, 72, 0.55);
	--svg-layer-2: rgba(19, 31, 43, 0.72);
	--svg-layer-3: rgba(15, 24, 34, 0.56);
	--table-border: rgba(150, 180, 210, 0.25);
	--table-cell-border: rgba(145, 175, 205, 0.21);
	--table-head-bg: rgba(26, 145, 118, 0.28);
	--table-head-ink: #c9f0e6;
	--steps-ink: #cfdae7;
	--hover-row-bg: rgba(255, 111, 183, 0.18);
	--hover-row-ink: #ffeaf5;
	--hover-row-border: rgba(255, 150, 208, 0.34);
	--hover-node-fill: #3a1730;
	--hover-node-stroke: #ff8fcc;
	--hover-node-glow: rgba(255, 143, 204, 0.36);
	--hover-edge-stroke: #ff8fcc;
	--hover-edge-glow: rgba(255, 143, 204, 0.32);
	--node-fill: #10202e;
	--node-stroke: #c3d7ea;
	--node-accept: #7ddc95;
	--node-label: #ecf5ff;
	--edge-color: #b8cbde;
	--edge-label: #f0f6ff;
	--edge-label-stroke: rgba(11, 20, 30, 0.88);
	--aurora-a: rgba(230, 157, 42, 0.2);
	--aurora-b: rgba(14, 138, 111, 0.28);
	--shadow: 0 22px 44px rgba(4, 10, 18, 0.48);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	position: relative;
	overflow-x: hidden;
	color: var(--ink);
	background:
		radial-gradient(980px 500px at 0% -10%, var(--bg-radial-left) 0%, transparent 58%),
		radial-gradient(880px 500px at 100% 0%, var(--bg-radial-right) 0%, transparent 56%),
		linear-gradient(155deg, var(--bg-1) 0%, var(--bg-2) 100%);
	font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
	transition: background 0.25s ease, color 0.25s ease;
}

.aurora {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		conic-gradient(from 130deg at 8% 10%, var(--aurora-a), transparent 30%),
		conic-gradient(from 20deg at 88% 18%, var(--aurora-b), transparent 34%);
	filter: blur(32px);
	z-index: 0;
	animation: auroraDrift 14s ease-in-out infinite alternate;
}

.hero,
.app-shell,
footer {
	position: relative;
	z-index: 1;
}

.hero {
	max-width: 1280px;
	margin: 0 auto;
	padding: 36px 24px 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	animation: riseIn 0.7s ease-out both;
}

.hero-copy {
	max-width: 760px;
}

.hero-kicker {
	margin: 0;
	color: var(--brand-deep);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}

.hero h1 {
	margin: 10px 0 8px;
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
	line-height: 1.1;
}

.hero-subtitle {
	margin: 0;
	max-width: 720px;
	color: var(--muted);
	font-size: clamp(0.95rem, 1.5vw, 1.07rem);
}

.app-shell {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 370px minmax(0, 1fr);
	gap: 20px;
	padding: 16px 24px 28px;
}

.left,
.graph-block {
	background: var(--card);
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(8px);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
}

.left {
	padding: 16px;
	animation: riseIn 0.8s ease-out both;
}

.panel-head {
	margin-bottom: 12px;
}

.panel-head h2 {
	margin: 0 0 4px;
	font-size: 1.2rem;
}

.panel-head p {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}

label {
	font-size: 0.92rem;
}

textarea {
	width: 100%;
	margin-top: 8px;
	padding: 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--textarea-bg);
	resize: vertical;
	min-height: 230px;
	color: var(--textarea-ink);
	font-size: 0.88rem;
	line-height: 1.4;
	font-family: 'IBM Plex Mono', 'Courier New', monospace;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

textarea:focus {
	outline: none;
	border-color: var(--focus-line);
	box-shadow: 0 0 0 3px var(--focus-ring);
	background: var(--textarea-bg-focus);
}

.controls {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

button {
	border: none;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	color: #f5fffc;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
	transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.theme-toggle {
	min-width: 120px;
	padding: 9px 14px;
	background: linear-gradient(135deg, rgba(25, 38, 51, 0.92) 0%, rgba(16, 27, 37, 0.96) 100%);
	color: #eef6ff;
	border: 1px solid rgba(214, 231, 248, 0.2);
	box-shadow: 0 10px 22px rgba(7, 13, 21, 0.32);
	font-size: 0.84rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body[data-theme='dark'] .theme-toggle {
	background: linear-gradient(135deg, rgba(244, 249, 255, 0.12) 0%, rgba(209, 228, 246, 0.08) 100%);
	border-color: rgba(214, 233, 252, 0.34);
	color: #e9f5ff;
}

button:hover {
	transform: translateY(-1px);
	filter: saturate(1.1);
}

button:active {
	transform: translateY(0);
}

button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#resetBtn {
	background: linear-gradient(135deg, #d39234 0%, #af681f 100%);
}

.nav-buttons {
	margin-top: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.nav-btn {
	padding: 10px 12px;
	font-size: 0.85rem;
	font-weight: 600;
}

.nav-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

#stepsPanel {
	margin-top: 14px;
	border: 1px solid var(--line);
	background: var(--card-strong);
	border-radius: var(--radius-md);
	padding: 12px;
}

#stepsPanel h3 {
	margin: 0 0 8px;
	font-size: 1rem;
}

#stepsList {
	padding-left: 25px; /* more space for numbers */
	margin: 0;
	max-height: 255px;
	overflow: auto;
	list-style-position: outside;
	list-style-type: decimal;
}

#stepsList li {
	color: var(--steps-ink);
	margin: 0 0 8px;
	font-size: 0.9rem;
	padding-left: 20px; /* extra space inside list item */
}

.graphs {
	display: grid;
	gap: 14px;
}

.graph-block {
	padding: 14px;
	opacity: 0;
	transform: translateY(14px);
	animation: riseIn 0.65s ease-out forwards;
}

.graph-block:nth-of-type(1) {
	animation-delay: 0.08s;
}

.graph-block:nth-of-type(2) {
	animation-delay: 0.18s;
}

.graph-block h3 {
	margin: 0 0 10px;
	font-size: 1.06rem;
}

.graph-content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	overflow: auto;
}

.graph-content svg {
	flex: none;
	max-width: 100%;
	height: auto;
	min-height: 280px;
	display: block;
	overflow: visible;
	border-radius: 12px;
	background:
		radial-gradient(circle at 8% 0%, var(--svg-layer-1), transparent 35%),
		linear-gradient(165deg, var(--svg-layer-2), var(--svg-layer-3));
}

.table-panel {
	min-width: 190px;
	max-width: 280px;
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--table-border);
	padding: 8px;
	background: var(--card-strong);
}

.table-panel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.table-panel tbody tr {
	transition: background-color 0.16s ease, color 0.16s ease;
	cursor: default;
}

.table-panel tbody tr:hover td,
.table-panel tbody tr.is-highlighted td {
	background: var(--hover-row-bg);
	color: var(--hover-row-ink);
	border-color: var(--hover-row-border);
}

.table-panel th,
.table-panel td {
	border: 1px solid var(--table-cell-border);
	padding: 6px;
	text-align: left;
}

.table-panel th {
	background: var(--table-head-bg);
	color: var(--table-head-ink);
}

svg {
	background-color: transparent;
}

.node {
	fill: var(--node-fill);
	stroke: var(--node-stroke);
	stroke-width: 1.6px;
}

.dfa-node {
	transition: filter 0.16s ease, opacity 0.16s ease;
}

.dfa-node.is-highlighted {
	filter: drop-shadow(0 0 10px var(--hover-node-glow));
}

.dfa-node.is-highlighted > .node:not(.node-inner) {
	fill: var(--hover-node-fill);
	stroke: var(--hover-node-stroke);
	stroke-width: 3px;
}

.dfa-node.is-highlighted > .node.accept:not(.node-inner) {
	stroke-width: 4px;
}

.dfa-node.is-highlighted .node-label {
	fill: var(--hover-node-stroke);
}

.dfa-node.is-highlighted .node-inner {
	fill: none;
	stroke: var(--hover-node-stroke);
}

.node.accept {
	stroke: var(--node-accept);
	stroke-width: 3px;
}

.node-label {
	font-size: 12px;
	text-anchor: middle;
	fill: var(--node-label);
	font-weight: 700;
}

.edge {
	stroke: var(--edge-color);
	fill: none;
	stroke-width: 1.7px;
	transition: stroke 0.16s ease, stroke-width 0.16s ease, opacity 0.16s ease, filter 0.16s ease;
}

.edge.is-highlighted {
	stroke: var(--hover-edge-stroke);
	stroke-width: 3px;
	filter: drop-shadow(0 0 8px var(--hover-edge-glow));
	opacity: 1;
}

.edge-label {
	font-size: 12px;
	fill: var(--edge-label);
	paint-order: stroke;
	stroke: var(--edge-label-stroke);
	stroke-width: 3.8px;
	stroke-linejoin: round;
	transition: transform 0.16s ease, opacity 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
	transform-box: fill-box;
	transform-origin: center;
}

.edge-label.is-highlighted {
	font-weight: 700;
	stroke-width: 4.2px;
	transform: translateY(-1px) scale(1.04);
	opacity: 1;
}

.start-arrow {
	stroke: var(--edge-color);
	stroke-width: 2px;
}

footer {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px 22px;
	color: var(--muted);
	font-size: 0.88rem;
}

footer small {
	display: block;
}

@keyframes riseIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes auroraDrift {
	0% {
		transform: translateY(-12px) scale(1.02);
	}
	100% {
		transform: translateY(10px) scale(1);
	}
}

@media (max-width: 1200px) {
	.app-shell {
		grid-template-columns: 1fr;
	}

	.left {
		order: 1;
	}

	.right {
		order: 2;
	}

	.graph-content {
		flex-direction: column;
	}

	.table-panel {
		max-width: none;
	}
}

@media (max-width: 700px) {
	.hero {
		padding: 26px 14px 10px;
	}

	.theme-toggle {
		width: 100%;
	}

	.app-shell {
		padding: 12px 14px 18px;
		gap: 14px;
	}

	.left,
	.graph-block {
		border-radius: 16px;
	}

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

	footer {
		padding: 0 14px 16px;
	}
}