From 44f024f1d518a5aed68900175636605729914805 Mon Sep 17 00:00:00 2001
From: Santhosh Janardhanan <santhoshj@gmail.com>
Date: Mon, 13 Apr 2026 00:53:54 -0400
Subject: [PATCH] feat: add AI disclaimer banner and persist UI state in
 localStorage

1. Disclaimer: amber-colored banner between the intensity slider and
   the Convert button warning users that:
   - Results are AI-generated and may be inaccurate or biased
   - Do not enter personal or sensitive information
   - Use at your own discretion, demo only

2. State persistence: all UI state is saved to localStorage under
   'english-styler-state' and restored on page load:
   - Input text
   - Selected category and style
   - Intensity slider position
   - Accordion (Show prompt) open/close state
   Uses () to auto-save whenever state changes.
---
 src/routes/+page.svelte | 870 +++++++++++++++++++++-------------------
 1 file changed, 457 insertions(+), 413 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7ecf177..955c6a3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,478 +1,522 @@
 <script lang="ts">
-    import {
-        categories,
-        styles,
-        getStylesByCategory,
-        getIntensityConfig,
-    } from "$lib/styles";
-    import type { Style, StyleCategory, ConversionResponse } from "$lib/types";
-    import LoadingModal from "$lib/components/LoadingModal.svelte";
+	import { categories, getStylesByCategory, getIntensityConfig } from '$lib/styles';
+	import type { ConversionResponse } from '$lib/types';
+	import LoadingModal from '$lib/components/LoadingModal.svelte';
 
-    let inputText = $state("");
-    let selectedCategoryId = $state("");
-    let selectedStyleId = $state("");
-    let intensity = $state(3);
-    let outputText = $state("");
-    let loading = $state(false);
-    let error = $state("");
-    let systemPrompt = $state("");
-    let userMessage = $state("");
-    let modelName = $state("");
-    let showPrompt = $state(false);
-    let copied = $state(false);
+	const STORAGE_KEY = 'english-styler-state';
 
-    let availableStyles = $derived(
-        selectedCategoryId ? getStylesByCategory(selectedCategoryId) : [],
-    );
+	interface SavedState {
+		inputText: string;
+		selectedCategoryId: string;
+		selectedStyleId: string;
+		intensity: number;
+		showPrompt: boolean;
+	}
 
-    let canConvert = $derived(
-        inputText.trim().length > 0 && selectedStyleId.length > 0 && !loading,
-    );
+	function loadState(): SavedState | null {
+		try {
+			const raw = localStorage.getItem(STORAGE_KEY);
+			if (!raw) return null;
+			return JSON.parse(raw) as SavedState;
+		} catch {
+			return null;
+		}
+	}
 
-    let intensityLabel = $derived(getIntensityConfig(intensity)?.label ?? "");
+	function saveState() {
+		try {
+			const state: SavedState = {
+				inputText,
+				selectedCategoryId,
+				selectedStyleId,
+				intensity,
+				showPrompt
+			};
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+		} catch {
+			// localStorage may be unavailable (private browsing, etc.)
+		}
+	}
 
-    function onCategoryChange() {
-        selectedStyleId = "";
-        if (availableStyles.length === 1) {
-            selectedStyleId = availableStyles[0].id;
-        }
-    }
+	const saved = loadState();
 
-    async function handleConvert() {
-        if (!canConvert) return;
+	let inputText = $state(saved?.inputText ?? '');
+	let selectedCategoryId = $state(saved?.selectedCategoryId ?? '');
+	let selectedStyleId = $state(saved?.selectedStyleId ?? '');
+	let intensity = $state(saved?.intensity ?? 3);
+	let outputText = $state('');
+	let loading = $state(false);
+	let error = $state('');
+	let systemPrompt = $state('');
+	let userMessage = $state('');
+	let modelName = $state('');
+	let showPrompt = $state(saved?.showPrompt ?? false);
+	let copied = $state(false);
 
-        loading = true;
-        error = "";
-        outputText = "";
-        systemPrompt = "";
-        userMessage = "";
-        modelName = "";
-        showPrompt = false;
+	let availableStyles = $derived(
+		selectedCategoryId ? getStylesByCategory(selectedCategoryId) : []
+	);
 
-        try {
-            const res = await fetch("/api/convert", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    text: inputText,
-                    styleId: selectedStyleId,
-                    intensity,
-                }),
-            });
+	let canConvert = $derived(
+		inputText.trim().length > 0 && selectedStyleId.length > 0 && !loading
+	);
 
