Complete visual overhaul

_config.ts

···
 site.use(jsx());
 site.use(postcss());
 site.add("styles.css");
-site.copy([".jpg", ".svg", ".js"]);
+site.copy([".jpg", ".png", ".svg", ".js"]);
 site.use(simpleIcons());
 
 export default site;

src/_components/ReadingProgress.tsx

···
+export default async function ReadingProgress() {
+	try {
+		// Fetch data at build time
+		const bookData = await fetchReadingProgress();
+
+		if (!bookData) {
+			return renderNoBooks();
+		}
+
+		return (
+			<div
+				class="reading-progress-container"
+				dangerouslySetInnerHTML={{
+					__html: renderBookProgress(bookData),
+				}}
+			/>
+		);
+	} catch (error) {
+		return (
+			<div
+				class="reading-progress-container reading-progress-error"
+				dangerouslySetInnerHTML={{
+					__html: renderError(
+						error instanceof Error
+							? error.message
+							: "Unknown error",
+					),
+				}}
+			/>
+		);
+	}
+}
+
+// Helper functions (same as before)
+async function fetchReadingProgress() {
+	try {
+		const progressResponse = await fetch(
+			"https://pds.timtinkers.online/xrpc/com.atproto.repo.listRecords?repo=did%3Aplc%3Ao6xucog6fghiyrvp7pyqxcs3&collection=social.popfeed.feed.listItem",
+		);
+
+		if (!progressResponse.ok) {
+			throw new Error(`API request failed: ${progressResponse.status}`);
+		}
+
+		const data = await progressResponse.json();
+
+		const booksWithProgress = data.records.filter(
+			(record: any) =>
+				record.value.bookProgress &&
+				record.value.bookProgress.updatedAt,
+		);
+
+		if (booksWithProgress.length === 0) {
+			return null;
+		}
+
+		const mostRecent = booksWithProgress.reduce(
+			(latest: any, current: any) => {
+				const latestDate = new Date(latest.value.updatedAt);
+				const currentDate = new Date(current.value.updatedAt);
+				return currentDate > latestDate ? current : latest;
+			},
+		);
+
+		const progress = {
+			isbn13: mostRecent.value.identifiers.isbn13,
+			progress: mostRecent.value.bookProgress.percent,
+			updatedAt: mostRecent.value.bookProgress.updatedAt,
+			totalPages: mostRecent.value.bookProgress.totalPages,
+			currentPage: mostRecent.value.bookProgress.currentPage,
+		};
+
+		const metadata = await fetchMetadata(progress.isbn13);
+
+		return { ...progress, ...metadata };
+	} catch (error) {
+		throw new Error(
+			`Failed to fetch reading progress: ${(error as Error).message}`,
+		);
+	}
+}
+
+async function fetchMetadata(isbn13: string) {
+	const response = await fetch(
+		`https://openlibrary.org/api/books?bibkeys=ISBN:${isbn13}&format=json&jscmd=data`,
+	);
+
+	if (!response.ok) {
+		throw new Error(`API request failed: ${response.status}`);
+	}
+
+	const data = await response.json();
+	const metadata = Object.values(data)[0] as any;
+
+	return {
+		title: metadata.title,
+		author: metadata.authors[0]?.name,
+		coverUrl: metadata.cover?.medium,
+	};
+}
+
+function formatDate(dateString: string): string {
+	return new Date(dateString).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	});
+}
+
+function renderNoBooks(): string {
+	return `
+    <div class="reading-progress-empty">
+      <p>📚 No books currently in progress</p>
+    </div>
+  `;
+}
+
+function renderError(message: string): string {
+	return `
+    <p>📚 Unable to load current reading progress</p>
+    <small>${message}</small>
+  `;
+}
+
+function renderBookProgress(book: any): string {
+	const coverImage = book.coverUrl
+		? `<img src="${book.coverUrl}" alt="Book cover for ${book.title}" class="book-cover" />`
+		: '<div class="book-cover-placeholder">📖</div>';
+
+	return `
+    <div class="reading-progress-header">
+      <span>📚</span> Currently Reading
+    </div>
+    <div class="book-info">
+      ${coverImage}
+      <div class="book-details">
+        <div class="book-title">
+          ${book.title}
+        </div>
+        <div class="book-author">
+          by ${book.author}
+        </div>
+        <div class="book-meta">
+          <span class="progress-badge">In progress</span>
+          <span class="last-updated">
+            Updated ${formatDate(book.updatedAt)}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="progress-container">
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: ${book.progress}%"></div>
+      </div>
+      <div class="progress-details">
+        <span class="progress-percent">${book.progress}%</span>
+        <span class="progress-pages">${book.currentPage} / ${book.totalPages} pages</span>
+      </div>
+    </div>
+  `;
+}

