@xingwangzhe/stalux 1.39.0 → 1.39.2

package/README.md

@@ -20,7 +20,7 @@ Code blocks default to the single `dark-plus` theme, with system color-scheme sw
 
 Route changes automatically show a 2px accent-colored progress bar at the top of the viewport, with no configuration. Its length follows actual milestones, with slow visual growth toward a bounded ceiling while waiting: loading begins, document/font preparation finishes, the DOM swaps, and page scripts finish; completion waits for the visual transition as well. It only reaches the end when loading and the transition both complete, and does not represent download/time percentages. It handles superseded or canceled navigation, history traversal, and reduced motion without additional requests or telemetry.
 
-The sticky header stays at the top while the body grows with long content. Route transitions use one content snapshot with a short crossfade and a stationary header. Nested titles, sidebars and paragraphs no longer create separate snapshots, reducing rasterization and compositing work on mobile devices. Content, lightboxes, search, comments and analytics keep their existing behavior.
+The sticky header stays at the top while the body grows with long content. Route transitions use a 100ms native Web Animations API fade on the new content, with the persisted header and footer stationary. Page-sized View Transition snapshots and geometry interpolation are disabled; Astro still handles document preparation, history, scroll restoration and scripts. Progress and background updates wait for the real content animation to finish. Reduced motion and browser-provided history gestures skip this extra animation. Navigation batches layout reads in one frame and carries the persisted header's measured dimensions across swaps, reducing style recalculation, rasterization and compositing work on mobile devices. Content, lightboxes, search, comments and analytics keep their existing behavior.
 
 ---
 