-            const data = await res.json();
+	let intensityLabel = $derived(getIntensityConfig(intensity)?.label ?? '');
 
-            if (!res.ok) {
-                throw new Error(data.error || "Conversion failed");
-            }
+	// Persist state whenever it changes
+	$effect(() => {
+		saveState();
+	});
 
-            const result: ConversionResponse = data;
-            outputText = result.converted;
-            systemPrompt = result.systemPrompt;
-            userMessage = result.userMessage;
-            modelName = result.model;
-        } catch (err) {
-            error = err instanceof Error ? err.message : "Something went wrong";
-        } finally {
-            loading = false;
-        }
-    }
+	function onCategoryChange() {
+		selectedStyleId = '';
+		if (availableStyles.length === 1) {
+			selectedStyleId = availableStyles[0].id;
+		}
+	}
 
-    async function handleCopy() {
-        try {
-            await navigator.clipboard.writeText(outputText);
-            copied = true;
-            setTimeout(() => (copied = false), 2000);
-        } catch {
-            // Fallback: select text
-            const textarea = document.querySelector(".output-text");
-            if (textarea instanceof HTMLElement) {
-                const range = document.createRange();
-                range.selectNodeContents(textarea);
-                const sel = window.getSelection();
-                sel?.removeAllRanges();
-                sel?.addRange(range);
-            }
-        }
-    }
+	async function handleConvert() {
+		if (!canConvert) return;
+
+		loading = true;
+		error = '';
+		outputText = '';
+		systemPrompt = '';
+		userMessage = '';
+		modelName = '';
+		showPrompt = false;
+
+		try {
+			const res = await fetch('/api/convert', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					text: inputText,
+					styleId: selectedStyleId,
+					intensity
+				})
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				throw new Error(data.error || 'Conversion failed');
+			}
+
+			const result: ConversionResponse = data;
+			outputText = result.converted;
+			systemPrompt = result.systemPrompt;
+			userMessage = result.userMessage;
+			modelName = result.model;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Something went wrong';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleCopy() {
+		try {
+			await navigator.clipboard.writeText(outputText);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			const el = document.querySelector('.output-text');
+			if (el instanceof HTMLElement) {
+				const range = document.createRange();
+				range.selectNodeContents(el);
+				const sel = window.getSelection();
+				sel?.removeAllRanges();
+				sel?.addRange(range);
+			}
+		}
+	}
 </script>
 
 <main class="container">
-    <h1 class="title">English Style Converter</h1>
-    <p class="subtitle">
-        Transform your text into different English styles and tones
-    </p>
+	<h1 class="title">English Style Converter</h1>
+	<p class="subtitle">Transform your text into different English styles and tones</p>
 
-    <div class="card">
-        <div class="form-group">
-            <label for="input-text">Your Text</label>
-            <textarea
-                id="input-text"
-                bind:value={inputText}
-                placeholder="Enter the English text you want to convert... DO NOT ENTER ANY PERSONAL INFORMATION!!"
-                rows="5"
-                disabled={loading}
-            ></textarea>
-        </div>
+	<div class="card">
+		<div class="form-group">
+			<label for="input-text">Your Text</label>
+			<textarea
+				id="input-text"
+				bind:value={inputText}
+				placeholder="Enter the English text you want to convert..."
+				rows="5"
+				disabled={loading}
+			></textarea>
+		</div>
 
