@xingwangzhe/stalux 1.39.5 → 1.40.1

package/README.md

@@ -18,9 +18,9 @@ Standalone images written as `![Image description](url)` receive a `figure` and
 
 Code blocks default to the single `dark-plus` theme, with system color-scheme switching and theme selectors disabled. To opt into another theme or switching behavior, explicitly override `themes`, `useDarkModeMediaQuery`, and `themeCssSelector` through `expressiveCode`. This only changes generated code styles and adds no telemetry.
 
-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.
+Route changes use native CSS View Transitions for one visible semantic heading in the incoming page. The policy covers every theme route category: normal effects take 100–180ms, with short 100–120ms fades on mobile. Entering an article, returning to a list, filtering categories or tags, explicit previous/next article controls, and returning home receive hints that follow reading intent. History traversal restores the existing scroll position; offscreen headings remain out of view. Reduced motion, browser-provided history gestures and same-page anchors add no visible VT animation. Standalone HTML keeps native navigation. See the [1.40.0 transition policy](https://github.com/xingwangzhe/stalux/blob/v1.40.1/docs/view-transitions-1.40.1.md).
 
-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.
+The sticky header stays at the top while the body grows with long content; the persisted header and footer stay in place during navigation. Text is immediately clear, and the incoming heading is measured once after Astro swaps the document and restores scrolling. Astro continues to own document/font preparation, history, scrolling and page-script lifecycle. Shared motion state settles when the native transition finishes or is canceled. CSS animation duration is reported separately from total navigation time, which includes networking, layout and browser settlement.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.39.5",
+    "version": "1.40.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

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

@@ -10,7 +10,7 @@ const { heading, description } = Astro.props;
 <>
     <h1
         class="stalux-page-title stalux-u-text-center"
-        transition:name="stalux-page-title"
+        data-stalux-motion-focus
         transition:animate="none"
     >
         {heading}

package/src/components/stalux/posts/postContent.astro

@@ -50,7 +50,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         transition:name={`${transitionPrefix}-header`}
         transition:animate="fade"
     >
-        <h1 class="stalux-post-title" transition:name={props.titleTransitionName}>
+        <h1 class="stalux-post-title" data-stalux-motion-focus>
             {props.title}
         </h1>
         <div

package/src/components/stalux/posts/postNavigation.astro

@@ -24,6 +24,7 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
             {props.prev ? (
                 <a
                     href={props.prev.url}
+                    data-stalux-motion="previous"
                     class="stalux-pagination-link stalux-pagination-prev-post"
                     rel="prev"
                     data-astro-prefetch
@@ -77,6 +78,7 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
             {props.next ? (
                 <a
                     href={props.next.url}
+                    data-stalux-motion="next"
                     class="stalux-pagination-link stalux-pagination-next-post"
                     rel="next"
                     data-astro-prefetch

package/src/components/stalux/tags/tagHeader.astro

@@ -32,7 +32,7 @@ if (typeKey === "category" || typeKey === "categories" || typeKey === "分类")
     transition:name="stalux-taxonomy-page-header-shell"
     transition:animate="none"
 >
-    <h1 class="stalux-tag-page-title">
+    <h1 class="stalux-tag-page-title" data-stalux-motion-focus>
         <span class="stalux-tag-category-icon">
             <svg
                 aria-hidden="true"

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

@@ -287,52 +287,50 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-bg-color": "--s1n",
         "--stalux-bg-filter": "--s1o",
         "--stalux-nav-offset": "--s1p",
-        "--stalux-side-in-x": "--s1q",
-        "--stalux-side-out-x": "--s1r",
-        "--stalux-site-header-height": "--s1s",
-        "--stalux-site-header-min-height": "--s1t",
-        "--stalux-text-shadow": "--s1u",
-        "--surface-glass": "--s1v",
-        "--surface-glass-shadow": "--s1w",
-        "--tag-bg": "--s1x",
-        "--tag-bg-hover": "--s1y",
-        "--tl-line": "--s1z",
-        "--tl-pad": "--s20",
-        "--transition-fast": "--s21",
-        "--transition-medium": "--s22",
-        "--transition-normal": "--s23",
-        "--transition-slow": "--s24",
-        "--transition-slower": "--s25",
-        "--transition-slowest": "--s26",
-        "--un-rotate": "--s27",
-        "--un-rotate-x": "--s28",
-        "--un-rotate-y": "--s29",
-        "--un-rotate-z": "--s2a",
-        "--un-scale-x": "--s2b",
-        "--un-scale-y": "--s2c",
-        "--un-scale-z": "--s2d",
-        "--un-skew-x": "--s2e",
-        "--un-skew-y": "--s2f",
-        "--un-translate-x": "--s2g",
-        "--un-translate-y": "--s2h",
-        "--un-translate-z": "--s2i",
-        "--updated-bg": "--s2j",
-        "--updated-border": "--s2k",
-        "--white-05p": "--s2l",
-        "--white-10p": "--s2m",
-        "--white-15p": "--s2n",
-        "--white-20p": "--s2o",
-        "--white-30p": "--s2p",
-        "--white-50p": "--s2q",
-        "--white-60p": "--s2r",
-        "--white-70p": "--s2s",
-        "--white-75p": "--s2t",
-        "--white-78p": "--s2u",
-        "--white-80p": "--s2v",
-        "--white-85p": "--s2w",
-        "--white-90p": "--s2x",
-        "--white-95p": "--s2y",
-        "--white-full": "--s2z"
+        "--stalux-site-header-height": "--s1q",
+        "--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",
@@ -340,25 +338,29 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "stalux-article-enter": "k2",
         "stalux-article-enter-back": "k3",
         "stalux-cursor-blink": "k4",
-        "stalux-link-avatar-spin": "k5",
-        "stalux-random-spin": "k6",
-        "stalux-sidebar-left-back-in": "k7",
-        "stalux-sidebar-left-back-out": "k8",
-        "stalux-sidebar-left-in": "k9",
-        "stalux-sidebar-left-out": "ka",
-        "stalux-sidebar-right-back-in": "kb",
-        "stalux-sidebar-right-back-out": "kc",
-        "stalux-sidebar-right-in": "kd",
-        "stalux-sidebar-right-out": "ke",
-        "stalux-social-stalux-social-arrive": "kf",
-        "stalux-taxonomy-enter": "kg",
-        "stalux-taxonomy-enter-back": "kh",
-        "stalux-vt-new-back": "ki",
-        "stalux-vt-new-fwd": "kj",
-        "stalux-vt-old-back": "kk",
-        "stalux-vt-old-fwd": "kl",
-        "stalux-vt-side-in": "km",
-        "stalux-vt-side-out": "kn",
-        "stalux-word-word-glow": "ko"
+        "stalux-focus-enter": "k5",
+        "stalux-focus-fade": "k6",
+        "stalux-focus-home": "k7",
+        "stalux-focus-next": "k8",
+        "stalux-focus-previous": "k9",
+        "stalux-focus-restore": "ka",
+        "stalux-focus-up": "kb",
+        "stalux-link-avatar-spin": "kc",
+        "stalux-page-enter": "kd",
+        "stalux-page-enter-back": "ke",
+        "stalux-page-exit": "kf",
+        "stalux-random-spin": "kg",
+        "stalux-sidebar-left-back-in": "kh",
+        "stalux-sidebar-left-back-out": "ki",
+        "stalux-sidebar-left-in": "kj",
+        "stalux-sidebar-left-out": "kk",
+        "stalux-sidebar-right-back-in": "kl",
+        "stalux-sidebar-right-back-out": "km",
+        "stalux-sidebar-right-in": "kn",
+        "stalux-sidebar-right-out": "ko",
+        "stalux-social-stalux-social-arrive": "kp",
+        "stalux-taxonomy-enter": "kq",
+        "stalux-taxonomy-enter-back": "kr",
+        "stalux-word-word-glow": "ks"
     }
 };

package/src/layouts/Stalux.astro

@@ -120,7 +120,7 @@ const routeKind = getRouteKind(Astro.url.pathname);
             transition:persist="stalux-bg-b"
             aria-hidden="true"
         ></div>
-        <main class="stalux-main" data-stalux-route={routeKind} transition:name="stalux-page">
+        <main class="stalux-main" data-stalux-route={routeKind}>
             <slot />
         </main>
         <Footer />

package/src/pages/404.astro

@@ -18,7 +18,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
         data-pagefind-ignore
     >
         <div class="stalux-404-error-content">
-            <h1>404</h1>
+            <h1 data-stalux-motion-focus>404</h1>
             <p>{t("page404.pageNotFound")}</p>
             <p class="agent-recovery">
                 This URL does not exist. Continue at the <a href="/">home page</a>, browse the

package/src/pages/index.astro

@@ -22,8 +22,8 @@ import { getSiteData } from "@utils/config-utils";
     <div class="stalux-home-body stalux-u-flex stalux-u-items-center stalux-u-flex-col">
         <h1
             class="stalux-home-title stalux-u-text-center"
-            transition:name="stalux-home-title"
-            transition:animate="fade"
+            data-stalux-motion-focus
+            transition:animate="none"
         >
             {siteTitle}
         </h1>

package/src/scripts/view-transitions.ts

@@ -1,7 +1,9 @@
 import { getRouteKind } from "@utils/public-routes";
+import { getRouteMotionPreset, type RouteMotionPreset } from "@utils/route-motion-policy";
 import { installBackToTop } from "./back-to-top";
 import { createClientLogger } from "./logger";
 import { prepareNavigationFont } from "./navigation-font";
+import { prepareRouteMotion, type RouteMotion } from "./route-motion";
 
 const logger = createClientLogger("view-transitions");
 
@@ -29,14 +31,20 @@ interface NavigationEvent {
     newDocument: Document;
     signal: AbortSignal;
     viewTransition?: ViewTransition;
+    sourceElement?: Element;
 }
 
-function setNavigationState(event: NavigationEvent, html = document.documentElement): void {
+function setNavigationState(
+    event: NavigationEvent,
+    preset: RouteMotionPreset,
+    html = document.documentElement,
+): void {
     const from = getRouteKind(new URL(event.from, window.location.href).pathname);
     const to = getRouteKind(new URL(event.to, window.location.href).pathname);
     html.dataset.staluxVtFrom = from;
     html.dataset.staluxVtTo = to;
     html.dataset.staluxVtDirection = event.direction;
+    html.dataset.staluxVtPreset = preset;
 }
 
 function clearNavigationState(): void {
@@ -44,6 +52,30 @@ function clearNavigationState(): void {
     delete html.dataset.staluxVtFrom;
     delete html.dataset.staluxVtTo;
     delete html.dataset.staluxVtDirection;
+    delete html.dataset.staluxVtPreset;
+    clearFocusVisibility();
+}
+
+function clearFocusVisibility(): void {
+    document
+        .querySelector("[data-stalux-motion-focus]")
+        ?.removeAttribute?.("data-stalux-motion-visible");
+}
+
+/** At most one bounded title is considered, never an entire article or list. */
+function updateFocusVisibility(): void {
+    const focus = document.querySelector<HTMLElement>("[data-stalux-motion-focus]");
+    if (!focus || typeof focus.getBoundingClientRect !== "function") return;
+    const rect = focus.getBoundingClientRect();
+    const visible =
+        rect.width > 0 &&
+        rect.height > 0 &&
+        rect.height <= window.innerHeight / 2 &&
+        rect.bottom > 0 &&
+        rect.top < window.innerHeight &&
+        rect.right > 0 &&
+        rect.left < window.innerWidth;
+    focus.dataset.staluxMotionVisible = String(visible);
 }
 
 function preserveHeaderMetrics(nextDocument: Document): void {
@@ -62,11 +94,52 @@ function preserveHeaderMetrics(nextDocument: Document): void {
 const transitionWindow = window as TransitionWindow;
 if (!transitionWindow.__STALUX_VT_LISTENER__) {
     transitionWindow.__STALUX_VT_LISTENER__ = true;
+    let pendingNavigation = 0;
+    let swappedNavigation = 0;
+
+    // A current-page link is not a page replacement. Intercept before Astro's
+    // delegated handler, but keep propagation for menu cleanup and click tracking.
+    // During preparation, Astro must receive it to cancel an incoming route.
+    // Hash changes, explicit reloads, downloads and modified/new-tab clicks keep
+    // their native behavior.
+    document.addEventListener(
+        "click",
+        (event) => {
+            if (
+                pendingNavigation !== 0 ||
+                event.defaultPrevented ||
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey
+            )
+                return;
+            const anchor =
+                event.target instanceof Element
+                    ? event.target.closest<HTMLAnchorElement>("a[href]")
+                    : null;
+            if (
+                !anchor ||
+                anchor.href !== window.location.href ||
+                anchor.href.includes("#") ||
+                anchor.hasAttribute("download") ||
+                anchor.hasAttribute("data-astro-reload") ||
+                anchor.relList.contains("external")
+            )
+                return;
+            const target =
+                anchor.getAttribute("target") ??
+                document.querySelector("base[target]")?.getAttribute("target");
+            if (!target || target === "_self") event.preventDefault();
+        },
+        { capture: true },
+    );
 
     let generation = 0;
     let pendingBrowserMotion = false;
-    let _browserMotion = false;
-    let _routeMotionActive = false;
+    let preset: RouteMotionPreset = "none";
+    let motion: RouteMotion | undefined;
     window.addEventListener(
         "popstate",
         (event) => {
@@ -79,25 +152,46 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
     document.addEventListener("astro:before-preparation", (event) => {
         const navigation = event as unknown as NavigationEvent;
         const current = ++generation;
-        _routeMotionActive = false;
-        _browserMotion = pendingBrowserMotion && navigation.navigationType === "traverse";
+        pendingNavigation = current;
+        const cancelPreparation = () => {
+            if (current !== generation) return;
+            pendingNavigation = 0;
+            clearNavigationState();
+        };
+        motion?.cancel();
+        // Only the incoming heading animates. Drop any prior marker without
+        // measuring/capturing a hidden outgoing title or flushing its layout.
+        clearFocusVisibility();
+        preset = getRouteMotionPreset({
+            from: new URL(navigation.from, window.location.href),
+            to: new URL(navigation.to, window.location.href),
+            navigationType: navigation.navigationType,
+            intent:
+                navigation.sourceElement
+                    ?.closest("[data-stalux-motion]")
+                    ?.getAttribute("data-stalux-motion") ?? undefined,
+            reducedMotion: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,
+            browserMotion: pendingBrowserMotion && navigation.navigationType === "traverse",
+            hidden: document.hidden,
+        });
         pendingBrowserMotion = false;
-        setNavigationState(navigation);
-        navigation.signal.addEventListener(
-            "abort",
-            () => {
-                if (current === generation) clearNavigationState();
-            },
-            { once: true },
-        );
+        setNavigationState(navigation, preset);
+        navigation.signal.addEventListener("abort", cancelPreparation, { once: true });
+        if (navigation.signal.aborted) cancelPreparation();
         queueMicrotask(() => {
-            if (event.defaultPrevented && current === generation) clearNavigationState();
+            if (event.defaultPrevented) cancelPreparation();
         });
         const loader = navigation.loader;
         navigation.loader = async () => {
-            await loader();
-            if (!event.defaultPrevented) {
-                await prepareNavigationFont(navigation.newDocument, navigation.signal);
+            try {
+                await loader();
+                if (event.defaultPrevented) cancelPreparation();
+                else {
+                    await prepareNavigationFont(navigation.newDocument, navigation.signal);
+                }
+            } catch (error) {
+                cancelPreparation();
+                throw error;
             }
         };
     });
@@ -106,32 +200,34 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         const navigation = event as unknown as NavigationEvent;
         if (navigation.signal.aborted) return;
         const current = generation;
+        swappedNavigation = current;
         preserveHeaderMetrics(navigation.newDocument);
-        _routeMotionActive = true;
         // Astro replaces the root attributes during swap. Carry state into the
         // new document; CSS keyframes read these data-* attributes to pick their
         // own direction rather than letting Astro's default `fade` pair apply.
-        setNavigationState(navigation, navigation.newDocument.documentElement);
+        setNavigationState(navigation, preset, navigation.newDocument.documentElement);
+        // This release uses CSS/native VT only. Settle the existing installation
+        // gate without starting a second WAAPI effect; analytics/background keep
+        // the same shared ready/finished semantics and their existing listeners.
+        motion = prepareRouteMotion(navigation);
+        motion.start(null, { skip: true });
         const finish = () => {
             if (current === generation) clearNavigationState();
         };
-        // ViewTransition.ready fires when pseudo-elements are painted out; we
-        // use it as the handoff boundary so our WAAPI for new content starts
-        // *after* the native swap has painted its snapshot.
-        const native = navigation.viewTransition;
-        Promise.resolve(native?.ready)
-            .then(
-                () => undefined,
-                () => undefined,
-            )
-            .then(finish);
+        // Native ready starts the animation. Keep selectors until it finishes,
+        // including fallback/skip and abort; an older navigation cannot clear a
+        // newer one's state.
+        void motion.finished.then(finish, finish);
     });
 
     document.addEventListener("astro:after-swap", () => {
         setRouteState(window.location.pathname);
+        if (preset !== "none") updateFocusVisibility();
     });
 
     document.addEventListener("astro:page-load", () => {
+        // A previous route's scripts can finish while a newer loader is pending.
+        if (swappedNavigation === generation) pendingNavigation = 0;
         setRouteState(window.location.pathname);
     });
 

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-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}.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}}@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-vt-old-fwd{0%{opacity:1;transform:translate(0,0)}45%{opacity:.5}to{opacity:0;transform:translate(-6%)}}@keyframes stalux-vt-new-fwd{0%{opacity:0;filter:blur(1.2px);transform:translate(6%)scale(.985)}60%{opacity:.9;filter:blur();transform:translate(-.8%)scale(1)}to{opacity:1;filter:blur();transform:translate(0,0)}}@keyframes stalux-vt-old-back{0%{opacity:1;transform:translate(0,0)}45%{opacity:.5}to{opacity:0;transform:translate(6%)}}@keyframes stalux-vt-new-back{0%{opacity:0;filter:blur(1.2px);transform:translate(-6%)scale(.985)}60%{opacity:.9;filter:blur();transform:translate(.8%)scale(1)}to{opacity:1;filter:blur();transform:translate(0,0)}}html[data-astro-transition=forward]::view-transition-old(stalux-page){animation:.38s cubic-bezier(.22,.72,.22,1) both stalux-vt-old-fwd}html[data-astro-transition=forward]::view-transition-new(stalux-page){animation:.46s cubic-bezier(.22,.72,.22,1) both stalux-vt-new-fwd}html[data-astro-transition=back]::view-transition-old(stalux-page){animation:.38s cubic-bezier(.22,.72,.22,1) both stalux-vt-old-back}html[data-astro-transition=back]::view-transition-new(stalux-page){animation:.46s cubic-bezier(.22,.72,.22,1) both stalux-vt-new-back}@keyframes stalux-vt-side-out{to{opacity:0;transform:translate3d(var(--stalux-side-out-x,-14px), 0, 0)}}@keyframes stalux-vt-side-in{0%{opacity:0;transform:translate3d(var(--stalux-side-in-x,14px), 0, 0)}to{opacity:1;transform:translate(0,0)}}html,[data-astro-transition-persist],[data-stalux-site-header],[data-stalux-site-header] *,.bg-layer,.bg-layer *,[data-stalux-scroll-sentinel],[data-stalux-scroll-sentinel] *,[data-stalux-back-to-top],[data-stalux-back-to-top] *{view-transition-name:none!important}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left: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)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){filter:none!important;animation-duration:1ms!important;animation-delay:0s!important;transform:none!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}.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}}@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}html,[data-astro-transition-persist],.stalux-main,.stalux-main *,.bg-layer,.bg-layer *,[data-stalux-scroll-sentinel],[data-stalux-back-to-top]{view-transition-name:none!important}html[data-stalux-vt-preset] .stalux-main [data-stalux-motion-focus][data-stalux-motion-visible=true]{view-transition-name:stalux-focus!important}html[data-stalux-vt-preset=none] .stalux-main [data-stalux-motion-focus][data-stalux-motion-visible=true]{view-transition-name:none!important}::view-transition-group(stalux-focus){animation:none}::view-transition-image-pair(stalux-focus){isolation:auto}::view-transition-old(stalux-focus){animation:none;display:none}::view-transition-new(stalux-focus){mix-blend-mode:normal;animation:.12s cubic-bezier(.2,.7,.2,1) both stalux-focus-fade}html[data-stalux-vt-preset=enter]::view-transition-new(stalux-focus){animation:.16s cubic-bezier(.2,.7,.2,1) both stalux-focus-enter}html[data-stalux-vt-preset=up]::view-transition-new(stalux-focus){animation:.14s cubic-bezier(.2,.7,.2,1) both stalux-focus-up}html[data-stalux-vt-preset=taxonomy]::view-transition-new(stalux-focus){animation:.14s cubic-bezier(.2,.7,.2,1) both stalux-focus-fade}html[data-stalux-vt-preset=previous]::view-transition-new(stalux-focus){animation:.16s cubic-bezier(.2,.7,.2,1) both stalux-focus-previous}html[data-stalux-vt-preset=next]::view-transition-new(stalux-focus){animation:.16s cubic-bezier(.2,.7,.2,1) both stalux-focus-next}html[data-stalux-vt-preset=home]::view-transition-new(stalux-focus){animation:.18s cubic-bezier(.2,.7,.2,1) both stalux-focus-home}html[data-stalux-vt-preset=restore]::view-transition-new(stalux-focus){animation:.1s cubic-bezier(.2,.7,.2,1) both stalux-focus-restore}html[data-stalux-vt-preset=error]::view-transition-new(stalux-focus){animation:.1s cubic-bezier(.2,.7,.2,1) both stalux-focus-fade}@keyframes stalux-focus-fade{0%{opacity:.86}to{opacity:1}}@keyframes stalux-focus-enter{0%{opacity:.86;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-focus-up{0%{opacity:.9;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-focus-previous{0%{opacity:.9;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-focus-next{0%{opacity:.9;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-focus-home{0%{opacity:.9;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-focus-restore{0%{opacity:.96}to{opacity:1}}@keyframes stalux-page-exit{0%{opacity:1}to{opacity:1}}@keyframes stalux-page-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-page-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-taxonomy-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-taxonomy-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-article-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-article-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-left-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-back-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-back-out{0%{opacity:1}to{opacity:1}}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left:0}@media (width<=768px){html[data-stalux-vt-preset]::view-transition-new(stalux-focus){animation:.12s cubic-bezier(.2,.7,.2,1) both stalux-focus-fade}html[data-stalux-vt-preset=restore]::view-transition-new(stalux-focus){animation:.1s cubic-bezier(.2,.7,.2,1) both stalux-focus-restore}}@media (prefers-reduced-motion:reduce){html[data-stalux-vt-preset] .stalux-main [data-stalux-motion-focus][data-stalux-motion-visible=true]{view-transition-name:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){filter:none!important;animation:none!important;transform:none!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

@@ -28,296 +28,311 @@
     animation-delay: 0.35s;
 }
 
-/* =========================================================
-   View Transitions：主内容 slide + 淡入 + 新内容 scale+blur 到清晰，
-   与 Astro 默认的纯淡入淡出不同 — 旧内容沿方向快速滑出，新内容对向滑入
-   带轻微 scale 从 0.985 拉回 1，配合 1.2px blur 再还原。
-   forwards (direction = "forward" | "push"): 旧内容向左滑出，新内容从右滑入
-   backwards (direction = "back" | "traverse"): 镜像方向
-   持久壳层（header、背景、sentinel、back-to-top 按钮）设
-   view-transition-name: none 不生成快照、原地即时更新；<main>（stalux-page）
-   及其内部命名元素（标题/侧边栏/文章容器等）保留各自的 VT 组，
-   由方向伪元素规则 + 局部 transition:animate 分层驱动。
-   ========================================================= */
-
-/* 主内容 View Transition 动画（方向感知：前进/回退镜像）。
-   方向机制：Astro 路由器在 startViewTransition 之前给 <html> 写
-   data-astro-transition="forward|back"（router.js:369），整个动画期间保留，
-   直到 viewTransition.finished 才移除（router.js:423）。::view-transition-*
-   伪元素树的 originating element 就是 <html>，因此 html[attr]::view-transition-old(x)
-   可以按方向匹配（popstate 时 router.js:470 按 history index 给出真实方向）。
-   ⚠ 约束 1：伪元素规则必须写成**直接引用 keyframes 的完整 animation shorthand** ——
-   var() fallback 字符串（`var(--x, keyframesName)`）不会被 Rolldown tree-shake
-   静态追踪，fallback 里的 keyframes 名会被判为"未引用"而裁掉。
-   ⚠ 约束 2：::view-transition-old/new() 参数里只能放自定义 transition-name 或 *，
-   不能放属性选择器（legacy 实验语法，lightningcss minify 不支持）。
-   ⚠ 约束 3：任意祖先元素（body/div 等）做 originating element 不成立；
-   只有 <html> 复合选择器有效。 */
-
-/* forward：进入下一层 —— 旧页向左滑出，新页自右滑入并 scale+blur 收敛 */
-@keyframes stalux-vt-old-fwd {
-    0% {
+/* Route motion captures one visible heading, never a long main/article.
+   The router owns data-stalux-vt-preset and confirms visibility once per DOM.
+   Keep literal keyframe references: production CSS removes unreferenced frames. */
+html,
+[data-astro-transition-persist],
+.stalux-main,
+.stalux-main *,
+.bg-layer,
+.bg-layer *,
+[data-stalux-scroll-sentinel],
+[data-stalux-back-to-top] {
+    view-transition-name: none !important;
+}
+
+html[data-stalux-vt-preset]
+    .stalux-main
+    [data-stalux-motion-focus][data-stalux-motion-visible="true"] {
+    view-transition-name: stalux-focus !important;
+}
+
+html[data-stalux-vt-preset="none"]
+    .stalux-main
+    [data-stalux-motion-focus][data-stalux-motion-visible="true"] {
+    view-transition-name: none !important;
+}
+
+/* Different headings must not interpolate width, height, position or text size.
+   Old content stays readable until swap; only the small new heading animates. */
+::view-transition-group(stalux-focus) {
+    animation: none;
+}
+
+::view-transition-image-pair(stalux-focus) {
+    isolation: auto;
+}
+
+::view-transition-old(stalux-focus) {
+    display: none;
+    animation: none;
+}
+
+::view-transition-new(stalux-focus) {
+    mix-blend-mode: normal;
+    animation: stalux-focus-fade 120ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="enter"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-enter 160ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="up"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-up 140ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="taxonomy"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-fade 140ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="previous"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-previous 160ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="next"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-next 160ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="home"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-home 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="restore"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-restore 100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+html[data-stalux-vt-preset="error"]::view-transition-new(stalux-focus) {
+    animation: stalux-focus-fade 100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+@keyframes stalux-focus-fade {
+    from {
+        opacity: 0.86;
+    }
+    to {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
     }
-    45% {
-        opacity: 0.5;
+}
+
+@keyframes stalux-focus-enter {
+    from {
+        opacity: 0.86;
+        transform: translateY(6px);
     }
-    100% {
-        opacity: 0;
-        transform: translate3d(-6%, 0, 0);
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
-@keyframes stalux-vt-new-fwd {
-    0% {
-        opacity: 0;
-        transform: translate3d(6%, 0, 0) scale(0.985);
-        filter: blur(1.2px);
-    }
-    60% {
+@keyframes stalux-focus-up {
+    from {
         opacity: 0.9;
-        transform: translate3d(-0.8%, 0, 0) scale(1);
-        filter: blur(0px);
+        transform: translateY(-4px);
     }
-    100% {
+    to {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
-        filter: blur(0px);
+        transform: translateY(0);
     }
 }
 
-/* back：返回上一层 —— 镜像：旧页向右滑出，新页自左滑入 */
-@keyframes stalux-vt-old-back {
-    0% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-    45% {
-        opacity: 0.5;
+@keyframes stalux-focus-previous {
+    from {
+        opacity: 0.9;
+        transform: translateX(-8px);
     }
-    100% {
-        opacity: 0;
-        transform: translate3d(6%, 0, 0);
+    to {
+        opacity: 1;
+        transform: translateX(0);
     }
 }
 
-@keyframes stalux-vt-new-back {
-    0% {
-        opacity: 0;
-        transform: translate3d(-6%, 0, 0) scale(0.985);
-        filter: blur(1.2px);
-    }
-    60% {
+@keyframes stalux-focus-next {
+    from {
         opacity: 0.9;
-        transform: translate3d(0.8%, 0, 0) scale(1);
-        filter: blur(0px);
+        transform: translateX(8px);
     }
-    100% {
+    to {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
-        filter: blur(0px);
+        transform: translateX(0);
     }
 }
 
-html[data-astro-transition="forward"]::view-transition-old(stalux-page) {
-    animation: stalux-vt-old-fwd 380ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
-}
-
-html[data-astro-transition="forward"]::view-transition-new(stalux-page) {
-    animation: stalux-vt-new-fwd 460ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
-}
-
-html[data-astro-transition="back"]::view-transition-old(stalux-page) {
-    animation: stalux-vt-old-back 380ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
-}
-
-html[data-astro-transition="back"]::view-transition-new(stalux-page) {
-    animation: stalux-vt-new-back 460ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+@keyframes stalux-focus-home {
+    from {
+        opacity: 0.9;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-/* 侧边栏 — 独立于 root：沿内容方向做 12px 平移 + 淡入淡出，
-   让文章详情页左右栏与主内容分层出现。 */
-@keyframes stalux-vt-side-out {
+@keyframes stalux-focus-restore {
+    from {
+        opacity: 0.96;
+    }
     to {
-        opacity: 0;
-        transform: translate3d(var(--stalux-side-out-x, -14px), 0, 0);
+        opacity: 1;
     }
 }
 
-@keyframes stalux-vt-side-in {
+/* Public transition helpers retain their names as opacity-only compatibility
+   frames. Theme layouts no longer use them to move large content/sidebars. */
+@keyframes stalux-page-exit {
     from {
-        opacity: 0;
-        transform: translate3d(var(--stalux-side-in-x, 14px), 0, 0);
+        opacity: 1;
     }
     to {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
     }
 }
-
-/* 持久壳层：header、背景、sentinel、back-to-top 按钮不参与 View Transition 伪元素；
-   直接设 view-transition-name: none 让浏览器为它们各自做即时更新。
-   这避免了原生快照把大体积 header 或整张背景图塞进 pseudo-element 树、
-   也与 view-transitions.ts 里的 .scrollY 优化保持一致 — 不强制 UI 同步。
-   ⚠ 注意：html 也必须压制 —— 压掉 root 组后整页快照不存在，
-   只有 stalux-page 与内部命名元素生成各自组，避免整页 fade 叠加。
-   ⚠ 不要把 .stalux-main / .stalux-main * 加进来：那会连 stalux-page 组
-   一起压掉，方向伪元素规则将全部失配（1.39.4 曾因此动画全死、路由瞬时切换）。 */
-html,
-[data-astro-transition-persist],
-[data-stalux-site-header],
-[data-stalux-site-header] *,
-.bg-layer,
-.bg-layer *,
-[data-stalux-scroll-sentinel],
-[data-stalux-scroll-sentinel] *,
-[data-stalux-back-to-top],
-[data-stalux-back-to-top] * {
-    view-transition-name: none !important;
+@keyframes stalux-page-enter {
+    from {
+        opacity: 0.9;
+    }
+    to {
+        opacity: 1;
+    }
 }
-
-/* BackToTop visibility sentinel */
-[data-stalux-scroll-sentinel] {
-    position: absolute;
-    top: 240px;
-    left: 0;
-    width: 1px;
-    height: 1px;
-    visibility: hidden;
-    pointer-events: none;
+@keyframes stalux-page-enter-back {
+    from {
+        opacity: 0.96;
+    }
+    to {
+        opacity: 1;
+    }
 }
-
-/* =========================================================
-   下面保留的是 Astro transition:animate 用的 web 动画 keyframes，
-   供 getSidebarAnimation("left"|"right") 和分类/文章页内局部
-   transition:animate 消费；与 View Transition 伪元素层互不冲突。
-   ========================================================= */
-
 @keyframes stalux-taxonomy-enter {
     from {
-        opacity: 0;
-        transform: translateX(12px);
+        opacity: 0.9;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-taxonomy-enter-back {
     from {
-        opacity: 0;
-        transform: translateX(-12px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-article-enter {
     from {
-        opacity: 0;
-        transform: translateY(6px);
+        opacity: 0.9;
     }
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }
-
 @keyframes stalux-article-enter-back {
     from {
-        opacity: 0;
-        transform: translateY(-6px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }
-
 @keyframes stalux-sidebar-left-in {
     from {
-        opacity: 0;
-        transform: translateX(-14px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-sidebar-left-out {
+    from {
+        opacity: 1;
+    }
     to {
-        opacity: 0;
-        transform: translateX(-10px);
+        opacity: 1;
     }
 }
-
 @keyframes stalux-sidebar-left-back-in {
     from {
-        opacity: 0;
-        transform: translateX(14px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-sidebar-left-back-out {
+    from {
+        opacity: 1;
+    }
     to {
-        opacity: 0;
-        transform: translateX(10px);
+        opacity: 1;
     }
 }
-
 @keyframes stalux-sidebar-right-in {
     from {
-        opacity: 0;
-        transform: translateX(14px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-sidebar-right-out {
+    from {
+        opacity: 1;
+    }
     to {
-        opacity: 0;
-        transform: translateX(10px);
+        opacity: 1;
     }
 }
-
 @keyframes stalux-sidebar-right-back-in {
     from {
-        opacity: 0;
-        transform: translateX(-14px);
+        opacity: 0.96;
     }
     to {
         opacity: 1;
-        transform: translateX(0);
     }
 }
-
 @keyframes stalux-sidebar-right-back-out {
+    from {
+        opacity: 1;
+    }
     to {
-        opacity: 0;
-        transform: translateX(-10px);
+        opacity: 1;
+    }
+}
+
+[data-stalux-scroll-sentinel] {
+    position: absolute;
+    top: 240px;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+/* Small screens get the same deterministic timing with no spatial motion. */
+@media (max-width: 768px) {
+    html[data-stalux-vt-preset]::view-transition-new(stalux-focus) {
+        animation: stalux-focus-fade 120ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+    }
+    html[data-stalux-vt-preset="restore"]::view-transition-new(stalux-focus) {
+        animation: stalux-focus-restore 100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
     }
 }
 
-/* prefers-reduced-motion：关闭 View Transition 伪元素上的所有动画，
-   但保留伪元素本身（浏览器会直接从 old 切到 new，视觉等价于无动画的软导航） */
 @media (prefers-reduced-motion: reduce) {
+    html[data-stalux-vt-preset]
+        .stalux-main
+        [data-stalux-motion-focus][data-stalux-motion-visible="true"] {
+        view-transition-name: none !important;
+    }
+
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
-        animation-duration: 1ms !important;
-        animation-delay: 0ms !important;
+        animation: none !important;
         filter: none !important;
         transform: none !important;
     }

package/src/utils/route-motion-policy.ts

@@ -0,0 +1,63 @@
+import { getRouteKind, normalizePublicPath } from "./public-routes";
+
+export type RouteMotionPreset =
+    | "none"
+    | "fade"
+    | "enter"
+    | "up"
+    | "taxonomy"
+    | "previous"
+    | "next"
+    | "home"
+    | "restore"
+    | "error";
+
+interface MotionContext {
+    from: URL;
+    to: URL;
+    navigationType?: string;
+    intent?: string;
+    reducedMotion?: boolean;
+    browserMotion?: boolean;
+    hidden?: boolean;
+}
+
+/** Choose a visual hint, never a navigation or scroll operation. */
+export function getRouteMotionPreset(context: MotionContext): RouteMotionPreset {
+    const { from, to } = context;
+    const source = getRouteKind(from.pathname);
+    const target = getRouteKind(to.pathname);
+    if (
+        context.hidden ||
+        context.reducedMotion ||
+        context.browserMotion ||
+        from.origin !== to.origin ||
+        source === "other" ||
+        target === "other" ||
+        (normalizePublicPath(from.pathname) === normalizePublicPath(to.pathname) &&
+            from.search === to.search)
+    ) {
+        return "none";
+    }
+    // Both directions restore an existing history entry. A push to a parent
+    // route is not a history traversal, and an article's previous/next is not back.
+    if (context.navigationType === "traverse") return "restore";
+    if (context.navigationType === "replace") return "fade";
+    if (target === "not-found") return "error";
+    if (source === "not-found") return "fade";
+    if (target === "home") return "home";
+    if (source === "article" && target === "article") {
+        return context.intent === "previous" || context.intent === "next" ? context.intent : "fade";
+    }
+    if (target === "article") return "enter";
+    if (target === "tags-detail" || target === "categories-detail") return "taxonomy";
+    if (
+        (source === "article" &&
+            (target === "archive" || target === "tags-index" || target === "categories-index")) ||
+        (source === "tags-detail" && target === "tags-index") ||
+        (source === "categories-detail" && target === "categories-index")
+    ) {
+        return "up";
+    }
+    return source === "home" ? "enter" : "fade";
+}

package/src/utils/view-transitions.ts

@@ -35,10 +35,10 @@ export type RouteAnimation = {
     };
 };
 
-const easing = "cubic-bezier(0.22, 0.72, 0.22, 1)";
+const easing = "cubic-bezier(0.2, 0.7, 0.2, 1)";
 const exitAnimation: TransitionAnimation = {
     name: "stalux-page-exit",
-    duration: "0.14s",
+    duration: "0.1s",
     easing,
     fillMode: "both",
 };
@@ -49,7 +49,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: productionStyleName(`stalux-${name}`),
-                duration: "0.22s",
+                duration: "0.16s",
                 easing,
                 fillMode: "both",
             },
@@ -58,7 +58,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: productionStyleName(`stalux-${backName}`),
-                duration: "0.22s",
+                duration: "0.16s",
                 easing,
                 fillMode: "both",
             },
@@ -92,7 +92,7 @@ function createSidebarAnimation(
 ): TransitionAnimation {
     return {
         name: productionStyleName(`stalux-sidebar-${side}-${backwards ? "back-" : ""}${phase}`),
-        duration: "0.22s",
+        duration: "0.16s",
         easing,
         fillMode: "both",
     };