From 91c3700343a28c4f18365031b6a8dbdcb9dde9d8 Mon Sep 17 00:00:00 2001
From: Rafael Martins <rafael271alves@gmail.com>
Date: Sat, 1 Aug 2026 17:57:15 -0300
Subject: [PATCH 1/3] fix(responsive): remove the 4k scale override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #7.

`app/globals.css` declared a custom `--breakpoint-4k: 2560px`, and 170
hand-written `4k:*` utilities across 17 files then multiplied every font
size, padding, gap and icon dimension by two to four times — up to
`4k:text-[14rem]` for the headline number. On a large display the site did
not show more content, it showed the same content enormously magnified.

The breakpoint is also misnamed: 2560px is QHD width, not 4K. Anyone on a
1440p monitor at 100% scaling was already getting the blow-up, which
matches the report better than the issue title does.

Deleting the utilities cannot regress anything below 2560px, because
`4k:` compiles to `@media (width >= 2560px)` — none of the 170 had any
effect at normal widths. Large screens now get the normal type scale, and
legibility is left to browser and OS zoom, which is what the removal of
`maximumScale: 1` restored.

Ten of the utilities never worked at all. `2560px` is a px value while
Tailwind's default breakpoints are rem, and mixing units breaks the variant
sort order, so `4k:` was emitted before `sm:`…`2xl:` and lost to any rem
variant touching the same property. Measured at 3840x2160,
`4k:max-w-[2400px]` produced a 1600px container and `4k:text-[14rem]`
produced 96px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/globals.css                            |  4 --
 app/page.tsx                               | 18 ++++----
 components/atoms/button.tsx                |  5 +--
 components/atoms/input.tsx                 |  4 +-
 components/atoms/label.tsx                 |  2 +-
 components/molecules/copy-button.tsx       | 17 ++------
 components/molecules/date-time-input.tsx   |  8 ++--
 components/molecules/duration-row.tsx      | 11 ++---
 components/molecules/extra-entry-list.tsx  |  4 +-
 components/molecules/extra-entry-row.tsx   |  6 +--
 components/molecules/hero-panel.tsx        | 25 +++++------
 components/molecules/stat-box.tsx          | 12 +++---
 components/organisms/journey-form.tsx      | 46 +++++++++------------
 components/organisms/salary-calculator.tsx | 48 ++++++++++------------
 components/organisms/tax-details-panel.tsx |  4 +-
 components/organisms/work-calculator.tsx   | 14 +++----
 components/organisms/work-summary.tsx      | 28 +++++--------
 components/templates/calculator-layout.tsx |  8 ++--
 18 files changed, 109 insertions(+), 155 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 3c3c46a..9c0f814 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,3 @@
 @import "tailwindcss";
 
-@theme {
-	--breakpoint-4k: 2560px;
-}
-
 @custom-variant dark (&:where(.dark, .dark *));
diff --git a/app/page.tsx b/app/page.tsx
index 60d6613..4e0e18d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -62,19 +62,19 @@ export default function Home() {
 			</a>
 			<main className="min-h-screen bg-neutral-50 dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 transition-colors duration-500">
 				<header className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-200 dark:border-neutral-800">
-					<div className="max-w-7xl 2xl:max-w-[1600px] 4k:max-w-[2400px] mx-auto px-6 h-20 4k:h-32 flex items-center justify-between">
-						<div className="flex items-center gap-3 4k:gap-6">
-							<div className="w-10 h-10 4k:w-16 4k:h-16 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
-								<Wallet className="text-white w-6 h-6 4k:w-10 4k:h-10" />
+					<div className="max-w-7xl 2xl:max-w-[1600px] mx-auto px-6 h-20 flex items-center justify-between">
+						<div className="flex items-center gap-3">
+							<div className="w-10 h-10 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+								<Wallet className="text-white w-6 h-6" />
 							</div>
-							<h1 className="text-xl font-bold tracking-tight md:text-2xl 4k:text-5xl">
+							<h1 className="text-xl font-bold tracking-tight md:text-2xl">
 								WorkLoad
 							</h1>
 						</div>
 
 						<div className="flex items-center gap-4">
-							<div className="hidden md:flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 rounded-xl text-sm font-bold 4k:text-2xl 4k:px-8 4k:py-4">
-								<Clock className="w-4 h-4 text-indigo-500 4k:w-8 4k:h-8" />
+							<div className="hidden md:flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 rounded-xl text-sm font-bold">
+								<Clock className="w-4 h-4 text-indigo-500" />
 								<span className="tabular-nums">
 									{currentTime === null
 										? PLACEHOLDER_CLOCK
@@ -94,9 +94,9 @@ export default function Home() {
 								title="Alternar tema"
 							>
 								{resolvedTheme === "dark" ? (
-									<Sun className="w-5 h-5 4k:w-10 4k:h-10" />
+									<Sun className="w-5 h-5" />
 								) : (
-									<Moon className="w-5 h-5 4k:w-10 4k:h-10" />
+									<Moon className="w-5 h-5" />
 								)}
 							</Button>
 						</div>
diff --git a/components/atoms/button.tsx b/components/atoms/button.tsx
index ec6b44c..0c658f1 100644
--- a/components/atoms/button.tsx
+++ b/components/atoms/button.tsx
@@ -24,11 +24,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 							variant === "ghost",
 						"bg-red-500/10 text-red-600 hover:bg-red-500/20":
 							variant === "danger",
-						"h-12 px-6 py-2 text-base 4k:h-20 4k:px-12 4k:text-2xl":
-							size === "default",
+						"h-12 px-6 py-2 text-base": size === "default",
 						"h-9 rounded-md px-3 text-sm": size === "sm",
 						"h-14 rounded-2xl px-8 text-lg": size === "lg",
-						"h-10 w-10 4k:h-16 4k:w-16": size === "icon",
+						"h-10 w-10": size === "icon",
 					},
 					className,
 				)}
