diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 0a1590bfbb909..89e43f0c651e9 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -25,7 +25,6 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-icons": "^5.7.0",
-    "react-loading-skeleton": "^3.5.0",
     "react-redux": "^9.3.0",
     "react-spinners": "^0.17.0",
     "react-toastify": "^11.1.0",
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 14ae121a249c8..bb35398d922a9 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -29,6 +29,7 @@ Override background color in dark mode with GitHub's dark mode background color.
   --transition-fast: 100ms;
   /* Slower, deliberate fade for large surfaces during a theme switch. */
   --transition-surface: 300ms;
+  --font-size: 16px;
 }
 
 /*
@@ -110,6 +111,28 @@ Override background color in dark mode with GitHub's dark mode background color.
     outline: 0;
     border: var(--color-primary) solid 1px;
   }
+
+  /* daisyUI's disabled border matches its own background and its text sits at 2.5:1. */
+  .input:is(:disabled, [disabled]) {
+    border-color: color-mix(
+      in oklab,
+      var(--color-base-content) 20%,
+      transparent
+    );
+
+    &:is(input),
+    & :is(input) {
+      color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+    }
+  }
+
+  /*
+   * `.validator` makes `:user-valid` fields green. We only want to color the error state,
+   * so restore `--input-color` to the value `.input` uses by default.
+   */
+  .validator:user-valid {
+    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+  }
 }
 
 /* Respect users who prefer reduced motion. */
