chatrpg-app/src/routes/HowItWorks.svelte

<section id="how" class="section">
	<div class="container">
		<div class="section-header">
			<div class="eyebrow">FOUR SIMPLE STEPS</div>
			<h2>How ChatRPG Works</h2>
			<p>From idea to epic in seconds. Then the story never has to end.</p>
		</div>

		<div class="steps">
			<div class="step">
				<div class="step-num">01</div>
				<h3>Define Your Adventure</h3>
				<p>Choose genre, tone, setting, and your character. Or just start typing and let the AI surprise you. Want hard sci-fi with body horror and romance? Done.</p>
			</div>
			<div class="step">
				<div class="step-num">02</div>
				<h3>LLM Opens the World</h3>
				<p>The model writes a rich, detailed opening scene that perfectly matches everything you described. No two games are ever the same.</p>
			</div>
			<div class="step">
				<div class="step-num">03</div>
				<h3>Respond Naturally</h3>
				<p>Type anything you want: dialogue, internal thoughts, actions, questions, jokes, reckless ideas. The game understands plain English.</p>
			</div>
			<div class="step">
				<div class="step-num">04</div>
				<h3>The Story Continues</h3>
				<p>The LLM narrates consequences, advances plots, introduces memorable characters, and keeps perfect continuity. Every decision matters forever.</p>
			</div>
		</div>
	</div>
</section>

<style>
	/* How it works / steps specific */
	.steps {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
	.step {
		background: #121218;
		border: 1px solid #2a2a35;
		border-radius: 16px;
		padding: 28px 24px;
	}
	.step-num {
		font-size: 13px;
		font-weight: 700;
		color: #c084fc;
		margin-bottom: 16px;
		letter-spacing: 1px;
	}
	.step h3 {
		font-size: 1.15rem;
		margin-bottom: 12px;
	}
	.step p {
		color: #a1a1aa;
		font-size: 0.97rem;
		margin: 0;
	}

	@media (max-width: 900px) {
		.steps {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media (max-width: 700px) {
		.steps {
			grid-template-columns: 1fr;
		}
	}
</style>