dtx-dashboard {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100vh;
	padding: 80px 12px 0;

	> h1 { margin-bottom: 24px; }
	h2 { padding: 0 0 12px; }

	h1 strong {
		color: var(--accent);
		text-decoration: underline;
	}

	.get-started {
		position: relative;
		display: flex;
		align-items: center;

		counter-reset: step;

		.card {
			flex: 1 0 0;
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 12px;
			height: 100%;
			padding: 24px;
			border-radius: 24px;
			border: 1px solid var(--border);
			background: var(--background-transparent);
			overflow: hidden;

			h2 {
				font-weight: 600;

				&::before {
					counter-increment: step;
					content: counter(step);
					margin-right: 12px;
					opacity: .5;
					font-weight: 400;
				}
			}

			> .material-symbols-outlined {
				position: absolute;
				inset: auto -80px -80px auto;
				font-size: 384px;
				opacity: .05;
				pointer-events: none;
			}

			/* to match the height of the file input */
			dtx-button, a { height: 54px; }
		}

		> .material-symbols-outlined { opacity: .2; }

		li {
			list-style: disc;
			margin-left: 24px;
			font-size: 12px;
			line-height: 1.3;
		}

		a {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px 16px;
			border-radius: 12px;
		}
	}

	dtx-chatbot {
		width: fit-content;
		margin: 64px auto;
	}
}