diff --git a/components/atoms/input.tsx b/components/atoms/input.tsx
index de147cc..70b203f 100644
--- a/components/atoms/input.tsx
+++ b/components/atoms/input.tsx
@@ -18,8 +18,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 				<input
 					type={type}
 					className={cn(
-						"flex h-14 4k:h-20 w-full rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 px-4 py-2 text-lg 4k:text-2xl 4k:px-6 ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all font-mono",
-						icon ? "pl-12 4k:pl-16" : "",
+						"flex h-14 w-full rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 px-4 py-2 text-lg ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all font-mono",
+						icon ? "pl-12" : "",
 						className,
 					)}
 					ref={ref}
diff --git a/components/atoms/label.tsx b/components/atoms/label.tsx
index a2874a7..e819a0f 100644
--- a/components/atoms/label.tsx
+++ b/components/atoms/label.tsx
@@ -8,7 +8,7 @@ const Label = React.forwardRef<
 	<label
 		ref={ref}
 		className={cn(
-			"flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-neutral-500 4k:text-2xl",
+			"flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-neutral-500",
 			className,
 		)}
 		{...props}
diff --git a/components/molecules/copy-button.tsx b/components/molecules/copy-button.tsx
index 610eb60..7775ad9 100644
--- a/components/molecules/copy-button.tsx
+++ b/components/molecules/copy-button.tsx
@@ -50,10 +50,7 @@ export function CopyButton({ value, label, onCopied }: CopyButtonProps) {
 
 	return (
 		<div className="flex items-center gap-3">
-			<span
-				role="status"
-				className="text-xs font-bold text-right 4k:text-xl empty:hidden"
-			>
+			<span role="status" className="text-xs font-bold text-right empty:hidden">
 				{STATUS_MESSAGES[status]}
 			</span>
 			<button
@@ -61,18 +58,12 @@ export function CopyButton({ value, label, onCopied }: CopyButtonProps) {
 				aria-label={label}
 				title={label}
 				onClick={handleCopy}
-				className="p-4 lg:p-2 bg-white/10 hover:bg-white/20 rounded-2xl lg:rounded-lg transition-colors active:scale-95 4k:p-4 4k:rounded-xl"
+				className="p-4 lg:p-2 bg-white/10 hover:bg-white/20 rounded-2xl lg:rounded-lg transition-colors active:scale-95"
 			>
 				{status === "copied" ? (
-					<Check
-						className="w-6 h-6 lg:w-5 lg:h-5 4k:w-10 4k:h-10"
-						aria-hidden="true"
-					/>
+					<Check className="w-6 h-6 lg:w-5 lg:h-5" aria-hidden="true" />
 				) : (
-					<Copy
-						className="w-6 h-6 lg:w-5 lg:h-5 4k:w-10 4k:h-10"
-						aria-hidden="true"
-					/>
+					<Copy className="w-6 h-6 lg:w-5 lg:h-5" aria-hidden="true" />
 				)}
 			</button>
 		</div>
diff --git a/components/molecules/date-time-input.tsx b/components/molecules/date-time-input.tsx
index fb3e31b..4a8d5dc 100644
--- a/components/molecules/date-time-input.tsx
+++ b/components/molecules/date-time-input.tsx
@@ -10,7 +10,7 @@ const TIME_GROUPS = [2, 2] as const;
 const BR_DATE_FORMAT = "dd/MM/yyyy";
 const ISO_DATE_FORMAT = "yyyy-MM-dd";
 const FIELD_CLASSES =
-	"h-14 4k:h-20 focus-visible:ring-indigo-500 placeholder:text-neutral-500";
+	"h-14 focus-visible:ring-indigo-500 placeholder:text-neutral-500";
 
 const toBRDate = (isoDate: string) => {
 	if (!isoDate) return "";
@@ -67,9 +67,9 @@ export function DateTimeInput({
 		<div className={cn("space-y-3", className)}>
 			<label
 				htmlFor={inputId}
-				className="flex items-center gap-2 text-sm font-medium text-neutral-500 4k:text-2xl"
+				className="flex items-center gap-2 text-sm font-medium text-neutral-500"
 			>
-				<Icon className="w-4 h-4 4k:w-8 4k:h-8" aria-hidden="true" />
+				<Icon className="w-4 h-4" aria-hidden="true" />
 				{label}
 			</label>
 			<div className="flex flex-col sm:flex-row gap-3 sm:gap-2">
@@ -85,7 +85,7 @@ export function DateTimeInput({
 						className={FIELD_CLASSES}
 					/>
 				</div>
-				<div className="w-full sm:w-32 4k:w-48 shrink-0">
+				<div className="w-full sm:w-32 shrink-0">
 					<MaskedInput
 						placeholder="HH:mm"
 						aria-label={`Hora para ${label}`}
diff --git a/components/molecules/duration-row.tsx b/components/molecules/duration-row.tsx
index fcf0032..2c58c9b 100644
--- a/components/molecules/duration-row.tsx
+++ b/components/molecules/duration-row.tsx
@@ -24,16 +24,11 @@ export function DurationRow({
 }: DurationRowProps) {
 	return (
 		<div className="flex items-center justify-between">
-			<div className="flex items-center gap-2 text-sm text-neutral-500 4k:text-2xl">
-				<Icon
-					className={cn("w-4 h-4 4k:w-8 4k:h-8", iconClassName)}
-					aria-hidden="true"
-				/>
+			<div className="flex items-center gap-2 text-sm text-neutral-500">
+				<Icon className={cn("w-4 h-4", iconClassName)} aria-hidden="true" />
 				{label}
 			</div>
-			<span className="font-bold 4k:text-3xl">
-				{formatHoursAndMinutes(minutes)}
-			</span>
+			<span className="font-bold">{formatHoursAndMinutes(minutes)}</span>
 		</div>
 	);
 }
diff --git a/components/molecules/extra-entry-list.tsx b/components/molecules/extra-entry-list.tsx
index e743708..d7ff68e 100644
--- a/components/molecules/extra-entry-list.tsx
+++ b/components/molecules/extra-entry-list.tsx
@@ -25,9 +25,7 @@ export function ExtraEntryList({
 	return (
 		<div>
 			<div className="flex items-center justify-between mb-4">
-				<p className="text-sm font-medium text-neutral-500 4k:text-2xl">
-					{label}
-				</p>
+				<p className="text-sm font-medium text-neutral-500">{label}</p>
 				<Button
 					variant="outline"
 					size="sm"
diff --git a/components/molecules/extra-entry-row.tsx b/components/molecules/extra-entry-row.tsx
index 24450f5..a5badf1 100644
--- a/components/molecules/extra-entry-row.tsx
+++ b/components/molecules/extra-entry-row.tsx
@@ -5,7 +5,7 @@ import { formatCurrencySimple, parseCurrency } from "@/lib/utils";
 import { Button } from "../atoms/button";
 import { Input } from "../atoms/input";
 
-const COMPACT_FIELD_CLASSES = "h-12 4k:h-16 rounded-xl text-sm 4k:text-xl";
+const COMPACT_FIELD_CLASSES = "h-12 rounded-xl text-sm";
 
 interface ExtraEntryRowProps {
 	name: string;
@@ -42,7 +42,7 @@ export function ExtraEntryRow({
 					className={COMPACT_FIELD_CLASSES}
 				/>
 			</div>
-			<div className="w-24 sm:w-32 4k:w-48 shrink-0">
+			<div className="w-24 sm:w-32 shrink-0">
 				<Input
 					type="text"
 					inputMode="numeric"
@@ -61,7 +61,7 @@ export function ExtraEntryRow({
 				onClick={onRemove}
 				className="shrink-0"
 			>
-				<Trash2 className="w-4 h-4 4k:w-8 4k:h-8" aria-hidden="true" />
+				<Trash2 className="w-4 h-4" aria-hidden="true" />
 			</Button>
 		</div>
 	);
diff --git a/components/molecules/hero-panel.tsx b/components/molecules/hero-panel.tsx
index 24f98ab..4ab0b98 100644
--- a/components/molecules/hero-panel.tsx
+++ b/components/molecules/hero-panel.tsx
@@ -29,35 +29,30 @@ export function HeroPanel({
 	return (
 		<div
 			className={cn(
-				"relative overflow-hidden rounded-3xl p-8 lg:p-12 4k:p-24 4k:rounded-[4rem] text-white shadow-xl lg:shadow-2xl transition-colors duration-700",
+				"relative overflow-hidden rounded-3xl p-8 lg:p-12 text-white shadow-xl lg:shadow-2xl transition-colors duration-700",
 				TONE_CLASSES[tone],
 			)}
 		>
-			<div className="absolute -top-10 -right-10 w-32 h-32 lg:w-40 lg:h-40 4k:w-80 4k:h-80 bg-white/10 rounded-full blur-2xl lg:blur-3xl" />
-			<div className="absolute -bottom-10 -left-10 w-40 h-40 4k:w-80 4k:h-80 bg-black/10 rounded-full blur-3xl" />
-			<div className="relative z-10 space-y-6 lg:space-y-8 4k:space-y-16">
+			<div className="absolute -top-10 -right-10 w-32 h-32 lg:w-40 lg:h-40 bg-white/10 rounded-full blur-2xl lg:blur-3xl" />
+			<div className="absolute -bottom-10 -left-10 w-40 h-40 bg-black/10 rounded-full blur-3xl" />
+			<div className="relative z-10 space-y-6 lg:space-y-8">
 				<div className="flex items-center justify-between gap-4">
-					<div className="flex items-center gap-2 lg:gap-3 4k:gap-6 opacity-80">
-						<Icon
-							className="w-5 h-5 lg:w-6 lg:h-6 4k:w-12 4k:h-12"
-							aria-hidden="true"
-						/>
-						<span className="text-sm lg:text-lg font-bold lg:font-medium tracking-wider lg:tracking-wide uppercase 4k:text-4xl">
+					<div className="flex items-center gap-2 lg:gap-3 opacity-80">
+						<Icon className="w-5 h-5 lg:w-6 lg:h-6" aria-hidden="true" />
+						<span className="text-sm lg:text-lg font-bold lg:font-medium tracking-wider lg:tracking-wide uppercase">
 							{label}
 						</span>
 					</div>
 					{badge}
 				</div>
-				<div className="space-y-4 4k:space-y-8 text-center">
-					<p className="text-4xl sm:text-6xl xl:text-8xl font-black tracking-tighter tabular-nums 4k:text-[14rem] break-words">
+				<div className="space-y-4 text-center">
+					<p className="text-4xl sm:text-6xl xl:text-8xl font-black tracking-tighter tabular-nums break-words">
 						{value}
 					</p>
 					{children}
 				</div>
 				{footer ? (
-					<div className="pt-6 lg:pt-8 4k:pt-16 border-t border-white/10">
-						{footer}
-					</div>
+					<div className="pt-6 lg:pt-8 border-t border-white/10">{footer}</div>
 				) : null}
 			</div>
 		</div>
diff --git a/components/molecules/stat-box.tsx b/components/molecules/stat-box.tsx
index 964f4b6..738d7c3 100644
--- a/components/molecules/stat-box.tsx
+++ b/components/molecules/stat-box.tsx
@@ -21,7 +21,7 @@ export function StatBox({
 	return (
 		<div
 			className={cn(
-				"rounded-2xl border p-4 4k:p-8 flex flex-col gap-1 4k:gap-2",
+				"rounded-2xl border p-4 flex flex-col gap-1",
 				{
 					"bg-blue-50/50 border-blue-100 dark:bg-blue-900/10 dark:border-blue-800":
 						variant === "default",
@@ -38,14 +38,14 @@ export function StatBox({
 			)}
 			{...props}
 		>
-			<div className="flex items-center gap-2 text-sm 4k:text-2xl opacity-70 mb-1">
+			<div className="flex items-center gap-2 text-sm opacity-70 mb-1">
 				{icon}
-				<span className="font-medium uppercase tracking-wider text-xs 4k:text-xl">
+				<span className="font-medium uppercase tracking-wider text-xs">
 					{label}
 				</span>
 			</div>
 			<div
-				className={cn("text-2xl 4k:text-5xl font-bold tracking-tight", {
+				className={cn("text-2xl font-bold tracking-tight", {
 					"text-blue-600 dark:text-blue-400": variant === "default",
 					"text-emerald-600 dark:text-emerald-400": variant === "success",
 					"text-amber-600 dark:text-amber-400": variant === "warning",
@@ -56,9 +56,7 @@ export function StatBox({
 				{value}
 			</div>
 			{subValue && (
-				<div className="text-sm 4k:text-xl font-medium opacity-60 mt-1">
-					{subValue}
-				</div>
+				<div className="text-sm font-medium opacity-60 mt-1">{subValue}</div>
 			)}
 		</div>
 	);
diff --git a/components/organisms/journey-form.tsx b/components/organisms/journey-form.tsx
index f66c32c..9d0e2a6 100644
--- a/components/organisms/journey-form.tsx
+++ b/components/organisms/journey-form.tsx
@@ -86,10 +86,10 @@ export function JourneyForm({
 	const [showSettings, setShowSettings] = useState(false);
 
 	return (
-		<div className="bg-white dark:bg-neutral-900 rounded-3xl p-6 sm:p-8 shadow-xl shadow-neutral-200/50 dark:shadow-none border border-neutral-200 dark:border-neutral-800 4k:p-24 4k:rounded-[4rem]">
-			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 4k:mb-20">
+		<div className="bg-white dark:bg-neutral-900 rounded-3xl p-6 sm:p-8 shadow-xl shadow-neutral-200/50 dark:shadow-none border border-neutral-200 dark:border-neutral-800">
+			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
 				<div className="flex items-center gap-4">
-					<h2 className="text-2xl font-bold 4k:text-7xl">Sua Jornada</h2>
+					<h2 className="text-2xl font-bold">Sua Jornada</h2>
 					<button
 						type="button"
 						onClick={() => setShowSettings(!showSettings)}
@@ -99,17 +99,17 @@ export function JourneyForm({
 						className={`p-2 rounded-xl transition-colors ${showSettings ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-400"}`}
 					>
 						<Settings
-							className={`w-5 h-5 4k:w-10 4k:h-10 transition-transform duration-500 ${showSettings ? "rotate-90" : ""}`}
+							className={`w-5 h-5 transition-transform duration-500 ${showSettings ? "rotate-90" : ""}`}
 							aria-hidden="true"
 						/>
 					</button>
 				</div>
-				<div className="flex items-center gap-1 bg-neutral-100 dark:bg-neutral-800 p-1.5 rounded-2xl 4k:p-3 4k:rounded-[2rem]">
+				<div className="flex items-center gap-1 bg-neutral-100 dark:bg-neutral-800 p-1.5 rounded-2xl">
 					<button
 						type="button"
 						aria-pressed={!isManualExit}
 						onClick={() => onManualExitChange(false)}
-						className={`px-6 py-2.5 rounded-xl text-xs font-bold transition-all 4k:px-12 4k:py-6 4k:text-3xl 4k:rounded-3xl ${!isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-500" : "text-neutral-400 hover:text-neutral-600"}`}
+						className={`px-6 py-2.5 rounded-xl text-xs font-bold transition-all ${!isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-500" : "text-neutral-400 hover:text-neutral-600"}`}
 					>
 						AUTO
 					</button>
@@ -117,7 +117,7 @@ export function JourneyForm({
 						type="button"
 						aria-pressed={isManualExit}
 						onClick={() => onManualExitChange(true)}
-						className={`px-6 py-2.5 rounded-xl text-xs font-bold transition-all 4k:px-12 4k:py-6 4k:text-3xl 4k:rounded-3xl ${isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-500" : "text-neutral-400 hover:text-neutral-600"}`}
+						className={`px-6 py-2.5 rounded-xl text-xs font-bold transition-all ${isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-500" : "text-neutral-400 hover:text-neutral-600"}`}
 					>
 						MANUAL
 					</button>
@@ -129,22 +129,19 @@ export function JourneyForm({
 				isOpen={showSettings}
 				className="mb-8"
 			>
-				<div className="bg-neutral-50 dark:bg-neutral-800/30 p-6 rounded-2xl border border-neutral-100 dark:border-neutral-800/50 4k:p-12 4k:rounded-[2rem] space-y-6 4k:space-y-12">
+				<div className="bg-neutral-50 dark:bg-neutral-800/30 p-6 rounded-2xl border border-neutral-100 dark:border-neutral-800/50 space-y-6">
 					<div className="flex items-center justify-between gap-6">
 						<div className="flex-1">
-							<Label htmlFor="daily-journey" className="font-bold mb-2 4k:mb-4">
-								<Zap
-									className="w-4 h-4 text-emerald-500 4k:w-8 4k:h-8"
-									aria-hidden="true"
-								/>
+							<Label htmlFor="daily-journey" className="font-bold mb-2">
+								<Zap className="w-4 h-4 text-emerald-500" aria-hidden="true" />
 								Tempo de Trabalho Diário
 							</Label>
-							<p className="text-xs text-neutral-400 mb-4 4k:text-xl">
+							<p className="text-xs text-neutral-400 mb-4">
 								Define o tempo total de trabalho esperado por dia para o cálculo
 								de banco de horas.
 							</p>
 						</div>
-						<div className="w-32 4k:w-64">
+						<div className="w-32">
 							<MaskedInput
 								id="daily-journey"
 								placeholder="08:48"
@@ -155,12 +152,12 @@ export function JourneyForm({
 								onCommit={(duration) =>
 									onWorkMinutesChange(parseDuration(duration))
 								}
-								className="h-12 4k:h-24 rounded-xl text-center text-lg font-bold focus-visible:ring-emerald-500"
+								className="h-12 rounded-xl text-center text-lg font-bold focus-visible:ring-emerald-500"
 							/>
 						</div>
 					</div>
 
-					<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 4k:gap-12">
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
 						<FormField
 							id="first-tier-rate"
 							label="Adicional até 2h extras (%)"
@@ -168,7 +165,7 @@ export function JourneyForm({
 							min={0}
 							labelIcon={
 								<Percent
-									className="w-4 h-4 text-amber-500 4k:w-8 4k:h-8"
+									className="w-4 h-4 text-amber-500"
 									aria-hidden="true"
 								/>
 							}
@@ -183,10 +180,7 @@ export function JourneyForm({
 							type="number"
 							min={0}
 							labelIcon={
-								<Percent
-									className="w-4 h-4 text-rose-500 4k:w-8 4k:h-8"
-									aria-hidden="true"
-								/>
+								<Percent className="w-4 h-4 text-rose-500" aria-hidden="true" />
 							}
 							value={extraTierRate}
 							onChange={(event) =>
@@ -197,7 +191,7 @@ export function JourneyForm({
 				</div>
 			</CollapsiblePanel>
 
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 4k:gap-12 mb-8 4k:mb-16">
+			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
 				<DateTimeInput
 					label="Entrada"
 					icon={LogIn}
@@ -232,12 +226,12 @@ export function JourneyForm({
 					type="button"
 					aria-label="Resetar Horários"
 					onClick={onReset}
-					className="flex items-center gap-2 text-sm font-medium text-neutral-400 hover:text-emerald-500 transition-colors 4k:text-2xl 4k:gap-4"
+					className="flex items-center gap-2 text-sm font-medium text-neutral-400 hover:text-emerald-500 transition-colors"
 				>
-					<RotateCcw className="w-4 h-4 4k:w-8 4k:h-8" aria-hidden="true" />
+					<RotateCcw className="w-4 h-4" aria-hidden="true" />
 					Resetar Horários
 				</button>
-				<div className="text-[10px] text-neutral-300 uppercase tracking-widest font-bold 4k:text-xl">
+				<div className="text-[10px] text-neutral-300 uppercase tracking-widest font-bold">
 					WorkLoad
 				</div>
 			</div>
diff --git a/components/organisms/salary-calculator.tsx b/components/organisms/salary-calculator.tsx
index e5629d0..584f6c2 100644
--- a/components/organisms/salary-calculator.tsx
+++ b/components/organisms/salary-calculator.tsx
@@ -52,18 +52,18 @@ export function SalaryCalculator() {
 			className="selection:bg-blue-500/30"
 			main={
 				<>
-					<div className="bg-white dark:bg-neutral-900 rounded-3xl p-6 sm:p-8 shadow-xl shadow-neutral-200/50 dark:shadow-none border border-neutral-200 dark:border-neutral-800 4k:p-24 4k:rounded-[4rem]">
-						<div className="flex items-center gap-4 mb-8 4k:mb-20">
-							<div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-2xl 4k:p-6 4k:rounded-[2rem]">
+					<div className="bg-white dark:bg-neutral-900 rounded-3xl p-6 sm:p-8 shadow-xl shadow-neutral-200/50 dark:shadow-none border border-neutral-200 dark:border-neutral-800">
+						<div className="flex items-center gap-4 mb-8">
+							<div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-2xl">
 								<Calculator
-									className="w-6 h-6 text-blue-600 dark:text-blue-400 4k:w-12 4k:h-12"
+									className="w-6 h-6 text-blue-600 dark:text-blue-400"
 									aria-hidden="true"
 								/>
 							</div>
-							<h2 className="text-2xl font-bold 4k:text-7xl">Custo da Hora</h2>
+							<h2 className="text-2xl font-bold">Custo da Hora</h2>
 						</div>
 
-						<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 4k:gap-12 mb-8">
+						<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
 							<FormField
 								id="salario-bruto"
 								label="Salário Bruto (R$)"
@@ -80,7 +80,7 @@ export function SalaryCalculator() {
 								id="horas-mensais"
 								label="Carga Horária Mensal"
 								type="number"
-								icon={<Clock className="w-5 h-5 4k:w-8 4k:h-8" />}
+								icon={<Clock className="w-5 h-5" />}
 								placeholder="220"
 								value={monthlyHours || ""}
 								onChange={(event) =>
@@ -94,15 +94,13 @@ export function SalaryCalculator() {
 							onClick={() => setShowDetails(!showDetails)}
 							aria-expanded={showDetails}
 							aria-controls={DETAILS_PANEL_ID}
-							className="w-full flex items-center justify-between p-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors 4k:p-8"
+							className="w-full flex items-center justify-between p-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
 						>
-							<span className="font-medium 4k:text-3xl">
-								Impostos e Descontos
-							</span>
+							<span className="font-medium">Impostos e Descontos</span>
 							{showDetails ? (
-								<ChevronUp className="4k:w-8 4k:h-8" aria-hidden="true" />
+								<ChevronUp aria-hidden="true" />
 							) : (
-								<ChevronDown className="4k:w-8 4k:h-8" aria-hidden="true" />
+								<ChevronDown aria-hidden="true" />
 							)}
 						</button>
 
@@ -127,18 +125,18 @@ export function SalaryCalculator() {
 						</CollapsiblePanel>
 					</div>
 
-					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 4k:gap-8">
+					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 						<StatBox
 							label="Salário Líquido"
 							value={formatCurrency(stats.netSalary)}
-							icon={<Wallet className="w-4 h-4 4k:w-8 4k:h-8" />}
+							icon={<Wallet className="w-4 h-4" />}
 							variant="default"
 						/>
 						<StatBox
 							label="Total Recebido"
 							value={formatCurrency(stats.totalValue)}
 							subValue="Líquido + Extras"
-							icon={<TrendingUp className="w-4 h-4 4k:w-8 4k:h-8" />}
+							icon={<TrendingUp className="w-4 h-4" />}
 							variant="success"
 						/>
 						<StatBox
@@ -147,7 +145,7 @@ export function SalaryCalculator() {
 								stats.inss + stats.irrf + stats.totalExtraDeductions,
 							)}
 							subValue="INSS + IRRF + Outros"
-							icon={<TrendingDown className="w-4 h-4 4k:w-8 4k:h-8" />}
+							icon={<TrendingDown className="w-4 h-4" />}
 							variant="danger"
 						/>
 					</div>
@@ -161,23 +159,21 @@ export function SalaryCalculator() {
 					tone="blue"
 					footer={
 						<>
-							<p className="text-sm opacity-80 mb-2 4k:text-2xl 4k:mb-6">
-								Resumo Financeiro
-							</p>
-							<div className="grid grid-cols-2 gap-4 4k:gap-8">
+							<p className="text-sm opacity-80 mb-2">Resumo Financeiro</p>
+							<div className="grid grid-cols-2 gap-4">
 								<div>
-									<p className="text-xs opacity-60 uppercase font-bold 4k:text-xl">
+									<p className="text-xs opacity-60 uppercase font-bold">
 										Bruto
 									</p>
-									<p className="text-xl font-bold 4k:text-4xl">
+									<p className="text-xl font-bold">
 										{formatCurrency(grossSalary)}
 									</p>
 								</div>
 								<div>
-									<p className="text-xs opacity-60 uppercase font-bold 4k:text-xl">
+									<p className="text-xs opacity-60 uppercase font-bold">
 										Ganhos Extras
 									</p>
-									<p className="text-xl font-bold 4k:text-4xl">
+									<p className="text-xl font-bold">
 										+{formatCurrency(stats.totalExtraGains)}
 									</p>
 								</div>
@@ -185,7 +181,7 @@ export function SalaryCalculator() {
 						</>
 					}
 				>
-					<p className="mt-4 text-xl opacity-80 font-medium 4k:text-4xl">
+					<p className="mt-4 text-xl opacity-80 font-medium">
 						{formatCurrency(stats.minuteRate)} por minuto
 					</p>
 				</HeroPanel>
diff --git a/components/organisms/tax-details-panel.tsx b/components/organisms/tax-details-panel.tsx
index 3064682..2bcdb90 100644
--- a/components/organisms/tax-details-panel.tsx
+++ b/components/organisms/tax-details-panel.tsx
@@ -45,8 +45,8 @@ export function TaxDetailsPanel({
 		rawValue ? parseCurrency(rawValue) : null;
 
 	return (
-		<div className="space-y-6 4k:space-y-12 bg-neutral-50 dark:bg-neutral-800/30 p-6 rounded-2xl 4k:p-12 4k:rounded-[2rem]">
-			<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 4k:gap-12">
+		<div className="space-y-6 bg-neutral-50 dark:bg-neutral-800/30 p-6 rounded-2xl">
+			<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
 				<FormField
 					id="inss-manual"
 					label="INSS (R$)"
diff --git a/components/organisms/work-calculator.tsx b/components/organisms/work-calculator.tsx
index 728e703..cc1eaca 100644
--- a/components/organisms/work-calculator.tsx
+++ b/components/organisms/work-calculator.tsx
@@ -237,7 +237,7 @@ export function WorkCalculator() {
 					value={timerData.time}
 					tone={timerData.isOvertime ? "rose" : "emerald"}
 					badge={
-						<span className="bg-white/20 px-3 py-1 lg:px-4 lg:py-1.5 rounded-full text-xs lg:text-sm font-bold tabular-nums 4k:text-2xl 4k:px-8 4k:py-3">
+						<span className="bg-white/20 px-3 py-1 lg:px-4 lg:py-1.5 rounded-full text-xs lg:text-sm font-bold tabular-nums">
 							{currentTime === null
 								? PLACEHOLDER_CLOCK
 								: format(currentTime, "HH:mm:ss")}
@@ -246,16 +246,16 @@ export function WorkCalculator() {
 					footer={
 						<div className="flex items-center justify-between gap-4">
 							<div>
-								<div className="flex items-center gap-2 opacity-80 mb-1 4k:gap-4">
+								<div className="flex items-center gap-2 opacity-80 mb-1">
 									<LogOut
-										className="w-4 h-4 lg:w-5 lg:h-5 4k:w-10 4k:h-10"
+										className="w-4 h-4 lg:w-5 lg:h-5"
 										aria-hidden="true"
 									/>
-									<span className="text-xs lg:text-sm uppercase font-bold lg:font-medium 4k:text-2xl">
+									<span className="text-xs lg:text-sm uppercase font-bold lg:font-medium">
 										Saída {isManualExit ? "Real" : "Sugerida"}
 									</span>
 								</div>
-								<p className="text-3xl lg:text-5xl font-black 4k:text-8xl">
+								<p className="text-3xl lg:text-5xl font-black">
 									{timerData.exitLabel}
 								</p>
 							</div>
@@ -272,14 +272,14 @@ export function WorkCalculator() {
 					}
 				>
 					<div className="space-y-1.5 lg:space-y-2">
-						<div className="h-1.5 lg:h-2 w-full bg-white/20 rounded-full overflow-hidden 4k:h-4">
+						<div className="h-1.5 lg:h-2 w-full bg-white/20 rounded-full overflow-hidden">
 							<motion.div
 								initial={{ width: 0 }}
 								animate={{ width: `${timerData.progress}%` }}
 								className="h-full bg-white"
 							/>
 						</div>
-						<div className="flex justify-between text-[10px] lg:text-xs font-bold opacity-60 4k:text-xl">
+						<div className="flex justify-between text-[10px] lg:text-xs font-bold opacity-60">
 							<span>ENTRADA {timerData.entryLabel}</span>
 							<span>SAÍDA {timerData.exitLabel}</span>
 						</div>
diff --git a/components/organisms/work-summary.tsx b/components/organisms/work-summary.tsx
index 04b397f..5768569 100644
--- a/components/organisms/work-summary.tsx
+++ b/components/organisms/work-summary.tsx
@@ -34,32 +34,26 @@ export function WorkSummary({
 	return (
 		<div className="flex justify-center">
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl">
-				<div className="bg-white dark:bg-neutral-900 p-8 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-sm 4k:p-16 text-center flex flex-col items-center justify-center">
+				<div className="bg-white dark:bg-neutral-900 p-8 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-sm text-center flex flex-col items-center justify-center">
 					<div className="flex items-center justify-center gap-3 mb-6">
-						<h3 className="text-lg font-bold 4k:text-4xl">Balanço do Dia</h3>
+						<h3 className="text-lg font-bold">Balanço do Dia</h3>
 						<div
-							className={`p-2 rounded-xl 4k:p-4 ${isPositiveBalance ? "bg-emerald-500/10 text-emerald-500" : "bg-rose-500/10 text-rose-500"}`}
+							className={`p-2 rounded-xl ${isPositiveBalance ? "bg-emerald-500/10 text-emerald-500" : "bg-rose-500/10 text-rose-500"}`}
 						>
 							{isPositiveBalance ? (
-								<TrendingUp
-									className="w-5 h-5 4k:w-10 4k:h-10"
-									aria-hidden="true"
-								/>
+								<TrendingUp className="w-5 h-5" aria-hidden="true" />
 							) : (
-								<TrendingDown
-									className="w-5 h-5 4k:w-10 4k:h-10"
-									aria-hidden="true"
-								/>
+								<TrendingDown className="w-5 h-5" aria-hidden="true" />
 							)}
 						</div>
 					</div>
 					<div className="space-y-1">
 						<p
-							className={`text-4xl font-black tracking-tight 4k:text-7xl ${isPositiveBalance ? "text-emerald-500" : "text-rose-500"}`}
+							className={`text-4xl font-black tracking-tight ${isPositiveBalance ? "text-emerald-500" : "text-rose-500"}`}
 						>
 							{formatBalance(balanceMinutes)}
 						</p>
-						<p className="text-sm text-neutral-500 4k:text-2xl">
+						<p className="text-sm text-neutral-500">
 							{isPositiveBalance
 								? "Horas extras acumuladas"
 								: "Horas em débito hoje"}
@@ -67,11 +61,9 @@ export function WorkSummary({
 					</div>
 				</div>
 
-				<div className="bg-white dark:bg-neutral-900 p-8 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-sm 4k:p-16 text-center flex flex-col items-center justify-center">
-					<h3 className="text-lg font-bold mb-6 4k:text-4xl">
-						Extras e Adicionais
-					</h3>
-					<div className="w-full max-w-[240px] mx-auto space-y-4 4k:space-y-8 4k:max-w-none">
+				<div className="bg-white dark:bg-neutral-900 p-8 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-sm text-center flex flex-col items-center justify-center">
+					<h3 className="text-lg font-bold mb-6">Extras e Adicionais</h3>
+					<div className="w-full max-w-[240px] mx-auto space-y-4">
 						<DurationRow
 							icon={Zap}
 							iconClassName="text-amber-500"
diff --git a/components/templates/calculator-layout.tsx b/components/templates/calculator-layout.tsx
index 0765a9c..a77d7b4 100644
--- a/components/templates/calculator-layout.tsx
+++ b/components/templates/calculator-layout.tsx
@@ -17,19 +17,19 @@ export function CalculatorLayout({
 }: CalculatorLayoutProps) {
 	return (
 		<div className={cn("w-full", className)}>
-			<div className="max-w-7xl 2xl:max-w-[1600px] 4k:max-w-[2400px] mx-auto">
-				<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 4k:gap-24 items-start">
+			<div className="max-w-7xl 2xl:max-w-[1600px] mx-auto">
+				<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
 					<motion.div
 						initial={{ opacity: 0, y: 20 }}
 						animate={{ opacity: 1, y: 0 }}
-						className="lg:col-span-7 space-y-8 4k:space-y-20"
+						className="lg:col-span-7 space-y-8"
 					>
 						{main}
 					</motion.div>
 					<motion.div
 						initial={{ opacity: 0, x: 20 }}
 						animate={{ opacity: 1, x: 0 }}
-						className="order-first lg:order-none lg:col-span-5 lg:sticky lg:top-32 4k:top-64"
+						className="order-first lg:order-none lg:col-span-5 lg:sticky lg:top-32"
 					>
 						{aside}
 					</motion.div>

From 11fad1d3df4897940f4372cd34f08c288733e7a3 Mon Sep 17 00:00:00 2001
From: Rafael Martins <rafael271alves@gmail.com>
Date: Sat, 1 Aug 2026 17:57:15 -0300
Subject: [PATCH 2/3] test(e2e): cover large viewports so the scale-up cannot
 come back
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Playwright ran Desktop Chrome at 1280 plus two phones, so nothing ever
exercised the widths the issue was about. Added a QHD (2560x1440) and a 4K
(3840x2160) project — QHD is where the removed breakpoint actually fired.

The new spec asserts the page never scrolls horizontally, that no control
ends up outside the viewport, and that headings stay under 40px. That last
one is the direct regression guard: with the `4k:` overrides in place the
`h2` measured 72px.

Adding the two projects surfaced a test that had never once executed.
`should show side ads on desktop after delay` requires a viewport of at
least 1536px, and no project was that wide — so it had always taken its
early-exit path. Running for the first time, it failed: the workflow sets
`NEXT_PUBLIC_ENABLE_ADS` but never set `NEXT_PUBLIC_ADSENSE_ID`, and
`AdManager` renders nothing without an ad client. Supplying a placeholder
id makes the assertion real.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .github/workflows/ci.yml     |  1 +
 playwright.config.ts         | 14 +++++++++++
 tests/e2e/responsive.spec.ts | 49 ++++++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 tests/e2e/responsive.spec.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c2a347b..6effb01 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -79,6 +79,7 @@ jobs:
     env:
       NEXT_PUBLIC_GA_ID: "G-TEST12345"
       NEXT_PUBLIC_ENABLE_ADS: "true"
+      NEXT_PUBLIC_ADSENSE_ID: "ca-pub-0000000000000000"
     steps:
       - uses: actions/checkout@v6
 
diff --git a/playwright.config.ts b/playwright.config.ts
index c6135e4..8536e4d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -38,6 +38,20 @@ export default defineConfig({
 			name: "chromium",
 			use: { ...devices["Desktop Chrome"] },
 		},
+		{
+			name: "desktop-qhd",
+			use: {
+				...devices["Desktop Chrome"],
+				viewport: { width: 2560, height: 1440 },
+			},
+		},
+		{
+			name: "desktop-4k",
+			use: {
+				...devices["Desktop Chrome"],
+				viewport: { width: 3840, height: 2160 },
+			},
+		},
 		{
 			name: "Mobile Chrome",
 			use: { ...devices["Pixel 5"] },
diff --git a/tests/e2e/responsive.spec.ts b/tests/e2e/responsive.spec.ts
new file mode 100644
index 0000000..8a975e3
--- /dev/null
+++ b/tests/e2e/responsive.spec.ts
@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+const MAX_HEADING_FONT_SIZE_PX = 40;
+
+test.describe("Responsive layout", () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto("/");
+	});
+
+	test("never scrolls horizontally", async ({ page }) => {
+		const overflow = await page.evaluate(() => {
+			const root = document.documentElement;
+			return root.scrollWidth - root.clientWidth;
+		});
+
+		expect(overflow).toBeLessThanOrEqual(0);
+	});
+
+	test("keeps every control reachable inside the viewport", async ({ page }) => {
+		const unreachableControls = await page.evaluate(() =>
+			[...document.querySelectorAll("main button, main input, main a")]
+				.filter((control) => {
+					const bounds = control.getBoundingClientRect();
+					if (bounds.width === 0) return false;
+					return bounds.right > window.innerWidth + 1 || bounds.left < -1;
+				})
+				.map((control) => control.outerHTML.slice(0, 120)),
+		);
+
+		expect(unreachableControls).toEqual([]);
+	});
+
+	test("keeps headings at a readable size instead of scaling them up", async ({
+		page,
+	}) => {
+		const fontSizes = await page
+			.locator("h1, h2")
+			.evaluateAll((headings) =>
+				headings.map((heading) =>
+					Number.parseFloat(getComputedStyle(heading).fontSize),
+				),
+			);
+
+		expect(fontSizes.length).toBeGreaterThan(0);
+		for (const fontSize of fontSizes) {
+			expect(fontSize).toBeLessThanOrEqual(MAX_HEADING_FONT_SIZE_PX);
+		}
+	});
+});

From eed486336ceef879392df0d581c44f642a47a078 Mon Sep 17 00:00:00 2001
From: Rafael Martins <rafael271alves@gmail.com>
Date: Sat, 1 Aug 2026 18:07:55 -0300
Subject: [PATCH 3/3] style: format the responsive spec

Biome wants the destructured parameter broken across lines. Without it
`biome ci .` fails on this branch, which would have taken the whole checks
job down.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 tests/e2e/responsive.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/responsive.spec.ts b/tests/e2e/responsive.spec.ts
index 8a975e3..83ab9cc 100644
--- a/tests/e2e/responsive.spec.ts
+++ b/tests/e2e/responsive.spec.ts
@@ -16,7 +16,9 @@ test.describe("Responsive layout", () => {
 		expect(overflow).toBeLessThanOrEqual(0);
 	});
 
-	test("keeps every control reachable inside the viewport", async ({ page }) => {
+	test("keeps every control reachable inside the viewport", async ({
+		page,
+	}) => {
 		const unreachableControls = await page.evaluate(() =>
 			[...document.querySelectorAll("main button, main input, main a")]
 				.filter((control) => {