@@ -195,11 +195,11 @@ id: head
 bingClarityId: "YOUR_CLARITY_PROJECT_ID"
 ```
 
-Google Analytics, Clarity, and Umami use low-priority native asynchronous scripts. Each SDK loads once per session, and failures do not block reading or navigation. Vercount rebinds visible counters after each `astro:page-load`. GA sends explicit pageviews. Umami disables automatic pageviews while retaining click tracking, capturing each page's URL, title, and referrer before the SDK resolves so rapid navigation cannot mix visits. An existing legacy Partytown session performs one full reload when it encounters the new runtime to prevent duplicate listeners and tracking.
+Google Analytics, Clarity, and Umami use low-priority native asynchronous scripts. Each SDK loads once per session, and failures do not block reading or navigation. Vercount rebinds visible counters after each `astro:page-load`. GA captures each URL, title, and referrer, then sends pageviews in visit order through separate background tasks after the native transition releases rendering, the content animation is installed and a paint has been yielded. A bounded timer handles task starvation; hiding or leaving the document flushes pending views immediately. The SDK still runs on the main thread; this scheduling reduces synchronous work on the route's first frame. Umami disables automatic pageviews while retaining click tracking and captures page information before the SDK resolves so rapid navigation cannot mix visits. An existing older runtime or legacy Partytown session performs one full reload when it encounters the new runtime to prevent duplicate listeners and tracking.
 
 For Google Analytics, turn off **Page changes based on browser history events** under **Admin → Data streams → Enhanced measurement → Page views → Advanced settings**. Stalux sets `send_page_view: false` and sends the URL and title for each navigation explicitly. GA's history tracking must also be disabled in the property to prevent duplicate soft-navigation pageviews. Other enhanced measurement options can remain enabled. See [Google's pageview documentation](https://developers.google.com/analytics/devguides/collection/ga4/views).
 
-`bingClarityId` is the historical Stalux field name for a Microsoft Clarity Project ID. Get the ID from the Clarity project under **Settings → Setup → Get tracking code**. Stalux loads the tracking code asynchronously and preserves one loader across soft navigation. The SDK handles history navigation itself. Do not install the same project again through `anyhead`, a tag manager, or another plugin.
+`bingClarityId` is the historical Stalux field name for a Microsoft Clarity Project ID. Get the ID from the Clarity project under **Settings → Setup → Get tracking code**. Stalux includes the official `@microsoft/clarity` npm dependency, imports it dynamically in the browser, and calls `Clarity.init()` once across soft navigation. Consumer projects such as myblog only configure the ID and upgrade the theme; no separate Clarity installation or script is needed. The theme observes tag loading failures and allows a later page to retry. Tag load, recorder readiness and successful collection are verified separately. The official npm package still loads the hosted recording engine and does not move DOM capture into a Worker. The SDK handles history navigation itself. Do not install the same project again through `anyhead`, a tag manager, or another plugin.
 
 The Project ID is a public browser identifier. Never put a Clarity Data Export API token in this YAML or in client-side code. If the site uses a strict CSP, consent banner, or CMP, configure those host-site policies and signals separately; this theme does not make legal compliance decisions for the site.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.39.0",
+    "version": "1.39.2",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -107,6 +107,7 @@
         "@expressive-code/plugin-line-numbers": "^0.44.2",
         "@lucide/astro": "^1.56.0",
         "@mcp-b/webmcp-polyfill": "^5.1.0",
+        "@microsoft/clarity": "1.0.2",
         "@pagefind/component-ui": "^1.5.2",
         "@waline/client": "^3.16.1",
         "@xingwangzhe/cjk-font-split-native": "^0.4.10",
@@ -134,7 +135,7 @@
         "@types/node": "^26.6.5",
         "@unocss/astro": "^66.11.0",
         "@vitest/coverage-v8": "^5.0.4",
-        "astro": "^7.4.0",
+        "astro": "^7.4.1",
         "knip": "^6.41.0",
         "typescript": "npm:@typescript/typescript6@6.0.2",
         "unocss": "^66.11.0",
@@ -142,6 +143,6 @@
         "vitest": "^5.0.4"
     },
     "peerDependencies": {
-        "astro": "^7.4.0"
+        "astro": "^7.4.1"
     }
 }

package/src/components/stalux/layout/head.astro

@@ -42,7 +42,7 @@ const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
 
 <head>
     <meta charset="utf-8">
-    <ClientRouter fallback="animate" />
+    <ClientRouter fallback="swap" />
     <SEO
         title={seo.title}
         description={seo.description}

package/src/internal/style-names.generated.ts

@@ -288,48 +288,49 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-bg-filter": "--s1o",
         "--stalux-nav-offset": "--s1p",
         "--stalux-site-header-height": "--s1q",
-        "--stalux-text-shadow": "--s1r",
-        "--surface-glass": "--s1s",
-        "--surface-glass-shadow": "--s1t",
-        "--tag-bg": "--s1u",
-        "--tag-bg-hover": "--s1v",
-        "--tl-line": "--s1w",
-        "--tl-pad": "--s1x",
-        "--transition-fast": "--s1y",
-        "--transition-medium": "--s1z",
-        "--transition-normal": "--s20",
-        "--transition-slow": "--s21",
-        "--transition-slower": "--s22",
-        "--transition-slowest": "--s23",
-        "--un-rotate": "--s24",
-        "--un-rotate-x": "--s25",
-        "--un-rotate-y": "--s26",
-        "--un-rotate-z": "--s27",
-        "--un-scale-x": "--s28",
-        "--un-scale-y": "--s29",
-        "--un-scale-z": "--s2a",
-        "--un-skew-x": "--s2b",
-        "--un-skew-y": "--s2c",
-        "--un-translate-x": "--s2d",
-        "--un-translate-y": "--s2e",
-        "--un-translate-z": "--s2f",
-        "--updated-bg": "--s2g",
-        "--updated-border": "--s2h",
-        "--white-05p": "--s2i",
-        "--white-10p": "--s2j",
-        "--white-15p": "--s2k",
-        "--white-20p": "--s2l",
-        "--white-30p": "--s2m",
-        "--white-50p": "--s2n",
-        "--white-60p": "--s2o",
-        "--white-70p": "--s2p",
-        "--white-75p": "--s2q",
-        "--white-78p": "--s2r",
-        "--white-80p": "--s2s",
-        "--white-85p": "--s2t",
-        "--white-90p": "--s2u",
-        "--white-95p": "--s2v",
-        "--white-full": "--s2w"
+        "--stalux-site-header-min-height": "--s1r",
+        "--stalux-text-shadow": "--s1s",
+        "--surface-glass": "--s1t",
+        "--surface-glass-shadow": "--s1u",
+        "--tag-bg": "--s1v",
+        "--tag-bg-hover": "--s1w",
+        "--tl-line": "--s1x",
+        "--tl-pad": "--s1y",
+        "--transition-fast": "--s1z",
+        "--transition-medium": "--s20",
+        "--transition-normal": "--s21",
+        "--transition-slow": "--s22",
+        "--transition-slower": "--s23",
+        "--transition-slowest": "--s24",
+        "--un-rotate": "--s25",
+        "--un-rotate-x": "--s26",
+        "--un-rotate-y": "--s27",
+        "--un-rotate-z": "--s28",
+        "--un-scale-x": "--s29",
+        "--un-scale-y": "--s2a",
+        "--un-scale-z": "--s2b",
+        "--un-skew-x": "--s2c",
+        "--un-skew-y": "--s2d",
+        "--un-translate-x": "--s2e",
+        "--un-translate-y": "--s2f",
+        "--un-translate-z": "--s2g",
+        "--updated-bg": "--s2h",
+        "--updated-border": "--s2i",
+        "--white-05p": "--s2j",
+        "--white-10p": "--s2k",
+        "--white-15p": "--s2l",
+        "--white-20p": "--s2m",
+        "--white-30p": "--s2n",
+        "--white-50p": "--s2o",
+        "--white-60p": "--s2p",
+        "--white-70p": "--s2q",
+        "--white-75p": "--s2r",
+        "--white-78p": "--s2s",
+        "--white-80p": "--s2t",
+        "--white-85p": "--s2u",
+        "--white-90p": "--s2v",
+        "--white-95p": "--s2w",
+        "--white-full": "--s2x"
     },
     "animations": {
         "fadeInUpComment": "k0",
@@ -342,19 +343,17 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "stalux-page-enter-back": "k7",
         "stalux-page-exit": "k8",
         "stalux-random-spin": "k9",
-        "stalux-route-fade-in": "ka",
-        "stalux-route-fade-out": "kb",
-        "stalux-sidebar-left-back-in": "kc",
-        "stalux-sidebar-left-back-out": "kd",
-        "stalux-sidebar-left-in": "ke",
-        "stalux-sidebar-left-out": "kf",
-        "stalux-sidebar-right-back-in": "kg",
-        "stalux-sidebar-right-back-out": "kh",
-        "stalux-sidebar-right-in": "ki",
-        "stalux-sidebar-right-out": "kj",
-        "stalux-social-stalux-social-arrive": "kk",
-        "stalux-taxonomy-enter": "kl",
-        "stalux-taxonomy-enter-back": "km",
-        "stalux-word-word-glow": "kn"
+        "stalux-sidebar-left-back-in": "ka",
+        "stalux-sidebar-left-back-out": "kb",
+        "stalux-sidebar-left-in": "kc",
+        "stalux-sidebar-left-out": "kd",
+        "stalux-sidebar-right-back-in": "ke",
+        "stalux-sidebar-right-back-out": "kf",
+        "stalux-sidebar-right-in": "kg",
+        "stalux-sidebar-right-out": "kh",
+        "stalux-social-stalux-social-arrive": "ki",
+        "stalux-taxonomy-enter": "kj",
+        "stalux-taxonomy-enter-back": "kk",
+        "stalux-word-word-glow": "kl"
     }
 };

package/src/layouts/Stalux.astro

@@ -12,7 +12,7 @@ import {
     getPromoteData,
     getSiteData,
 } from "@utils/config-utils";
-import { getRouteAnimation, getRouteKind } from "@utils/view-transitions";
+import { getRouteKind } from "@utils/view-transitions";
 
 const props = Astro.props as Props;
 
@@ -49,11 +49,14 @@ const llmPromote = llmPromoteRaw
     ?.replace(/\{title\}/g, siteConfig.title)
     ?.replace(/\{cc\}/g, "CC-BY-NC-SA-4.0");
 const routeKind = getRouteKind(Astro.url.pathname);
-const routeAnimation = getRouteAnimation(routeKind);
 ---
 
 <!doctype html>
-<html lang={htmlLang} style={getAccentColorStyle(siteConfig.accentColor)}>
+<html
+    lang={htmlLang}
+    style={getAccentColorStyle(siteConfig.accentColor)}
+    data-stalux-route={routeKind}
+>
     <Head
         title={props.title}
         description={props.description}
@@ -118,7 +121,7 @@ const routeAnimation = getRouteAnimation(routeKind);
             class="stalux-main"
             data-stalux-route={routeKind}
             transition:name="stalux-page"
-            transition:animate={routeAnimation}
+            transition:animate="none"
         >
             <slot />
         </main>

package/src/scripts/analytics-runtime.ts

@@ -1,6 +1,7 @@
 /** Async native SDKs keep live DOM events out of worker proxies during Astro swaps. */
 
 import { createClientLogger } from "./logger";
+import { prepareRouteMotion, type RouteMotionEvent } from "./route-motion";
 
 const logger = createClientLogger("analytics");
 
@@ -22,7 +23,7 @@ declare global {
 type AnalyticsHost = Window & {
     dataLayer?: unknown[];
     gtag?: (...args: unknown[]) => void;
-    clarity?: ((...args: unknown[]) => void) & { q: unknown[] };
+    clarity?: ((...args: unknown[]) => void) & { v?: string };
     umami?: { track: (payload: Record<string, unknown>) => unknown };
 };
 const host = window as AnalyticsHost;
@@ -30,17 +31,101 @@ window.__staluxAnalyticsRuntime ??= {};
 const state = window.__staluxAnalyticsRuntime;
 state.scripts ??= new Map();
 
-/** Never await analytics in a router callback; failed loads can retry on a later page. */
-function loadTrackerScript(src: string, attributes: Record<string, string> = {}): Promise<void> {
-    const existing = state.scripts?.get(src);
-    if (existing) return existing;
-    const script = document.createElement("script");
-    script.async = true;
-    script.fetchPriority = "low";
-    script.src = src;
-    for (const [name, value] of Object.entries(attributes)) script.setAttribute(name, value);
-    const loaded = new Promise<void>((resolve, reject) => {
+type GooglePage = {
+    ready: Promise<unknown>;
+    payload: {
+        page_location: string;
+        page_path: string;
+        page_title: string;
+        page_referrer: string;
+    };
+};
+const googlePages: GooglePage[] = [];
+let transitionReady: Promise<unknown> = Promise.resolve();
+let googleScheduled = false;
+let googleSchedule = 0;
+let googleTimer: ReturnType<typeof setTimeout> | undefined;
+let googleFrames: number[] = [];
+
+function cancelGoogleSchedule(): void {
+    googleSchedule++;
+    googleScheduled = false;
+    clearTimeout(googleTimer);
+    for (const frame of googleFrames) window.cancelAnimationFrame(frame);
+    googleFrames = [];
+}
+
+function sendGooglePage(page: GooglePage): void {
+    try {
+        host.gtag?.("event", "page_view", page.payload);
+    } catch {
+        logger.debug("Google page view unavailable; navigation remains usable");
+    }
+}
+
+/** The loaded Google SDK processes dataLayer.push synchronously and can read layout. */
+function scheduleGooglePages(): void {
+    const page = googlePages[0];
+    if (!page || googleScheduled) return;
+    googleScheduled = true;
+    const schedule = ++googleSchedule;
+    const run = () => {
+        if (schedule !== googleSchedule) return;
+        cancelGoogleSchedule();
+        const next = googlePages.shift();
+        if (next) sendGooglePage(next);
+        // A burst of visits stays FIFO, with a separate task for each SDK call.
+        scheduleGooglePages();
+    };
+    // A queued visit can outlive its own transition. Also wait for whichever
+    // incoming snapshot is current when this task is scheduled.
+    void Promise.all([page.ready, transitionReady]).then(() => {
+        if (schedule !== googleSchedule) return;
+        // Let the routed content paint after native rendering resumes and its own
+        // motion is installed. The timer also covers throttled/background frames.
+        googleTimer = setTimeout(run, 1000);
+        googleFrames.push(
+            window.requestAnimationFrame(() => {
+                if (schedule !== googleSchedule) return;
+                googleFrames.push(
+                    window.requestAnimationFrame(() => {
+                        if (schedule !== googleSchedule) return;
+                        const scheduler = (
+                            window as Window & {
+                                scheduler?: {
+                                    postTask: (
+                                        callback: () => void,
+                                        options: { priority: "background" },
+                                    ) => Promise<unknown>;
+                                };
+                            }
+                        ).scheduler;
+                        if (scheduler?.postTask) {
+                            void scheduler.postTask(run, { priority: "background" }).catch(() => {
+                                if (schedule === googleSchedule) setTimeout(run, 0);
+                            });
+                        } else setTimeout(run, 0);
+                    }),
+                );
+            }),
+        );
+    });
+}
+
+function flushGooglePages(): void {
+    cancelGoogleSchedule();
+    // Native gtag remains on the main thread for GA's own pagehide/engagement work.
+    // Do not leave a queued view behind when the document is hidden or unloaded.
+    for (const page of googlePages.splice(0)) sendGooglePage(page);
+}
+
+/** Monitor only a script created by this integration; a loaded tag stays intact. */
+function monitorTrackerScript(script: HTMLScriptElement, append = false): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+        let settled = false;
         const finish = (error?: Error) => {
+            if (settled) return;
+            settled = true;
             clearTimeout(timer);
             script.onload = null;
             script.onerror = null;
@@ -52,8 +137,20 @@ function loadTrackerScript(src: string, attributes: Record<string, string> = {})
         const timer = setTimeout(() => finish(new Error("Analytics SDK load timed out")), 15_000);
         script.onload = () => finish();
         script.onerror = () => finish(new Error("Analytics SDK load failed"));
-        document.head.appendChild(script);
+        if (append) document.head.appendChild(script);
     });
+}
+
+/** Never await analytics in a router callback; failed loads can retry on a later page. */
+function loadTrackerScript(src: string, attributes: Record<string, string> = {}): Promise<void> {
+    const existing = state.scripts?.get(src);
+    if (existing) return existing;
+    const script = document.createElement("script");
+    script.async = true;
+    script.fetchPriority = "low";
+    script.src = src;
+    for (const [name, value] of Object.entries(attributes)) script.setAttribute(name, value);
+    const loaded = monitorTrackerScript(script, true);
     state.scripts?.set(src, loaded);
     void loaded.catch(() => {
         if (state.scripts?.get(src) === loaded) state.scripts.delete(src);
@@ -61,6 +158,50 @@ function loadTrackerScript(src: string, attributes: Record<string, string> = {})
     return loaded;
 }
 
+const CLARITY_SCRIPT_ID = "clarity-script";
+const CLARITY_LOADER_KEY = "clarity:npm";
+
+function hasExistingClarity(): boolean {
+    return Boolean(
+        host.clarity?.v ||
+            document.getElementById(CLARITY_SCRIPT_ID) ||
+            document.querySelector(
+                'script[data-stalux-clarity],script[src^="https://www.clarity.ms/tag/"]',
+            ),
+    );
+}
+
+function initializeClarity(id: string): void {
+    if (state.clarityId === id || state.scripts?.has(CLARITY_LOADER_KEY)) return;
+    state.clarityId = id;
+    // A preceding SDK or user-provided tag owns its own lifecycle. Never create
+    // a second loader or attach destructive retry handlers to that script.
+    if (hasExistingClarity()) return;
+    const initialized = import("@microsoft/clarity").then(({ default: clarity }) => {
+        // Another integration may have installed its tag while this chunk loaded.
+        if (hasExistingClarity()) return;
+        clarity.init(id);
+        const script = document.getElementById(CLARITY_SCRIPT_ID);
+        // Official init returns void and catches its own exceptions. Its inserted
+        // element is the observable loader, not the return value of init().
+        if (script?.tagName !== "SCRIPT") {
+            throw new Error("Clarity did not create its loader");
+        }
+        const tracker = script as HTMLScriptElement;
+        tracker.dataset.staluxClarity = "true";
+        tracker.fetchPriority = "low";
+        // Tag load does not establish that its remote core or collector is ready.
+        return monitorTrackerScript(tracker);
+    });
+    state.scripts?.set(CLARITY_LOADER_KEY, initialized);
+    void initialized.catch(() => {
+        if (state.scripts?.get(CLARITY_LOADER_KEY) !== initialized) return;
+        state.scripts.delete(CLARITY_LOADER_KEY);
+        if (state.clarityId === id) state.clarityId = undefined;
+        logger.debug("Clarity loader unavailable; a later navigation can retry");
+    });
+}
+
 function initializeTrackers(): void {
     const config = document.body?.dataset;
     if (!config) return;
@@ -82,32 +223,23 @@ function initializeTrackers(): void {
             { "data-stalux-google": "true" },
         ).catch(() => logger.debug("Google SDK unavailable; queued events retained"));
     }
-    if (config.staluxClarityId && state.clarityId !== config.staluxClarityId) {
-        host.clarity ??= Object.assign(
-            function (..._args: unknown[]) {
-                // biome-ignore lint/complexity/noArguments: Match the official Clarity queue format.
-                host.clarity?.q.push(arguments);
-            },
-            { q: [] as unknown[] },
-        );
-        const id = config.staluxClarityId;
-        state.clarityId = id;
-        void loadTrackerScript(`https://www.clarity.ms/tag/${encodeURIComponent(id)}`, {
-            "data-stalux-clarity": "true",
-        }).catch(() => {
-            if (state.clarityId === id) state.clarityId = undefined;
-            logger.debug("Clarity SDK unavailable; a later navigation can retry");
-        });
-    }
+    if (config.staluxClarityId) initializeClarity(config.staluxClarityId);
 }
 
 function trackGooglePage(): void {
     if (!state.googleId) return;
-    host.gtag?.("event", "page_view", {
-        page_location: window.location.href,
-        page_path: window.location.pathname + window.location.search,
-        page_title: document.title,
+    // Capture the visit before yielding: another navigation must not replace its
+    // URL, title or virtual referrer while the SDK is waiting for its task.
+    googlePages.push({
+        ready: transitionReady,
+        payload: {
+            page_location: window.location.href,
+            page_path: window.location.pathname + window.location.search,
+            page_title: document.title,
+            page_referrer: state.previousPage ?? document.referrer,
+        },
     });
+    scheduleGooglePages();
 }
 
 function trackUmamiPage(): void {
@@ -142,15 +274,26 @@ function trackVercountPage(): void {
     document.head.appendChild(script);
 }
 
-if (state.installed && (!state.native || state.revision !== 3)) {
-    // Revision 3 also replaces the shared navigation/motion listeners.
+if (state.installed && (!state.native || state.revision !== 4)) {
+    // Revision 4 replaces synchronous Google page views and the motion policy.
     // An open tab can cross a deployment boundary. Its old anonymous worker
     // listeners cannot be detached safely; reload once to install the new runtime.
     window.location.reload();
 } else if (!state.installed) {
     state.native = true;
-    state.revision = 3;
+    state.revision = 4;
     state.installed = true;
+    document.addEventListener("astro:before-swap", (event) => {
+        transitionReady = prepareRouteMotion(event as Event & RouteMotionEvent).ready;
+        // Invalidate an older page's frames, timer and posted task before this
+        // incoming snapshot starts. Its captured visit remains in the FIFO.
+        cancelGoogleSchedule();
+        scheduleGooglePages();
+    });
+    window.addEventListener("pagehide", flushGooglePages);
+    document.addEventListener("visibilitychange", () => {
+        if (document.hidden) flushGooglePages();
+    });
     document.addEventListener("astro:page-load", () => {
         initializeTrackers();
         trackGooglePage();

package/src/scripts/background.ts

@@ -13,6 +13,7 @@
  *   先低优先级解码目标背景，等待内容过渡完成后再淡入，不与内容快照争抢绘制。
  */
 import { createClientLogger } from "./logger";
+import { prepareRouteMotion, type RouteMotionEvent } from "./route-motion";
 
 const logger = createClientLogger("background");
 
@@ -115,8 +116,7 @@ if (!(window as Window & { __STALUX_BG_LISTENER__?: boolean }).__STALUX_BG_LISTE
         prepared = connection?.saveData ? undefined : prepareBackground();
     });
     document.addEventListener("astro:before-swap", (event) => {
-        const transition = (event as Event & { viewTransition?: ViewTransition }).viewTransition;
-        transitionFinished = transition?.finished.catch(() => undefined) ?? Promise.resolve();
+        transitionFinished = prepareRouteMotion(event as RouteMotionEvent).finished;
     });
     document.addEventListener("astro:page-load", initializeBackground);
 }

package/src/scripts/navigation-progress.ts

@@ -2,6 +2,7 @@ import type {
     TransitionBeforePreparationEvent,
     TransitionBeforeSwapEvent,
 } from "astro:transitions/client";
+import { prepareRouteMotion } from "./route-motion";
 
 type Stage = "loading" | "prepared" | "swapped" | "loaded" | "complete";
 interface Navigation {
@@ -125,7 +126,7 @@ export function installNavigationProgress(): void {
             complete(navigation);
         };
         // Skipped/rejected animations must not leave a completed navigation stuck.
-        void swap.viewTransition.finished.then(finished, finished);
+        void prepareRouteMotion(swap).finished.then(finished);
     });
     document.addEventListener("astro:after-swap", () => {
         if (!active || swapping !== active || active.signal.aborted) return;

package/src/scripts/navigation.ts

@@ -43,26 +43,19 @@ registerPageLifecycle("navigation", () => {
     const controller = new AbortController();
     const listenerOptions = { signal: controller.signal };
     let frameId = 0;
-    let lastScale = "1";
+    let lastScale = navList.style.getPropertyValue("--nav-scale") || "1";
+    let needsButtons = true;
+    let needsSurface = true;
+    let needsResize = false;
     let needsScale = true;
     const mobileNav = window.matchMedia("(max-width: 600px)");
 
-    const updateNavSurface = () => {
-        siteNav?.toggleAttribute("data-scrolled", window.scrollY > 24);
-        navToggle?.toggleAttribute("data-scrolled", window.scrollY > 24);
-    };
-    window.addEventListener("scroll", updateNavSurface, {
-        passive: true,
-        signal: controller.signal,
-    });
-    updateNavSurface();
-
     const closeNav = () => {
         navList.removeAttribute("data-state");
         navToggle?.removeAttribute("data-state");
         navToggle?.setAttribute("aria-expanded", "false");
         navOverlay?.removeAttribute("data-state");
-        document.body.style.overflow = "";
+        if (document.body.style.overflow) document.body.style.overflow = "";
     };
     const openNav = () => {
         navList.dataset.state = "open";
@@ -73,26 +66,17 @@ registerPageLifecycle("navigation", () => {
     };
     const updateButtons = () => {
         frameId = 0;
-        // Read layout before writing styles or attributes. Scrolling does not
-        // change item sizes, so only resize events need to recalculate scale.
-        const { clientWidth, scrollWidth, scrollLeft } = navList;
-        const headerHeight = siteHeader?.offsetHeight ?? 0;
-        const headerHeightValue = `${headerHeight}px`;
-        if (
-            siteHeader &&
-            document.documentElement.style.getPropertyValue("--stalux-site-header-height") !==
-                headerHeightValue
-        ) {
-            document.documentElement.style.setProperty(
-                "--stalux-site-header-height",
-                headerHeightValue,
-            );
-        }
-        const navOffset = headerHeight + 16;
-        document.documentElement.style.setProperty("--stalux-nav-offset", `${navOffset}px`);
+        // Collect every layout read before changing attributes or inherited
+        // root variables. Even scrollY can force style calculation after a swap.
+        const scrolled = needsSurface ? window.scrollY > 24 : undefined;
+        const shouldCloseNav = needsResize && !mobileNav.matches;
+        const updateOverflow = needsButtons;
+        const clientWidth = updateOverflow ? navList.clientWidth : 0;
+        const scrollWidth = updateOverflow ? navList.scrollWidth : 0;
+        const scrollLeft = updateOverflow ? navList.scrollLeft : 0;
+        const headerHeight = updateOverflow ? (siteHeader?.offsetHeight ?? 0) : 0;
         let nextScale = lastScale;
         if (needsScale) {
-            needsScale = false;
             if (mobileNav.matches) {
                 nextScale = "1";
             } else {
@@ -112,25 +96,60 @@ registerPageLifecycle("navigation", () => {
                 );
             }
         }
+        needsButtons = false;
+        needsSurface = false;
+        needsResize = false;
+        needsScale = false;
+
+        if (updateOverflow) {
+            const rootStyle = document.documentElement.style;
+            const headerHeightValue = `${headerHeight}px`;
+            if (
+                siteHeader &&
+                rootStyle.getPropertyValue("--stalux-site-header-height") !== headerHeightValue
+            ) {
+                rootStyle.setProperty("--stalux-site-header-height", headerHeightValue);
+            }
+            const navOffsetValue = `${headerHeight + 16}px`;
+            if (rootStyle.getPropertyValue("--stalux-nav-offset") !== navOffsetValue) {
+                rootStyle.setProperty("--stalux-nav-offset", navOffsetValue);
+            }
+        }
         if (nextScale !== lastScale) {
             navList.style.setProperty("--nav-scale", nextScale);
             lastScale = nextScale;
         }
-        const hasOverflow = scrollWidth > clientWidth;
-        buttonLeft.toggleAttribute("data-visible", hasOverflow && scrollLeft > 1);
-        buttonRight.toggleAttribute(
-            "data-visible",
-            hasOverflow && scrollLeft + clientWidth < scrollWidth - 1,
-        );
+        if (scrolled !== undefined) {
+            siteNav?.toggleAttribute("data-scrolled", scrolled);
+            navToggle?.toggleAttribute("data-scrolled", scrolled);
+        }
+        if (updateOverflow) {
+            const hasOverflow = scrollWidth > clientWidth;
+            buttonLeft.toggleAttribute("data-visible", hasOverflow && scrollLeft > 1);
+            buttonRight.toggleAttribute(
+                "data-visible",
+                hasOverflow && scrollLeft + clientWidth < scrollWidth - 1,
+            );
+        }
+        if (shouldCloseNav) closeNav();
     };
-    const scheduleUpdate = () => {
+    const scheduleFrame = () => {
         if (!frameId) frameId = requestAnimationFrame(updateButtons);
     };
+    const scheduleUpdate = () => {
+        needsButtons = true;
+        scheduleFrame();
+    };
+    const scheduleSurface = () => {
+        needsSurface = true;
+        scheduleFrame();
+    };
     const scheduleResize = () => {
-        if (!mobileNav.matches) closeNav();
-        updateNavSurface();
+        needsButtons = true;
+        needsSurface = true;
+        needsResize = true;
         needsScale = true;
-        scheduleUpdate();
+        scheduleFrame();
     };
 
     document.querySelector("[data-ref='stalux-search-btn']")?.addEventListener(
@@ -167,6 +186,10 @@ registerPageLifecycle("navigation", () => {
         passive: true,
         signal: controller.signal,
     });
+    window.addEventListener("scroll", scheduleSurface, {
+        passive: true,
+        signal: controller.signal,
+    });
     window.addEventListener("resize", scheduleResize, {
         passive: true,
         signal: controller.signal,
@@ -186,7 +209,7 @@ registerPageLifecycle("navigation", () => {
         resizeObserver.disconnect();
         if (frameId) cancelAnimationFrame(frameId);
         closeNav();
-        document.documentElement.style.removeProperty("--stalux-nav-offset");
-        document.documentElement.style.removeProperty("--stalux-site-header-height");
+        // Keep --stalux-nav-offset and --stalux-site-header-height for the
+        // persisted header, avoiding inherited-style invalidation per page.
     };
 });

package/src/scripts/route-motion.ts

@@ -0,0 +1,108 @@
+export interface RouteMotionEvent {
+    viewTransition?: {
+        ready?: PromiseLike<unknown>;
+        finished?: PromiseLike<unknown>;
+    };
+    signal?: AbortSignal;
+}
+
+export interface RouteMotion {
+    ready: Promise<void>;
+    finished: Promise<void>;
+    start: (main: HTMLElement | null, options?: { skip?: boolean }) => void;
+    cancel: () => void;
+}
+
+const motions = new WeakMap<object, RouteMotion>();
+const settle = (promise?: PromiseLike<unknown>): Promise<void> =>
+    Promise.resolve(promise).then(
+        () => undefined,
+        () => undefined,
+    );
+
+function completion() {
+    let resolve = () => {};
+    const promise = new Promise<void>((done) => {
+        resolve = done;
+    });
+    return { promise, resolve };
+}
+
+/** Share the native swap and the real content animation across all route consumers. */
+export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
+    const native = event.viewTransition;
+    const key = native ?? event;
+    const existing = motions.get(key);
+    if (existing) return existing;
+
+    // Create these before swap: a consumer must not observe native.finished and
+    // mistake the gap before after-swap installs WAAPI for completed motion.
+    const installed = completion();
+    const animationDone = completion();
+    const canceled = completion();
+    let animation: Animation | undefined;
+    let started = false;
+    let disposed = false;
+    const clearAnimation = () => {
+        const active = animation;
+        animation = undefined;
+        try {
+            active?.cancel();
+        } catch {
+            // Releasing an already detached effect must not hold up navigation.
+        }
+        animationDone.resolve();
+    };
+    const cancel = () => {
+        if (disposed) return;
+        disposed = true;
+        started = true;
+        clearAnimation();
+        installed.resolve();
+        canceled.resolve();
+        event.signal?.removeEventListener("abort", cancel);
+    };
+    const ready = Promise.race([
+        canceled.promise,
+        Promise.all([settle(native?.ready), installed.promise]).then(() => undefined),
+    ]);
+    const finished = Promise.race([
+        canceled.promise,
+        Promise.all([settle(native?.finished), animationDone.promise]).then(() => undefined),
+    ]);
+    const motion: RouteMotion = {
+        ready,
+        finished,
+        start(main, options) {
+            if (started) return;
+            started = true;
+            try {
+                if (
+                    !main ||
+                    options?.skip ||
+                    document.hidden ||
+                    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ||
+                    typeof main.animate !== "function"
+                ) {
+                    animationDone.resolve();
+                    return;
+                }
+                animation = main.animate(
+                    { opacity: [0.7, 1] },
+                    { duration: 100, easing: "ease-out" },
+                );
+                void animation.finished.then(clearAnimation, clearAnimation);
+            } catch {
+                clearAnimation();
+            } finally {
+                installed.resolve();
+            }
+        },
+        cancel,
+    };
+    motions.set(key, motion);
+    if (event.signal?.aborted) cancel();
+    else event.signal?.addEventListener("abort", cancel, { once: true });
+    void finished.then(() => event.signal?.removeEventListener("abort", cancel));
+    return motion;
+}

package/src/scripts/view-transitions.ts

@@ -2,6 +2,7 @@ import { getRouteKind } from "@utils/public-routes";
 import { createClientLogger } from "./logger";
 import { prepareNavigationFont } from "./navigation-font";
 import { installNavigationProgress } from "./navigation-progress";
+import { prepareRouteMotion } from "./route-motion";
 
 const logger = createClientLogger("view-transitions");
 
@@ -13,14 +14,18 @@ function setRouteState(pathname: string): void {
     const html = document.documentElement;
     const route = getRouteKind(pathname);
     logger.debug(`route state=${route}`);
-    html.dataset.staluxRoute = route;
-    document.querySelector("main.stalux-main")?.setAttribute("data-stalux-route", route);
+    if (html.dataset.staluxRoute !== route) html.dataset.staluxRoute = route;
+    const main = document.querySelector("main[data-stalux-route]");
+    if (main && main.getAttribute("data-stalux-route") !== route) {
+        main.setAttribute("data-stalux-route", route);
+    }
 }
 
 interface NavigationEvent {
     from: URL;
     to: URL;
     direction: string;
+    navigationType?: string;
     loader: () => Promise<void>;
     newDocument: Document;
     signal: AbortSignal;
@@ -41,14 +46,43 @@ function clearNavigationState(): void {
     delete document.documentElement.dataset.staluxVtDirection;
 }
 
+function preserveHeaderMetrics(nextDocument: Document): void {
+    const selector = '[data-astro-transition-persist="stalux-site-header"]';
+    if (!document.querySelector(selector) || !nextDocument.querySelector(selector)) return;
+    // The header DOM persists. Keep its measured dimensions through Astro's root
+    // attribute swap instead of invalidating inherited layout variables twice.
+    for (const property of ["--stalux-nav-offset", "--stalux-site-header-height"]) {
+        const value = document.documentElement.style.getPropertyValue(property);
+        if (value && !nextDocument.documentElement.style.getPropertyValue(property)) {
+            nextDocument.documentElement.style.setProperty(property, value);
+        }
+    }
+}
+
 const transitionWindow = window as TransitionWindow;
 if (!transitionWindow.__STALUX_VT_LISTENER__) {
     transitionWindow.__STALUX_VT_LISTENER__ = true;
 
     let generation = 0;
+    let motion: ReturnType<typeof prepareRouteMotion> | undefined;
+    let pendingBrowserMotion = false;
+    let browserMotion = false;
+    window.addEventListener(
+        "popstate",
+        (event) => {
+            pendingBrowserMotion =
+                (event as PopStateEvent & { hasUAVisualTransition?: boolean })
+                    .hasUAVisualTransition === true;
+        },
+        { capture: true },
+    );
     document.addEventListener("astro:before-preparation", (event) => {
         const navigation = event as unknown as NavigationEvent;
         const current = ++generation;
+        motion?.cancel();
+        motion = undefined;
+        browserMotion = pendingBrowserMotion && navigation.navigationType === "traverse";
+        pendingBrowserMotion = false;
         setNavigationState(navigation);
         navigation.signal.addEventListener(
             "abort",
@@ -73,17 +107,24 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         const navigation = event as unknown as NavigationEvent;
         if (navigation.signal.aborted) return;
         const current = generation;
+        motion = prepareRouteMotion(navigation);
+        preserveHeaderMetrics(navigation.newDocument);
         // Astro replaces the root attributes during swap. Carry motion state into
         // the new document and keep it until the last animation actually settles.
         setNavigationState(navigation, navigation.newDocument.documentElement);
         const finish = () => {
             if (current === generation) clearNavigationState();
         };
-        void navigation.viewTransition?.finished.then(finish, finish);
+        void motion.finished.then(finish, finish);
     });
 
     document.addEventListener("astro:after-swap", () => {
         setRouteState(window.location.pathname);
+        // Install the effect before the first new-content paint. The browser
+        // starts its timeline after the native transition releases rendering.
+        motion?.start(document.querySelector<HTMLElement>("main[data-stalux-route]"), {
+            skip: browserMotion,
+        });
     });
 
     document.addEventListener("astro:page-load", () => {

package/src/styles/base.css

@@ -131,7 +131,8 @@
     :root {
         --stalux-bg-color: #202020;
         --stalux-bg-filter: none;
-        --stalux-site-header-height: 3.75rem;
+        --stalux-site-header-min-height: 3.75rem;
+        --stalux-site-header-height: var(--stalux-site-header-min-height);
         --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
         --stalux-accent-color: #eab308;
         --stalux-accent-rgb: 234 179 8;

package/src/styles/generated.css

@@ -1,3 +1,3 @@
 @layer theme, base, components, utilities;
-@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-height:3.75rem;--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 2px 5px #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.85rem;--border-thin:1px;--border-medium:2px;--border-thick:3px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:4px;transition:background .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stagger-children>:first-child{animation-delay:.1s}.stagger-children>:nth-child(2){animation-delay:.15s}.stagger-children>:nth-child(3){animation-delay:.2s}.stagger-children>:nth-child(4){animation-delay:.25s}.stagger-children>:nth-child(5){animation-delay:.3s}.stagger-children>:nth-child(n+6){animation-delay:.35s}@keyframes stalux-page-exit{to{opacity:0}}@keyframes stalux-page-enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-page-enter-back{0%{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-taxonomy-enter{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-taxonomy-enter-back{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-article-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-article-enter-back{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-sidebar-left-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-out{to{opacity:0;transform:translate(-10px)}}@keyframes stalux-sidebar-left-back-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-back-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-back-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-back-out{to{opacity:0;transform:translate(-10px)}}.stalux-main *{view-transition-name:none!important}@keyframes stalux-route-fade-out{to{opacity:0}}@keyframes stalux-route-fade-in{0%{opacity:0}to{opacity:1}}::view-transition-old(stalux-page){animation:.1s ease-out both stalux-route-fade-out!important}::view-transition-new(stalux-page){animation:.16s ease-out both stalux-route-fade-in!important}::view-transition-group(stalux-page){z-index:1}::view-transition-group(stalux-article-page){z-index:1;animation:none}::view-transition-old(stalux-article-page),::view-transition-new(stalux-article-page){animation:none}html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-group(left-sidebar),html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-group(right-sidebar),html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-old(left-sidebar),html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-new(left-sidebar),html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-old(right-sidebar),html[data-stalux-vt-from=article][data-stalux-vt-to=article]::view-transition-new(right-sidebar){animation:none!important}::view-transition-old(stalux-page),::view-transition-new(stalux-page){transform-origin:top}::view-transition-group(*){animation-duration:.24s;animation-timing-function:cubic-bezier(.22,.72,.22,1)}[data-astro-transition-persist=stalux-site-header]{view-transition-name:stalux-site-header}::view-transition-group(stalux-site-header){z-index:990;animation:none}::view-transition-old(stalux-site-header),::view-transition-new(stalux-site-header){animation:none}[data-astro-transition-persist=stalux-site-footer]{view-transition-name:stalux-site-footer}::view-transition-group(stalux-site-footer),::view-transition-old(stalux-site-footer),::view-transition-new(stalux-site-footer){animation:none}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms!important;animation-delay:0s!important}.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
+@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-min-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-min-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-min-height:3.75rem;--stalux-site-header-height:var(--stalux-site-header-min-height);--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 2px 5px #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.85rem;--border-thin:1px;--border-medium:2px;--border-thick:3px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:4px;transition:background .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stagger-children>:first-child{animation-delay:.1s}.stagger-children>:nth-child(2){animation-delay:.15s}.stagger-children>:nth-child(3){animation-delay:.2s}.stagger-children>:nth-child(4){animation-delay:.25s}.stagger-children>:nth-child(5){animation-delay:.3s}.stagger-children>:nth-child(n+6){animation-delay:.35s}@keyframes stalux-page-exit{to{opacity:0}}@keyframes stalux-page-enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-page-enter-back{0%{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-taxonomy-enter{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-taxonomy-enter-back{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-article-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-article-enter-back{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-sidebar-left-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-out{to{opacity:0;transform:translate(-10px)}}@keyframes stalux-sidebar-left-back-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-back-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-back-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-back-out{to{opacity:0;transform:translate(-10px)}}html,.stalux-main,.stalux-main *,[data-astro-transition-persist]{view-transition-name:none!important}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms!important;animation-delay:0s!important}.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
 /*$vite$:1*/

package/src/styles/motion.css

@@ -173,107 +173,16 @@
     }
 }
 
-/* One content snapshot per route. Nested titles, cards, sidebars and long
-   article blocks otherwise become dozens of individually rasterized surfaces.
-   Components used outside the shared shell retain their own transition metadata. */
-.stalux-main * {
+/* The native router keeps document/history semantics; content motion uses a
+   short Web Animations API effect instead of page-sized snapshot surfaces.
+   Persisted shell elements remain live and stationary during the swap. */
+html,
+.stalux-main,
+.stalux-main *,
+[data-astro-transition-persist] {
     view-transition-name: none !important;
 }
 
-@keyframes stalux-route-fade-out {
-    to {
-        opacity: 0;
-    }
-}
-@keyframes stalux-route-fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-::view-transition-old(stalux-page) {
-    animation: stalux-route-fade-out 100ms ease-out both !important;
-}
-::view-transition-new(stalux-page) {
-    animation: stalux-route-fade-in 160ms ease-out both !important;
-}
-
-::view-transition-group(stalux-page) {
-    z-index: 1;
-}
-
-::view-transition-group(stalux-article-page) {
-    z-index: 1;
-    animation: none;
-}
-
-::view-transition-old(stalux-article-page),
-::view-transition-new(stalux-article-page) {
-    animation: none;
-}
-
-/* Article-to-article hops keep both sidebars in place; their smaller cards
-   and content groups carry the visual change instead of sliding the columns. */
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-group(
-    left-sidebar
-),
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-group(
-    right-sidebar
-),
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-old(left-sidebar),
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-new(left-sidebar),
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-old(
-    right-sidebar
-),
-html[data-stalux-vt-from="article"][data-stalux-vt-to="article"]::view-transition-new(
-    right-sidebar
-) {
-    animation: none !important;
-}
-
-::view-transition-old(stalux-page),
-::view-transition-new(stalux-page) {
-    transform-origin: center top;
-}
-
-::view-transition-group(*) {
-    animation-duration: 240ms;
-    animation-timing-function: cubic-bezier(0.22, 0.72, 0.22, 1);
-}
-
-/* Persisted headers can keep a route-scoped Astro attribute after a swap. Use
-   the stable persist marker for the shared transition name across routes. */
-[data-astro-transition-persist="stalux-site-header"] {
-    view-transition-name: stalux-site-header;
-}
-
-/* Keep the shared header stationary while the route content animates below it. */
-::view-transition-group(stalux-site-header) {
-    z-index: 990;
-    animation: none;
-}
-
-::view-transition-old(stalux-site-header),
-::view-transition-new(stalux-site-header) {
-    animation: none;
-}
-
-/* Keep the shared footer stationary while the route content animates above it. */
-[data-astro-transition-persist="stalux-site-footer"] {
-    view-transition-name: stalux-site-footer;
-}
-
-::view-transition-group(stalux-site-footer) {
-    animation: none;
-}
-
-::view-transition-old(stalux-site-footer),
-::view-transition-new(stalux-site-footer) {
-    animation: none;
-}
-
 @media (prefers-reduced-motion: reduce) {
     ::view-transition-group(*),
     ::view-transition-old(*),