.tg-controls {
		display: flex;
		gap: .5rem;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: .75rem
	}

	.tg-grid {
		margin-top: 1rem
	}

	.tg-table {
		width: 100%;
		border-collapse: collapse
	}

	.tg-table td,
	.tg-table th {
		border: 1px solid rgba(0, 0, 0, 0.08);
		padding: .5rem;
	}

	.tg-table th {
		background: var(--surface-overlay);
	}

	.tg-output {
		width: 100%;
		height: 260px;
		font-family: monospace;
		padding: .75rem
	}

	.chart-bar {
		height: 24px;
		background: var(--accent);
		margin: 6px 0;
		color: #fff;
		padding-left: .5rem;
		display: flex;
		align-items: center
	}

	.tg-small {
		font-size: .9rem
	}

	.tg-controls input[type="number"],
	.tg-controls select {
		padding: .25rem .5rem;
		border-radius: 6px;
		border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
		background: var(--input-bg, #fff);
		color: var(--text, #111);
		min-height: 30px;
	}

	.tg-controls input[type="number"]:focus,
	.tg-controls select:focus {
		outline: 2px solid rgba(11, 116, 222, 0.12);
		outline-offset: 1px;
	}

	@media (prefers-color-scheme: dark) {

		.tg-controls input[type="number"],
		.tg-controls select {
			background: var(--input-bg-dark, #071021);
			color: var(--input-color-dark, #e6eef6);
			border-color: rgba(255, 255, 255, 0.06);
		}
	}