src/_includes/layout.tsx

···
 export default function Layout(data: Lume.Data) {
-	const title = data.header?.title || data.title || "timconspicuous";
-	const description = data.header?.description || data.description || "";
-	const avatar = data.header?.avatar || "/avatar.jpg";
-	const footer = data.footer || "";
-
 	return (
 		<html lang={data.lang || "en"}>
 			<head>
···
 					name="viewport"
 					content="width=device-width, initial-scale=1.0"
 				/>
-				<title>{title}</title>
+				<title>timconspicuous</title>
 				<meta name="supported-color-schemes" content="light dark" />
-				<meta
-					name="theme-color"
-					content="hsl(220, 20%, 100%)"
-					media="(prefers-color-scheme: light)"
-				/>
-				<meta
-					name="theme-color"
-					content="hsl(220, 20%, 10%)"
-					media="(prefers-color-scheme: dark)"
-				/>
 				<link rel="stylesheet" href="/styles.css" />
 				<link
 					rel="icon"
···
 					href="/favicon.svg"
 				/>
 				<link rel="canonical" href={data.url} />
-				{data.extra_head?.map((item: string) => (
-					<div dangerouslySetInnerHTML={{ __html: item }} />
-				))}
 			</head>
 			<body>
-				<main>
-					<header class="header">
-						<script
-							dangerouslySetInnerHTML={{
-								__html: `
-        				let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches
-        				  ? "dark"
-        				  : "light");
-        				document.documentElement.dataset.theme = theme;
-        				function changeTheme() {
-        				  theme = theme === "dark" ? "light" : "dark";
-        				  localStorage.setItem("theme", theme);
-        				  document.documentElement.dataset.theme = theme;
-        				}
-			        `,
-							}}
-						/>
+				<div id="tarot-app">
+					<main class="tarot-layout">
+						<div id="card-container" class="card-container">
+							<div class="tarot-card">
+								<img
+									id="card-image"
+									class="card-image"
+									src="/images/tarot/0-the-fool.png"
+									alt="The Fool"
+								/>
+							</div>
+						</div>
+
+						<div id="content-container" class="content-container">
+							<div id="content-wrapper" class="content-wrapper">
+								<div id="content-title" class="content-title">
+								</div>
+								{data.children}
+							</div>
+						</div>
+					</main>
+
+					<nav class="tarot-navigation">
 						<button
-							class="button header-theme"
-							onclick="changeTheme()"
+							type="button"
+							id="prev-card"
+							class="nav-button nav-prev"
+							aria-label="Previous card"
+						>
+							<span class="nav-arrow">←</span>
+						</button>
+						<div id="card-indicator" class="card-indicator">
+							<span id="current-card">0</span>
+						</div>
+						<button
+							type="button"
+							id="next-card"
+							class="nav-button nav-next"
+							aria-label="Next card"
 						>
-							<span class="icon">◐</span>
+							<span class="nav-arrow">→</span>
 						</button>
-						{avatar && (
-							<img
-								class="header-avatar"
-								src={avatar}
-								alt="Avatar"
-								data-lume-transform-images="webp avif 200@2"
-							/>
-						)}
-						<h1 class="header-title">{title}</h1>
-						{description && (
-							<div
-								dangerouslySetInnerHTML={{
-									__html: description,
-								}}
-							/>
-						)}
-					</header>
+					</nav>
+				</div>
 
-					{data.children}
-				</main>
-
-				{footer && (
-					<footer dangerouslySetInnerHTML={{ __html: footer }} />
-				)}
-				<script src="/scripts/reading-progress.js"></script>
+				<script src="/scripts/tarot.js"></script>
 			</body>
 		</html>
 	);

src/index.page.tsx

···
 import { marked } from "npm:marked";
 
 export const title = "tim's neocities page";
-export const header = {
-	title: "timconspicuous",
-	description: "",
-	avatar: "/avatar.jpg",
-};
 
 export const links = [
 	{
···
 
 export default ({ comp }: Lume.Data) => {
 	return (
-		<div>
-			{/*<div
-				id="reading-progress-widget"
-				data-reading-progress="true"
-				style={{
-					padding: "1rem",
-				}}
-			>
-			</div>*/}
-			<div>
+		<div id="tarot-content">
+			<div id="card-0" className="card-content">
 				<comp.Linktree links={links} />
+			</div>
+			<div id="card-1" className="card-content">
+				<comp.ReadingProgress />
 			</div>
 		</div>
 	);

src/scripts/tarot.js

···
+class Tarot {
+	constructor() {
+		this.currentCard = 0;
+		this.totalCards = 22; // 0-21 for Major Arcana
+		this.isTransitioning = false;
+		this.isFirstLoad = true;
+
+		// Major Arcana card names and roman numerals
+		this.cardData = [
+			{ id: "0", name: "The Fool" },
+			{ id: "I", name: "The Magician" },
+			{ id: "II", name: "The High Priestess" },
+			{ id: "III", name: "The Empress" },
+			{ id: "IV", name: "The Emperor" },
+			{ id: "V", name: "The Hierophant" },
+			{ id: "VI", name: "The Lovers" },
+			{ id: "VII", name: "The Chariot" },
+			{ id: "VIII", name: "Strength" },
+			{ id: "IX", name: "The Hermit" },
+			{ id: "X", name: "Wheel of Fortune" },
+			{ id: "XI", name: "Justice" },
+			{ id: "XII", name: "The Hanged Man" },
+			{ id: "XIII", name: "Death" },
+			{ id: "XIV", name: "Temperance" },
+			{ id: "XV", name: "The Devil" },
+			{ id: "XVI", name: "The Tower" },
+			{ id: "XVII", name: "The Star" },
+			{ id: "XVIII", name: "The Moon" },
+			{ id: "XIX", name: "The Sun" },
+			{ id: "XX", name: "Judgement" },
+			{ id: "XXI", name: "The World" },
+		];
+
+		this.init();
+	}
+
+	init() {
+		this.setupEventListeners();
+		this.setupTouchEvents();
+		this.loadFromHash();
+		this.updateImage();
+		this.updateCardIndicator();
+		this.loadComponent();
+
+		// Initial fade-in only on first load
+		if (this.isFirstLoad) {
+			this.initialFadeIn();
+		}
+	}
+
+	initialFadeIn() {
+		const contentContainer = document.getElementById("content-container");
+		const cardContainer = document.getElementById("card-container");
+
+		// Start both containers as invisible
+		if (contentContainer) {
+			contentContainer.style.opacity = "0";
+			contentContainer.style.transform = "translate(100px, -50%)";
+		}
+		if (cardContainer) {
+			cardContainer.style.opacity = "0";
+			cardContainer.style.transform = "translate(-100px, -50%)";
+		}
+
+		// Fade in after a short delay
+		setTimeout(() => {
+			if (contentContainer) {
+				contentContainer.style.transition = "opacity 0.8s ease-in-out";
+				contentContainer.style.opacity = "1";
+			}
+			if (cardContainer) {
+				cardContainer.style.transition = "opacity 0.8s ease-in-out";
+				cardContainer.style.opacity = "1";
+			}
+		}, 100);
+
+		this.isFirstLoad = false;
+	}
+
+	setupEventListeners() {
+		// Navigation buttons
+		document.getElementById("prev-card")?.addEventListener(
+			"click",
+			() => this.previousCard(),
+		);
+		document.getElementById("next-card")?.addEventListener(
+			"click",
+			() => this.nextCard(),
+		);
+
+		// Keyboard navigation
+		document.addEventListener("keydown", (e) => {
+			if (e.key === "ArrowLeft") {
+				e.preventDefault();
+				this.previousCard();
+			} else if (e.key === "ArrowRight") {
+				e.preventDefault();
+				this.nextCard();
+			}
+		});
+
+		// Hash change listener
+		globalThis.addEventListener("hashchange", () => this.loadFromHash());
+	}
+
+	setupTouchEvents() {
+		let startX = 0;
+		let startY = 0;
+
+		document.addEventListener("touchstart", (e) => {
+			startX = e.touches[0].clientX;
+			startY = e.touches[0].clientY;
+		});
+
+		document.addEventListener("touchend", (e) => {
+			if (!startX || !startY) return;
+
+			const endX = e.changedTouches[0].clientX;
+			const endY = e.changedTouches[0].clientY;
+
+			const diffX = startX - endX;
+			const diffY = startY - endY;
+
+			// Only trigger if horizontal swipe is dominant
+			if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+				if (diffX > 0) {
+					this.nextCard();
+				} else {
+					this.previousCard();
+				}
+			}
+
+			startX = 0;
+			startY = 0;
+		});
+	}
+
+	loadFromHash() {
+		const hash = globalThis.location.hash.slice(1);
+		if (!hash) {
+			this.currentCard = 0;
+			this.updateHash();
+			return;
+		}
+
+		// Find card index
+		const cardIndex = this.cardData.findIndex((card) => card.id === hash);
+
+		if (cardIndex !== -1) {
+			this.currentCard = cardIndex;
+		} else {
+			// Try parsing as number
+			const num = parseInt(hash);
+			if (!isNaN(num) && num >= 0 && num < this.totalCards) {
+				this.currentCard = num;
+			}
+		}
+
+		this.updateImage();
+		this.updateCardIndicator();
+	}
+
+	updateHash() {
+		const card = this.cardData[this.currentCard];
+		globalThis.location.hash = card.id;
+	}
+
+	async previousCard() {
+		if (this.isTransitioning) return;
+
+		this.currentCard = this.currentCard > 0
+			? this.currentCard - 1
+			: this.totalCards - 1;
+		await this.transitionToCard("right");
+	}
+
+	async nextCard() {
+		if (this.isTransitioning) return;
+
+		this.currentCard = this.currentCard < this.totalCards - 1
+			? this.currentCard + 1
+			: 0;
+		await this.transitionToCard("left");
+	}
+
+	async transitionToCard(direction) {
+		this.isTransitioning = true;
+
+		const contentContainer = document.getElementById("content-container");
+		const cardContainer = document.getElementById("card-container");
+
+		// Get viewport width for proper off-screen positioning
+		const viewportWidth = globalThis.innerWidth;
+
+		// Determine slide directions
+		const slideOutDirection = direction === "left"
+			? `-${viewportWidth}px`
+			: `${viewportWidth}px`;
+		const slideInDirection = direction === "left"
+			? `${viewportWidth}px`
+			: `-${viewportWidth}px`;
+
+		// Store the initial transforms for precise restoration
+		const initialContentTransform = "translate(100px, -50%)";
+		const initialCardTransform = "translate(-100px, -50%)";
+
+		// Reset transitions for smooth animation
+		if (contentContainer) {
+			contentContainer.style.transition = "transform 0.6s ease-in-out";
+		}
+		if (cardContainer) {
+			cardContainer.style.transition = "transform 0.6s ease-in-out";
+		}
+
+		// Phase 1: Slide content out first
+		if (contentContainer) {
+			contentContainer.style.transform =
+				`translateY(-50%) translateX(${slideOutDirection})`;
+		}
+
+		// Wait 150ms, then slide card out
+		await this.wait(150);
+		if (cardContainer) {
+			cardContainer.style.transform =
+				`translateY(-50%) translateX(${slideOutDirection})`;
+		}
+
+		// Wait for slide out to complete
+		await this.wait(300);
+
+		// Update content while off-screen
+		this.updateHash();
+		this.updateImage();
+		this.updateCardIndicator();
+		this.loadComponent();
+
+		// Position elements on the opposite side for slide in
+		if (contentContainer) {
+			contentContainer.style.transition = "none";
+			contentContainer.style.transform =
+				`translateY(-50%) translateX(${slideInDirection})`;
+		}
+		if (cardContainer) {
+			cardContainer.style.transition = "none";
+			cardContainer.style.transform =
+				`translateY(-50%) translateX(${slideInDirection})`;
+		}
+
+		// Small delay to ensure positioning is set
+		await this.wait(50);
+
+		// Phase 2: Slide card back in first
+		if (cardContainer) {
+			cardContainer.style.transition = "transform 0.6s ease-in-out";
+			cardContainer.style.transform = initialCardTransform;
+		}
+
+		// Wait 150ms, then slide content back in
+		await this.wait(150);
+		if (contentContainer) {
+			contentContainer.style.transition = "transform 0.6s ease-in-out";
+			contentContainer.style.transform = initialContentTransform;
+		}
+
+		// Wait for slide in to complete
+		await this.wait(400);
+
+		this.isTransitioning = false;
+	}
+
+	updateImage() {
+		const cardImage = document.getElementById("card-image");
+
+		if (!cardImage) return;
+
+		// Set image source for current card (using PNG extension for pixel art)
+		const cardName = this.cardData[this.currentCard].name.toLowerCase()
+			.replace(/\s+/g, "-");
+		const newSrc = `/images/tarot/${this.currentCard}-${cardName}.png`;
+
+		// Update image source and alt text
+		cardImage.src = newSrc;
+		cardImage.alt = this.cardData[this.currentCard].name;
+	}
+
+	updateCardIndicator() {
+		const indicator = document.getElementById("current-card");
+		if (indicator) {
+			indicator.textContent = this.cardData[this.currentCard].id;
+		}
+	}
+
+	loadComponent() {
+		// Hide all card content divs
+		document.querySelectorAll(".card-content").forEach((card) => {
+			card.classList.remove("active");
+		});
+		
+		const currentCard = this.cardData[this.currentCard];
+
+		// Update the content title
+		const contentTitle = document.getElementById("content-title");
+		if (contentTitle) {
+			contentTitle.textContent = `${currentCard.id}: ${currentCard.name}`;
+		}
+
+		// Show the current card's content
+		const currentCardContent = document.getElementById(
+			`card-${this.currentCard}`,
+		);
+
+		if (currentCardContent) {
+			currentCardContent.classList.add("active");
+		} else {
+			// Fallback content if card doesn't exist yet
+			const contentWrapper = document.getElementById("content-wrapper");
+			if (contentWrapper) {
+				// Create a new content element with the proper ID
+				const newContent = document.createElement("div");
+				newContent.id = `card-${this.currentCard}`;
+				newContent.className = "card-content active";
+				newContent.innerHTML = `
+                <p>Coming soon...</p>
+            `;
+				contentWrapper.appendChild(newContent);
+			}
+		}
+	}
+
+	wait(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+}
+
+// Initialize when DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+	new Tarot();
+});

src/styles.css

···
 /* Lume's design system */
 @import "https://unpkg.com/@lumeland/ds@0.5.2/ds.css";
 
-@import "./styles/button.css";
+@import "./styles/linktree.css";
 @import "./styles/readingProgress.css";
 
+* {
+    box-sizing: border-box;
+}
+
 body {
-  display: grid;
-  grid-template-columns: minmax(0, 500px);
-  grid-template-rows: 1fr auto;
-  min-height: 100vh;
-  text-align: center;
-  padding: max(20px, 5vh) 20px;
-  row-gap: 20px;
-  justify-content: center;
-  align-content: center;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font: var(--font-body);
+    overflow-x: hidden;
+    background: #151021;
+}
+
+#tarot-app {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Prevent horizontal scroll during transitions */
+}
+
+/* Background system */
+#background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.card-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition:
+        opacity 0.8s ease-in-out,
+        transform 0.8s ease-in-out;
+    opacity: 0;
+}
+
+.card-background.active {
+    opacity: 1;
+}
+
+/* Main tarot layout */
+.tarot-layout {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    position: relative;
+    min-height: 100vh;
+    overflow: hidden;
+}
+
+.card-container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-100px, -50%);
+    z-index: 1;
+}
+
+.tarot-card {
+    width: 365px;
+    height: 565px;
+    perspective: 1000px;
+}
+
+.card-image {
+    filter: grayscale(50%);
+    width: auto;
+    height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    transition: opacity 0.3s ease-in-out;
+    position: relative;
+    z-index: 2;
+}
+
+.content-container {
+    position: absolute;
+    right: 50%;
+    top: 50%;
+    transform: translate(100px, -50%);
+    width: 365px;
+    max-width: 90vw;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.content-title {
+    color: #e0e0e0;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: left;
+    width: 100%;
+}
+
+.content-wrapper {
+    background: rgba(20, 20, 20, 0.75);
+    border: 1px solid rgba(75, 57, 118, 0.3);
+    border-radius: 16px;
+    padding: 1rem;
+    box-shadow:
+        0 10px 40px rgba(0, 0, 0, 0.6),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    color: #e0e0e0;
+    width: 100%;
+}
+
+/* Card content styling */
+.card-content {
+    display: none;
+}
+
+.card-content.active {
+    display: block;
+}
+
+.card-content h2 {
+    margin-top: 0;
+    color: #664ea0;
+    font-size: 1.5rem;
 }
 
-main {
-  align-self: center;
+.card-content em {
+    color: #664ea0;
+    font-style: italic;
 }
 
-.header {
-  font: var(--font-body);
-  margin-bottom: min(5vh, 100px);
-  color: var(--color-text);
+/* Navigation */
+.tarot-navigation {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    z-index: 10;
+}
 
-  p {
-    margin: 0;
-    text-wrap: balance;
+.nav-button {
+    background: rgba(20, 20, 20, 0.8);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(75, 57, 118, 0.4);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #664ea0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 1.2rem;
+}
 
-    +p {
-      margin-top: .5em;
-    }
-  }
+.nav-button:hover {
+    background: rgba(48, 37, 75, 0.2);
+    border-color: rgba(75, 57, 118, 0.6);
+    transform: scale(1.1);
 }
 
-.header-avatar {
-  border-radius: 50%;
-  aspect-ratio: 1;
-  object-fit: cover;
-  object-position: center center;
-  width: 150px;
-  max-width: 50vw;
+.nav-button:active {
+    transform: scale(0.95);
 }
 
-.header-title {
-  font: var(--font-title);
-  letter-spacing: var(--font-title-spacing);
-  margin: .5em 0 0;
-  color: var(--color-base);
+.nav-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-.header-theme {
-  position: absolute;
-  top: 1rem;
-  right: 1.5rem;
+.card-indicator {
+    background: rgba(20, 20, 20, 0.8);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(75, 57, 118, 0.4);
+    border-radius: 20px;
+    padding: 0.5rem 1rem;
+    color: #664ea0;
+    font-weight: bold;
+    min-width: 60px;
+    text-align: center;
 }
 
-footer {
-  font: var(--font-small);
-  color: var(--color-dim);
+/* Responsive design */
+@media (max-width: 768px) {
+    .tarot-layout {
+        padding: 1rem;
+    }
+
+    .card-container {
+        transform: translate(-75px, -50%) scale(0.75);
+        transform-origin: center;
+    }
+
+    .content-container {
+        transform: translate(75px, -50%) scale(0.75);
+        transform-origin: center;
+        width: calc(365px * 0.75);
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .tarot-card {
+        width: calc(365px * 0.75);
+        height: calc(565px * 0.75);
+    }
+
+    .content-wrapper {
+        height: auto;
+        max-height: calc(565px * 0.75);
+        overflow-y: auto;
+    }
 
-  >* {
-    margin: 0;
-  }
+    .content-title {
+        font-size: 1.25rem;
+        margin-bottom: 8px;
+    }
+
+    .tarot-navigation {
+        bottom: 1rem;
+        gap: 1.5rem;
+    }
 
-  >*+* {
-    margin-top: 1em;
-  }
+    .nav-button {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
 
-  a {
-    color: inherit;
-  }
-}
+    .card-indicator {
+        padding: 0.4rem 0.8rem;
+        min-width: 50px;
+    }
+}