@xingwangzhe/stalux 1.39.4 → 1.40.0

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.0/docs/view-transitions-1.40.0.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.4",
+    "version": "1.40.0",
     "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-route": "ki",
-        "stalux-vt-old-route": "kj",
-        "stalux-vt-side-in": "kk",
-        "stalux-vt-side-out": "kl",
-        "stalux-vt-title-swap-new": "km",
-        "stalux-vt-title-swap-old": "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 {
@@ -63,10 +95,47 @@ const transitionWindow = window as TransitionWindow;
 if (!transitionWindow.__STALUX_VT_LISTENER__) {
     transitionWindow.__STALUX_VT_LISTENER__ = true;
 
+    // A current-page link is not a page replacement. Intercept before Astro's
+    // delegated handler, but keep propagation for menu cleanup and click tracking.
+    // Hash changes, explicit reloads, downloads and modified/new-tab clicks keep
+    // their native behavior.
+    document.addEventListener(
+        "click",
+        (event) => {
+            if (
+                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,10 +148,24 @@ 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";
+        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);
+        setNavigationState(navigation, preset);
         navigation.signal.addEventListener(
             "abort",
             () => {
@@ -95,9 +178,14 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         });
         const loader = navigation.loader;
         navigation.loader = async () => {
-            await loader();
-            if (!event.defaultPrevented) {
-                await prepareNavigationFont(navigation.newDocument, navigation.signal);
+            try {
+                await loader();
+                if (!event.defaultPrevented) {
+                    await prepareNavigationFont(navigation.newDocument, navigation.signal);
+                }
+            } catch (error) {
+                if (current === generation) clearNavigationState();
+                throw error;
             }
         };
     });
@@ -107,28 +195,27 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         if (navigation.signal.aborted) return;
         const current = generation;
         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", () => {

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-title-swap-old{to{opacity:0;filter:blur(2px);transform:scale(.94)}}@keyframes stalux-vt-title-swap-new{0%{opacity:0;filter:blur(2px);transform:scale(1.05)}70%{filter:blur();transform:scale(.98)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes stalux-vt-old-route{0%{opacity:1;transform:translate(0,0)}45%{opacity:.5}to{opacity:0;transform:translate(-6%)}}@keyframes stalux-vt-new-route{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)}}::view-transition-old(stalux-page){animation:.38s cubic-bezier(.22,.72,.22,1) both stalux-vt-old-route}::view-transition-new(stalux-page){animation:.46s cubic-bezier(.22,.72,.22,1) both stalux-vt-new-route}::view-transition-old(stalux-post-title){animation:.26s cubic-bezier(.22,.72,.22,1) both stalux-vt-title-swap-old}::view-transition-new(stalux-post-title){animation:.32s cubic-bezier(.22,.72,.22,1) both stalux-vt-title-swap-new}@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,.stalux-main,.stalux-main *,[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,287 +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、footer、背景、sentinel、back-to-top 按钮）设
-   view-transition-name: none 保留 DOM、不参与原生动画；标题/侧边栏/
-   卡片标题用局部 transition:animate 独立配置，与 root 伪元素分层。
-   方向值（forward | back）由 view-transitions.ts 写入 CSS 变量
-   --stalux-vt-old / --stalux-vt-new，伪元素继承后用 animation-name 切换。
-   ========================================================= */
-
-/* 标题 / 卡片标题交叉淡入 + 轻微缩放：让列表→详情的同名元素有“形态连续感” */
-@keyframes stalux-vt-title-swap-old {
-    to {
-        opacity: 0;
-        transform: scale(0.94);
-        filter: blur(2px);
-    }
+/* 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;
 }
 
-@keyframes stalux-vt-title-swap-new {
+::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;
-        transform: scale(1.05);
-        filter: blur(2px);
-    }
-    70% {
-        transform: scale(0.98);
-        filter: blur(0px);
+        opacity: 0.86;
     }
     to {
         opacity: 1;
-        transform: scale(1);
-        filter: blur(0px);
     }
 }
 
-/* 主内容 View Transition 动画。
-   ⚠ 约束 1：::view-transition-old() / ::view-transition-new() 属于独立 UA 伪元素树，
-   与 <html> 之间**没有祖先选择器关系**。
-   ⚠ 约束 2：CSS 变量 fallback 字符串（`var(--x, keyframesName)`）不会被 Rolldown
-   tree-shake 静态追踪 —— fallback 里的 keyframes 名会被判断为"没被引用"而裁掉。
-   所以伪元素规则必须写成**直接引用 keyframes 的完整 animation shorthand**。
-   ⚠ 约束 3：方向切换暂时放弃（祖先选择器命不中伪元素），backward 暂不镜像。
-   后续可用 WAAPI 运行时覆盖伪元素 keyframes 实现方向切换。 */
-
-@keyframes stalux-vt-old-route {
-    0% {
-        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-route {
-    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);
     }
 }
 
-::view-transition-old(stalux-page) {
-    animation: stalux-vt-old-route 380ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
-}
-
-::view-transition-new(stalux-page) {
-    animation: stalux-vt-new-route 460ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+@keyframes stalux-focus-previous {
+    from {
+        opacity: 0.9;
+        transform: translateX(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
-/* 标题交叉淡入：列表→详情 / 详情→详情 之间同名标题共享 transition:name 时
-   用一套独立动画（比 root 更快、更有“形态感”）。
-   注意：::view-transition-old/new 伪元素里不能放属性选择器（MDN 明确只接受
-   自定义 transition-name 字符串和 * 通配；属性选择器属于 legacy 浏览器实验
-   语法，lightningcss minify 不支持）。 */
-::view-transition-old(stalux-post-title) {
-    animation: stalux-vt-title-swap-old 260ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+@keyframes stalux-focus-next {
+    from {
+        opacity: 0.9;
+        transform: translateX(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
-::view-transition-new(stalux-post-title) {
-    animation: stalux-vt-title-swap-new 320ms 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,
-.stalux-main,
-.stalux-main *,
-[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",
     };