diff --git a/apps/frontend/src/wizard/Home/stages/Customize.tsx b/apps/frontend/src/wizard/Home/stages/Customize.tsx
index e43a2bdeeb800..21a9ef97d99a9 100644
--- a/apps/frontend/src/wizard/Home/stages/Customize.tsx
+++ b/apps/frontend/src/wizard/Home/stages/Customize.tsx
@@ -414,7 +414,7 @@ export function CustomizeStage({
         </div>
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
-        <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-[calc(var(--sl-nav-height)+8.5rem)]">
+        <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-[calc(var(--sl-nav-height)+var(--wizard-progress-height,6rem)+2rem)]">
           <CardImage card={card} stage={2} />
         </div>
       </div>
diff --git a/apps/frontend/src/wizard/Home/stages/Display.tsx b/apps/frontend/src/wizard/Home/stages/Display.tsx
index e3bb981831679..1f87526791200 100644
--- a/apps/frontend/src/wizard/Home/stages/Display.tsx
+++ b/apps/frontend/src/wizard/Home/stages/Display.tsx
@@ -101,7 +101,7 @@ export function DisplayStage({
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div
-          className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-[calc(var(--sl-nav-height)+8.5rem)] rounded p-4"
+          className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-[calc(var(--sl-nav-height)+var(--wizard-progress-height,6rem)+2rem)] rounded p-4"
           style={{ background: getCardThemeBackdrop(theme, isDark) }}
         >
           <CardImage
diff --git a/apps/frontend/src/wizard/Home/stages/Login/LoginAccountDeleteModal.tsx b/apps/frontend/src/wizard/Home/stages/Login/LoginAccountDeleteModal.tsx
index e94e374522c61..5f879b20ca576 100644
--- a/apps/frontend/src/wizard/Home/stages/Login/LoginAccountDeleteModal.tsx
+++ b/apps/frontend/src/wizard/Home/stages/Login/LoginAccountDeleteModal.tsx
@@ -1,33 +1,8 @@
-import { useEffect, useRef } from "react";
-import type { JSX, RefObject } from "react";
-import { createPortal } from "react-dom";
+import { useId } from "react";
+import type { JSX } from "react";
 
 import { Button } from "../../../components/Generic/Button";
 
-function useOutsideAlerter(
-  ref: RefObject<HTMLElement | null>,
-  action: () => void,
-) {
-  useEffect(() => {
-    /**
-     * Alert if clicked on outside of element
-     */
-    function handleClickOutside(event: MouseEvent) {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        action();
-      }
-    }
-
-    // Bind the event listener
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [action, ref]);
-}
-
 interface LoginAccountDeleteModalProps {
   onClose: () => void;
   onConfirm: () => void;
@@ -38,36 +13,44 @@ export function LoginAccountDeleteModal(
 ): JSX.Element {
   const { onConfirm, onClose } = props;
 
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  useOutsideAlerter(wrapperRef, onClose);
-
-  return createPortal(
-    // `wizard` because this mounts on `body`, outside the element the app's styles are scoped to.
-    <div className="wizard fixed left-0 top-0 w-full h-full bg-black/50 z-50">
-      <div className="w-full h-full flex justify-center items-center">
-        <div
-          className="w-96 p-4 bg-base-100 rounded-sm border-2 border-base-300 text-base-content"
-          ref={wrapperRef}
-        >
-          <p className="mb-1 text-2xl">Delete Account</p>
-          <hr />
-          <br />
-          <p>
-            Are you sure you want to delete your account from GitHub Stats
-            Extended?
-          </p>
-          <br />
-          <div className="flex flex-wrap">
-            <Button variant="primary" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button variant="error" className="ml-auto" onClick={onConfirm}>
-              Delete Account
-            </Button>
-          </div>
+  const titleId = useId();
+
+  return (
+    <dialog
+      // React re-attaches an inline ref every render, and reopening a dialog throws.
+      ref={(node) => {
+        if (node !== null && !node.open) {
+          node.showModal();
+        }
+      }}
+      className="modal"
+      aria-labelledby={titleId}
+      onClose={onClose}
+    >
+      <div className="modal-box w-96 text-base-content">
+        <p id={titleId} className="mb-1 text-2xl">
+          Delete Account
+        </p>
+        <hr />
+        <br />
+        <p>
+          Are you sure you want to delete your account from GitHub Stats
+          Extended?
+        </p>
+        <br />
+        <div className="flex flex-wrap">
+          <Button variant="primary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="error" className="ml-auto" onClick={onConfirm}>
+            Delete Account
+          </Button>
         </div>
       </div>
-    </div>,
-    document.body,
+      {/* daisyUI's backdrop: submitting it closes the dialog, so a click outside dismisses. */}
+      <form method="dialog" className="modal-backdrop">
+        <button>Close</button>
+      </form>
+    </dialog>
   );
 }
diff --git a/apps/frontend/src/wizard/Home/stages/Login/LoginAccountManagement.tsx b/apps/frontend/src/wizard/Home/stages/Login/LoginAccountManagement.tsx
index d5792a6b578e8..4120c24e9a98e 100644
--- a/apps/frontend/src/wizard/Home/stages/Login/LoginAccountManagement.tsx
+++ b/apps/frontend/src/wizard/Home/stages/Login/LoginAccountManagement.tsx
@@ -49,7 +49,7 @@ export function LoginAccountManagement(): JSX.Element {
   };
 
   return (
-    <LoginBox isOpaque={showDeleteModal}>
+    <LoginBox>
       <div className="mb-4">
         {privateAccess ? (
           <div className="flex items-center gap-4">
diff --git a/apps/frontend/src/wizard/Home/stages/Login/LoginBox.tsx b/apps/frontend/src/wizard/Home/stages/Login/LoginBox.tsx
index c69bfb82a6c5b..b853eb9de97ab 100644
--- a/apps/frontend/src/wizard/Home/stages/Login/LoginBox.tsx
+++ b/apps/frontend/src/wizard/Home/stages/Login/LoginBox.tsx
@@ -1,20 +1,17 @@
-import { clsx } from "clsx";
 import type { JSX, ReactNode } from "react";
 
 import { LoginBoxDemoCards } from "./LoginBoxDemoCards";
 
 interface LoginBoxProps {
   children: ReactNode;
-
-  isOpaque?: boolean;
 }
 
 export function LoginBox(props: LoginBoxProps): JSX.Element {
-  const { children, isOpaque = false } = props;
+  const { children } = props;
 
   return (
     <div className="h-full flex flex-wrap">
-      <div className={clsx("md:flex", { "opacity-25": isOpaque })}>
+      <div className="md:flex">
         <div className="lg:block lg:w-3/5 lg:p-8">
           <div className="bg-base-300 rounded-sm w-full h-full m-auto p-8 shadow lg:h-auto">
             {children}
diff --git a/apps/frontend/src/wizard/components/Card/SvgInline.tsx b/apps/frontend/src/wizard/components/Card/SvgInline.tsx
index a42692132773c..2378f561e3135 100644
--- a/apps/frontend/src/wizard/components/Card/SvgInline.tsx
+++ b/apps/frontend/src/wizard/components/Card/SvgInline.tsx
@@ -2,8 +2,6 @@ import { loadConfigFromEnv } from "@stats-organization/github-readme-stats-core"
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
 import type { JSX } from "react";
-import Skeleton from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
 
 import { setShouldMock } from "../../../axios-override.js";
 import {
@@ -103,13 +101,17 @@ export function SvgInline(props: SvgInlineProps): JSX.Element {
   if (forceLoading || !loaded) {
     if (compact) {
       return (
-        <Skeleton key="compactSkeleton" style={{ paddingBottom: "58%" }} />
+        <div
+          key="compactSkeleton"
+          className="skeleton w-full"
+          style={{ paddingBottom: "58%" }}
+        />
       );
     }
     // maximum dimensions of cards in SelectCard stage
     return (
-      <div className=" w-[450px]">
-        <Skeleton key="skeleton" className="h-[245px]" />
+      <div className="w-[450px]">
+        <div key="skeleton" className="skeleton h-[245px] w-full" />
       </div>
     );
   }
diff --git a/apps/frontend/src/wizard/components/Generic/Select.tsx b/apps/frontend/src/wizard/components/Generic/Select.tsx
index c7a17bc2cb5bf..8acb92bfaaf8f 100644
--- a/apps/frontend/src/wizard/components/Generic/Select.tsx
+++ b/apps/frontend/src/wizard/components/Generic/Select.tsx
@@ -12,6 +12,8 @@ interface SelectProps {
   options: Array<SelectOption>;
   selectedOption: SelectOption;
 
+  "aria-labelledby"?: string;
+
   className?: string;
   disabled?: boolean;
 
@@ -24,9 +26,11 @@ export function Select({
   onOptionChange,
   disabled,
   className,
+  "aria-labelledby": ariaLabelledBy,
 }: SelectProps): JSX.Element {
   return (
     <select
+      aria-labelledby={ariaLabelledBy}
       className={clsx("text-base select select-sm w-40 mt-4", className)}
       value={selectedOption.value}
       onChange={(e) => {
diff --git a/apps/frontend/src/wizard/components/Home/LanguagesLayoutSection.tsx b/apps/frontend/src/wizard/components/Home/LanguagesLayoutSection.tsx
index 80f170568a272..9f99890f40bfa 100644
--- a/apps/frontend/src/wizard/components/Home/LanguagesLayoutSection.tsx
+++ b/apps/frontend/src/wizard/components/Home/LanguagesLayoutSection.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { JSX } from "react";
 
 import { Select } from "../Generic/Select";
@@ -55,10 +56,13 @@ export function LanguagesLayoutSection({
   selectedLanguageLayoutOption,
   onLanguageLayoutOptionChange,
 }: LanguagesLayoutSectionProps): JSX.Element {
+  const titleId = useId();
+
   return (
-    <Section title="Card Layout">
+    <Section title="Card Layout" titleId={titleId}>
       <p>Select a card layout.</p>
       <Select
+        aria-labelledby={titleId}
         options={options}
         selectedOption={selectedLanguageLayoutOption}
         onOptionChange={onLanguageLayoutOptionChange}
diff --git a/apps/frontend/src/wizard/components/Home/NumericSection.tsx b/apps/frontend/src/wizard/components/Home/NumericSection.tsx
index c69b4b4f50d95..deb0455fe9a14 100644
--- a/apps/frontend/src/wizard/components/Home/NumericSection.tsx
+++ b/apps/frontend/src/wizard/components/Home/NumericSection.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { JSX, ReactNode } from "react";
 
 import { useDebouncedField } from "../../hooks/useDebouncedField";
@@ -27,6 +28,7 @@ export function NumericSection({
   disabled = false,
   placeholder,
 }: NumericSectionProps): JSX.Element {
+  const titleId = useId();
   const { inputValue, setInputValue } = useDebouncedField({
     value,
     onValueChange,
@@ -34,11 +36,12 @@ export function NumericSection({
   });
 
   return (
-    <Section title={title}>
+    <Section title={title} titleId={titleId}>
       <p>{description}</p>
       <input
+        aria-labelledby={titleId}
         type="number"
-        className="border border-base-content/20 rounded px-2 py-1 mt-2 w-1/4 bg-base-100"
+        className="input validator mt-2 w-1/4"
         value={inputValue}
         onChange={(e) => {
           setInputValue(e.target.value);
@@ -49,6 +52,14 @@ export function NumericSection({
         disabled={disabled}
         placeholder={placeholder}
       />
+      {/*
+       * Hidden until the field is `:user-invalid`, then shown in the error color.
+       * The hint reserves its box either way and adds a gap no other `Section` has.
+       * Take that back out of `Section`'s `pb-12` with `h-0`.
+       */}
+      <p className="validator-hint h-0">
+        Enter a number between {min} and {max}.
+      </p>
     </Section>
   );
 }
diff --git a/apps/frontend/src/wizard/components/Home/Progress.tsx b/apps/frontend/src/wizard/components/Home/Progress.tsx
index 6e9b9def16cbe..55a07332bf2f6 100644
--- a/apps/frontend/src/wizard/components/Home/Progress.tsx
+++ b/apps/frontend/src/wizard/components/Home/Progress.tsx
@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
 import type { JSX, MouseEventHandler } from "react";
 import {
   FaArrowLeft as LeftArrowIcon,
@@ -60,9 +61,38 @@ export function ProgressBar({
   const leftDisabled = currItemIndex === 0;
   const rightDisabled = currItemIndex === items.length - 1;
 
+  const barRef = useRef<HTMLDivElement | null>(null);
+
+  /*
+   * The bar resizes because the step labels wrap, so a panel stacking under it cannot use a fixed offset.
+   * Publish the measured height instead; `Customize` and `Display` pin their card against it.
+   */
+  useEffect(() => {
+    const bar = barRef.current;
+    if (bar === null) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      document.documentElement.style.setProperty(
+        "--wizard-progress-height",
+        `${bar.getBoundingClientRect().height}px`,
+      );
+    });
+    observer.observe(bar);
+
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.removeProperty("--wizard-progress-height");
+    };
+  }, []);
+
   return (
     // The site header is fixed, so the bar parks directly under it rather than at the viewport top.
-    <div className="w-full flex items-center sticky top-[var(--sl-nav-height)] bg-base-300 z-50 pt-3 pb-1 px-1 md:px-20 shadow-md">
+    <div
+      ref={barRef}
+      className="w-full flex items-center sticky top-[var(--sl-nav-height)] bg-base-300 z-50 pt-3 pb-1 px-1 md:px-20 shadow-md"
+    >
       <button
         type="button"
         aria-label="Previous step"
diff --git a/apps/frontend/src/wizard/components/Home/Section.tsx b/apps/frontend/src/wizard/components/Home/Section.tsx
index c7d35a1810d6b..a9ca698fbb19b 100644
--- a/apps/frontend/src/wizard/components/Home/Section.tsx
+++ b/apps/frontend/src/wizard/components/Home/Section.tsx
@@ -4,9 +4,15 @@ import { HiOutlineLightningBolt as LightningIcon } from "react-icons/hi";
 interface SectionProps {
   title: string;
   children: ReactNode;
+  /** Set when a control names itself after the title with `aria-labelledby`. */
+  titleId?: string;
 }
 
-export function Section({ title, children }: SectionProps): JSX.Element {
+export function Section({
+  title,
+  children,
+  titleId,
+}: SectionProps): JSX.Element {
   return (
     <div className="flex relative pb-12">
       <div className="h-full w-10 absolute inset-0 flex items-center justify-center">
@@ -17,7 +23,10 @@ export function Section({ title, children }: SectionProps): JSX.Element {
       </div>
 
       <div className="flex-grow pl-4">
-        <h2 className="font-medium title-font text-sm text-base-content mb-1 tracking-wider">
+        <h2
+          id={titleId}
+          className="font-medium title-font text-sm text-base-content mb-1 tracking-wider"
+        >
           {title}
         </h2>
         {children}
diff --git a/apps/frontend/src/wizard/components/Home/StatsRankSection.tsx b/apps/frontend/src/wizard/components/Home/StatsRankSection.tsx
index b6b5e875135a8..5a8500ab003e3 100644
--- a/apps/frontend/src/wizard/components/Home/StatsRankSection.tsx
+++ b/apps/frontend/src/wizard/components/Home/StatsRankSection.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { JSX } from "react";
 
 import { Select } from "../Generic/Select";
@@ -28,10 +29,13 @@ export function StatsRankSection({
   selectedOption,
   onOptionChange,
 }: StatsRankSectionProps): JSX.Element {
+  const titleId = useId();
+
   return (
-    <Section title="Progress Style">
+    <Section title="Progress Style" titleId={titleId}>
       <p>Select a progress style.</p>
       <Select
+        aria-labelledby={titleId}
         options={options}
         selectedOption={selectedOption}
         onOptionChange={onOptionChange}
diff --git a/apps/frontend/src/wizard/components/Home/TextSection.tsx b/apps/frontend/src/wizard/components/Home/TextSection.tsx
index 33e21b9e89522..fe922c59e72b6 100644
--- a/apps/frontend/src/wizard/components/Home/TextSection.tsx
+++ b/apps/frontend/src/wizard/components/Home/TextSection.tsx
@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import { useId } from "react";
 import type { ClipboardEventHandler, JSX, ReactNode } from "react";
 
 import { useDebouncedField } from "../../hooks/useDebouncedField";
@@ -26,6 +26,7 @@ export function TextSection({
   placeholder,
   onPaste,
 }: TextSectionProps): JSX.Element {
+  const titleId = useId();
   const { inputValue, setInputValue } = useDebouncedField({
     value,
     onValueChange,
@@ -33,14 +34,12 @@ export function TextSection({
   });
 
   return (
-    <Section title={title}>
+    <Section title={title} titleId={titleId}>
       <p>{description}</p>
       <input
+        aria-labelledby={titleId}
         type="text"
-        className={clsx(
-          "border border-base-content/20 rounded px-2 py-1 mt-2 w-3/4 min-w-48 max-w-xl",
-          disabled ? "cursor-not-allowed bg-base-200" : "bg-base-100",
-        )}
+        className="input mt-2 w-3/4 min-w-48 max-w-xl"
         value={inputValue}
         onChange={(e) => {
           setInputValue(e.target.value);
diff --git a/apps/frontend/src/wizard/components/Home/WakatimeLayoutSection.tsx b/apps/frontend/src/wizard/components/Home/WakatimeLayoutSection.tsx
index 4b83bb2face4c..c3f23d861b4df 100644
--- a/apps/frontend/src/wizard/components/Home/WakatimeLayoutSection.tsx
+++ b/apps/frontend/src/wizard/components/Home/WakatimeLayoutSection.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { JSX } from "react";
 
 import { Select } from "../Generic/Select";
@@ -37,10 +38,13 @@ export function WakatimeLayoutSection({
   selectedOption,
   onOptionChange,
 }: WakatimeLayoutSectionProps): JSX.Element {
+  const titleId = useId();
+
   return (
-    <Section title="Card Layout">
+    <Section title="Card Layout" titleId={titleId}>
       <p>Select a card layout.</p>
       <Select
+        aria-labelledby={titleId}
         options={options}
         selectedOption={selectedOption}
         onOptionChange={onOptionChange}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b52a2d7bd9244..302ceae0893b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,9 +149,6 @@ importers:
       react-icons:
         specifier: ^5.7.0
         version: 5.7.0(react@19.2.8)
-      react-loading-skeleton:
-        specifier: ^3.5.0
-        version: 3.5.0(react@19.2.8)
       react-redux:
         specifier: ^9.3.0
         version: 9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
@@ -3754,11 +3751,6 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-loading-skeleton@3.5.0:
-    resolution: {integrity: sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==}
-    peerDependencies:
-      react: '>=16.8.0'
-
   react-redux@9.3.0:
     resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
     peerDependencies:
@@ -8468,10 +8460,6 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-loading-skeleton@3.5.0(react@19.2.8):
-    dependencies:
-      react: 19.2.8
-
   react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6