-        <div class="selectors">
-            <div class="form-group">
-                <label for="category">Style Category</label>
-                <select
-                    id="category"
-                    bind:value={selectedCategoryId}
-                    onchange={onCategoryChange}
-                    disabled={loading}
-                >
-                    <option value="">Choose a category...</option>
-                    {#each categories as cat}
-                        <option value={cat.id}>{cat.emoji} {cat.label}</option>
-                    {/each}
-                </select>
-            </div>
+		<div class="selectors">
+			<div class="form-group">
+				<label for="category">Style Category</label>
+				<select
+					id="category"
+					bind:value={selectedCategoryId}
+					onchange={onCategoryChange}
+					disabled={loading}
+				>
+					<option value="">Choose a category...</option>
+					{#each categories as cat}
+						<option value={cat.id}>{cat.emoji} {cat.label}</option>
+					{/each}
+				</select>
+			</div>
 
-            <div class="form-group">
-                <label for="style">Style</label>
-                <select
-                    id="style"
-                    bind:value={selectedStyleId}
-                    disabled={loading || !selectedCategoryId}
-                >
-                    {#if !selectedCategoryId}
-                        <option value="">Select a category first...</option>
-                    {:else if availableStyles.length === 0}
-                        <option value="">No styles available</option>
-                    {:else}
-                        <option value="">Choose a style...</option>
-                        {#each availableStyles as style}
-                            <option value={style.id}>{style.label}</option>
-                        {/each}
-                    {/if}
-                </select>
-            </div>
-        </div>
+			<div class="form-group">
+				<label for="style">Style</label>
+				<select id="style" bind:value={selectedStyleId} disabled={loading || !selectedCategoryId}>
+					{#if !selectedCategoryId}
+						<option value="">Select a category first...</option>
+					{:else if availableStyles.length === 0}
+						<option value="">No styles available</option>
+					{:else}
+						<option value="">Choose a style...</option>
+						{#each availableStyles as style}
+							<option value={style.id}>{style.label}</option>
+						{/each}
+					{/if}
+				</select>
+			</div>
+		</div>
 
-        <div class="form-group">
-            <label for="intensity">
-                Intensity: <span class="intensity-label"
-                    >{intensityLabel || "Strong"}</span
-                >
-            </label>
-            <div class="slider-row">
-                <span class="slider-end">Subtle</span>
-                <input
-                    id="intensity"
-                    type="range"
-                    min="1"
-                    max="5"
-                    step="1"
-                    bind:value={intensity}
-                    disabled={loading}
-                />
-                <span class="slider-end">Maximum</span>
-            </div>
-        </div>
+		<div class="form-group">
+			<label for="intensity">
+				Intensity: <span class="intensity-label">{intensityLabel || 'Strong'}</span>
+			</label>
+			<div class="slider-row">
+				<span class="slider-end">Subtle</span>
+				<input
+					id="intensity"
+					type="range"
+					min="1"
+					max="5"
+					step="1"
+					bind:value={intensity}
+					disabled={loading}
+				/>
+				<span class="slider-end">Maximum</span>
+			</div>
+		</div>
 
-        <button
-            class="convert-btn"
-            onclick={handleConvert}
-            disabled={!canConvert}
-        >
-            {#if loading}
-                Converting...
-            {:else}
-                ✨ Convert
-            {/if}
-        </button>
-    </div>
+		<div class="disclaimer">
+			<span class="disclaimer-icon">⚡</span>
+			<span>This tool uses AI to generate styled text. Results may be inaccurate, biased, or unexpected. Do not enter personal or sensitive information. Use at your own discretion — this is a demo and outputs should not be relied upon for important purposes.</span>
+		</div>
 
-    {#if error}
-        <div class="output-card error-card">
-            <p class="error-text">⚠️ {error}</p>
-        </div>
-    {/if}
+		<button class="convert-btn" onclick={handleConvert} disabled={!canConvert}>
+			{#if loading}
+				Converting...
+			{:else}
+				✨ Convert
+			{/if}
+		</button>
+	</div>
 
-    {#if outputText}
-        <div class="output-card">
-            <div class="output-header">
-                <h3>Result</h3>
-                <button class="copy-btn" onclick={handleCopy}>
-                    {#if copied}
-                        ✓ Copied!
-                    {:else}
-                        📋 Copy
-                    {/if}
-                </button>
-            </div>
-            <div class="output-text">{outputText}</div>
-            {#if modelName}
-                <p class="model-attribution">Responded by {modelName}</p>
-            {/if}
-        </div>
+	{#if error}
+		<div class="output-card error-card">
+			<p class="error-text">⚠️ {error}</p>
+		</div>
+	{/if}
 
-        <div class="prompt-section">
-            <button
-                class="prompt-toggle"
-                onclick={() => (showPrompt = !showPrompt)}
-            >
-                {showPrompt ? "▼" : "▶"} Show prompt
-            </button>
-            {#if showPrompt}
-                <div class="prompt-content">
-                    <div class="prompt-block">
-                        <h4>System Prompt</h4>
-                        <pre>{systemPrompt}</pre>
-                    </div>
-                    <div class="prompt-block">
-                        <h4>User Message</h4>
-                        <pre>{userMessage}</pre>
-                    </div>
-                </div>
-            {/if}
-        </div>
-    {/if}
+	{#if outputText}
+		<div class="output-card">
+			<div class="output-header">
+				<h3>Result</h3>
+				<button class="copy-btn" onclick={handleCopy}>
+					{#if copied}
+						✓ Copied!
+					{:else}
+						📋 Copy
+					{/if}
+				</button>
+			</div>
+			<div class="output-text">{outputText}</div>
+			{#if modelName}
+				<p class="model-attribution">Responded by {modelName}</p>
+			{/if}
+		</div>
+
+		<div class="prompt-section">
+			<button class="prompt-toggle" onclick={() => (showPrompt = !showPrompt)}>
+				{showPrompt ? '▼' : '▶'} Show prompt
+			</button>
+			{#if showPrompt}
+				<div class="prompt-content">
+					<div class="prompt-block">
+						<h4>System Prompt</h4>
+						<pre>{systemPrompt}</pre>
+					</div>
+					<div class="prompt-block">
+						<h4>User Message</h4>
+						<pre>{userMessage}</pre>
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
 </main>
 
 {#if loading}
-    <LoadingModal />
+	<LoadingModal />
 {/if}
 
 <style>
-    .container {
-        max-width: 680px;
-        margin: 0 auto;
-        padding: 2rem 1.5rem;
-        min-height: 100vh;
-    }
+	.container {
+		max-width: 680px;
+		margin: 0 auto;
+		padding: 2rem 1.5rem;
+		min-height: 100vh;
+	}
 
-    .title {
-        font-size: 2rem;
-        font-weight: 800;
-        color: #1f2937;
-        text-align: center;
-        margin-bottom: 0.25rem;
-    }
+	.title {
+		font-size: 2rem;
+		font-weight: 800;
+		color: #1f2937;
+		text-align: center;
+		margin-bottom: 0.25rem;
+	}
 
-    .subtitle {
-        text-align: center;
-        color: #6b7280;
-        margin-bottom: 2rem;
-        font-size: 1.05rem;
-    }
+	.subtitle {
+		text-align: center;
+		color: #6b7280;
+		margin-bottom: 2rem;
+		font-size: 1.05rem;
+	}
 
-    .card {
-        background: #ffffff;
-        border: 1px solid #e5e7eb;
-        border-radius: 12px;
-        padding: 1.5rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    }
+	.card {
+		background: #ffffff;
+		border: 1px solid #e5e7eb;
+		border-radius: 12px;
+		padding: 1.5rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
 
-    .form-group {
-        margin-bottom: 1.25rem;
-    }
+	.form-group {
+		margin-bottom: 1.25rem;
+	}
 
-    .form-group label {
-        display: block;
-        font-weight: 600;
-        font-size: 0.9rem;
-        color: #374151;
-        margin-bottom: 0.4rem;
-    }
+	.form-group label {
+		display: block;
+		font-weight: 600;
+		font-size: 0.9rem;
+		color: #374151;
+		margin-bottom: 0.4rem;
+	}
 
-    textarea,
-    select {
-        width: 100%;
-        padding: 0.75rem;
-        border: 1px solid #d1d5db;
-        border-radius: 8px;
-        font-size: 0.95rem;
-        font-family: inherit;
-        background: #fafafa;
-        color: #1f2937;
-        transition: border-color 0.2s;
-    }
+	textarea,
+	select {
+		width: 100%;
+		padding: 0.75rem;
+		border: 1px solid #d1d5db;
+		border-radius: 8px;
+		font-size: 0.95rem;
+		font-family: inherit;
+		background: #fafafa;
+		color: #1f2937;
+		transition: border-color 0.2s;
+	}
 
-    textarea:focus,
-    select:focus {
-        outline: none;
-        border-color: #3b82f6;
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-    }
+	textarea:focus,
+	select:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
 
-    textarea {
-        resize: vertical;
-        min-height: 100px;
-    }
+	textarea {
+		resize: vertical;
+		min-height: 100px;
+	}
 
-    .selectors {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-    }
+	.selectors {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
 
-    .intensity-label {
-        color: #3b82f6;
-        font-weight: 700;
-    }
+	.intensity-label {
+		color: #3b82f6;
+		font-weight: 700;
+	}
 
-    .slider-row {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
+	.slider-row {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
 
-    .slider-end {
-        font-size: 0.8rem;
-        color: #9ca3af;
-        white-space: nowrap;
-    }
+	.slider-end {
+		font-size: 0.8rem;
+		color: #9ca3af;
+		white-space: nowrap;
+	}
 
-    input[type="range"] {
-        flex: 1;
-    }
+	input[type='range'] {
+		flex: 1;
+	}
 
-    .convert-btn {
-        width: 100%;
-        padding: 0.85rem;
-        background: #3b82f6;
-        color: #ffffff;
-        border: none;
-        border-radius: 8px;
-        font-size: 1.05rem;
-        font-weight: 700;
-        cursor: pointer;
-        transition:
-            background 0.2s,
-            opacity 0.2s;
-    }
+	.disclaimer {
+		background: #fff8ed;
+		border: 1px solid #f6c96a;
+		border-radius: 8px;
+		padding: 0.75rem 1rem;
+		margin-bottom: 1.25rem;
+		font-size: 0.82rem;
+		line-height: 1.5;
+		color: #8b6914;
+		display: flex;
+		gap: 0.6rem;
+		align-items: flex-start;
+	}
 
-    .convert-btn:hover:not(:disabled) {
-        background: #2563eb;
-    }
+	.disclaimer-icon {
+		flex-shrink: 0;
+		font-size: 1rem;
+		line-height: 1.5;
+	}
 
-    .convert-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
+	.convert-btn {
+		width: 100%;
+		padding: 0.85rem;
+		background: #3b82f6;
+		color: #ffffff;
+		border: none;
+		border-radius: 8px;
+		font-size: 1.05rem;
+		font-weight: 700;
+		cursor: pointer;
+		transition: background 0.2s, opacity 0.2s;
+	}
 
-    .output-card {
-        margin-top: 1.5rem;
-        background: #ffffff;
-        border: 1px solid #e5e7eb;
-        border-radius: 12px;
-        padding: 1.25rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    }
+	.convert-btn:hover:not(:disabled) {
+		background: #2563eb;
+	}
 
-    .error-card {
-        border-color: #fca5a5;
-        background: #fef2f2;
-    }
+	.convert-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-    .error-text {
-        color: #dc2626;
-        font-weight: 500;
-    }
+	.output-card {
+		margin-top: 1.5rem;
+		background: #ffffff;
+		border: 1px solid #e5e7eb;
+		border-radius: 12px;
+		padding: 1.25rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
 
-    .output-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-    }
+	.error-card {
+		border-color: #fca5a5;
+		background: #fef2f2;
+	}
 
-    .output-header h3 {
-        margin: 0;
-        font-size: 1.1rem;
-        color: #1f2937;
-    }
+	.error-text {
+		color: #dc2626;
+		font-weight: 500;
+	}
 
-    .copy-btn {
-        padding: 0.35rem 0.75rem;
-        background: #f3f4f6;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-        font-size: 0.85rem;
-        cursor: pointer;
-        transition: background 0.2s;
-    }
+	.output-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
 
-    .copy-btn:hover {
-        background: #e5e7eb;
-    }
+	.output-header h3 {
+		margin: 0;
+		font-size: 1.1rem;
+		color: #1f2937;
+	}
 
-    .output-text {
-        white-space: pre-wrap;
-        line-height: 1.6;
-        color: #1f2937;
-        font-size: 1rem;
-    }
+	.copy-btn {
+		padding: 0.35rem 0.75rem;
+		background: #f3f4f6;
+		border: 1px solid #d1d5db;
+		border-radius: 6px;
+		font-size: 0.85rem;
+		cursor: pointer;
+		transition: background 0.2s;
+	}
 
-    .model-attribution {
-        margin-top: 0.75rem;
-        font-size: 0.8rem;
-        color: #9ca3af;
-        font-style: italic;
-    }
+	.copy-btn:hover {
+		background: #e5e7eb;
+	}
 
-    .prompt-section {
-        margin-top: 1rem;
-    }
+	.output-text {
+		white-space: pre-wrap;
+		line-height: 1.6;
+		color: #1f2937;
+		font-size: 1rem;
+	}
 
-    .prompt-toggle {
-        background: none;
-        border: none;
-        color: #3b82f6;
-        font-size: 0.9rem;
-        font-weight: 600;
-        cursor: pointer;
-        padding: 0.5rem 0;
-    }
+	.model-attribution {
+		margin-top: 0.75rem;
+		font-size: 0.8rem;
+		color: #9ca3af;
+		font-style: italic;
+	}
 
-    .prompt-toggle:hover {
-        text-decoration: underline;
-    }
+	.prompt-section {
+		margin-top: 1rem;
+	}
 
-    .prompt-content {
-        margin-top: 0.75rem;
-    }
+	.prompt-toggle {
+		background: none;
+		border: none;
+		color: #3b82f6;
+		font-size: 0.9rem;
+		font-weight: 600;
+		cursor: pointer;
+		padding: 0.5rem 0;
+	}
 
-    .prompt-block {
-        margin-bottom: 1rem;
-    }
+	.prompt-toggle:hover {
+		text-decoration: underline;
+	}
 
-    .prompt-block h4 {
-        font-size: 0.85rem;
-        color: #6b7280;
-        margin-bottom: 0.4rem;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
+	.prompt-content {
+		margin-top: 0.75rem;
+	}
 
-    .prompt-block pre {
-        background: #f9fafb;
-        border: 1px solid #e5e7eb;
-        border-radius: 8px;
-        padding: 0.75rem;
-        font-size: 0.85rem;
-        white-space: pre-wrap;
-        word-break: break-word;
-        color: #374151;
-        margin: 0;
-    }
+	.prompt-block {
+		margin-bottom: 1rem;
+	}
 
-    @media (max-width: 600px) {
-        .selectors {
-            grid-template-columns: 1fr;
-        }
+	.prompt-block h4 {
+		font-size: 0.85rem;
+		color: #6b7280;
+		margin-bottom: 0.4rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
 
-        .container {
-            padding: 1rem;
-        }
+	.prompt-block pre {
+		background: #f9fafb;
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		padding: 0.75rem;
+		font-size: 0.85rem;
+		white-space: pre-wrap;
+		word-break: break-word;
+		color: #374151;
+		margin: 0;
+	}
 
-        .title {
-            font-size: 1.5rem;
-        }
-    }
-</style>
+	@media (max-width: 600px) {
+		.selectors {
+			grid-template-columns: 1fr;
+		}
+
+		.container {
+			padding: 1rem;
+		}
+
+		.title {
+			font-size: 1.5rem;
+		}
+	}
+</style>
\ No newline at end of file