* { box-sizing: border-box; }
html, body { height: 100%; }

html[data-theme="light"] {
	--bg: #f5f7fb;
	--text: #0f172a;
	--muted: #64748b;
	--accent: #7c3aed;
	--accent-pressed: #6d28d9;
	--line: #e2e8f0;
	--card: #ffffff;
	--focus: #60a5fa;
}

html[data-theme="dark"] {
	--bg: #0b1220;
	--text: #e5e7eb;
	--muted: #94a3b8;
	--accent: #8b5cf6;
	--accent-pressed: #7c3aed;
	--line: #273244;
	--card: #111827;
	--focus: #93c5fd;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

.container {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 24px;
}

.header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 720px;
}

.title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(20px, 4.5vw, 28px);
	color: var(--text);
}

.display {
	font-size: clamp(56px, 18vw, 96px);
	font-weight: 800;
	letter-spacing: 1px;
}

.action {
	font-size: clamp(24px, 6vw, 36px);
	font-weight: 700;
	line-height: 1;
	padding: 20px 28px;
	min-width: min(90vw, 360px);
	height: 300px;
	border: none;
	border-radius: 16px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 12px 20px -12px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.12);
	transition: transform .05s ease, background-color .15s ease, box-shadow .15s ease;
}

.action:active { transform: scale(.98); background: var(--accent-pressed); }
.action:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.action:disabled { opacity: .6; cursor: not-allowed; }

.theme-toggle {
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--text);
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (hover: hover) {
	.action:hover { box-shadow: 0 16px 26px -14px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.14); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}