@xingwangzhe/stalux 1.40.1 → 1.41.1

package/README.md

@@ -18,7 +18,7 @@ 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 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).
+Route changes use native CSS View Transitions with CSS animations on the reading and list content; sidebars, navigation, footer and background remain stationary. The policy covers every theme route category: previous/next articles slide horizontally in opposite directions, home and information pages use gentle perspective turns, words use a small rotation, and taxonomy details enter vertically. Desktop and mobile both retain spatial motion: article-to-article switching lasts 260ms, while other route animations take 100–180ms. History traversal uses a shorter, smaller directional slide while Astro restores the reading position. Reduced motion, browser-provided history gestures and same-page anchors add no visible VT animation. Standalone HTML keeps native navigation. See the [1.41.0 transition policy and performance boundaries](https://github.com/xingwangzhe/stalux/blob/v1.41.0/docs/view-transitions-1.41.0.md).
 
 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.40.1",
+    "version": "1.41.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -135,7 +135,7 @@
         "@types/node": "^26.6.5",
         "@unocss/astro": "^66.11.0",
         "@vitest/coverage-v8": "^5.0.4",
-        "astro": "^7.4.1",
+        "astro": "^7.4.2",
         "knip": "^6.41.0",
         "typescript": "npm:@typescript/typescript6@6.0.2",
         "unocss": "^66.11.0",
@@ -143,6 +143,6 @@
         "vitest": "^5.0.4"
     },
     "peerDependencies": {
-        "astro": "^7.4.1"
+        "astro": "^7.4.2"
     }
 }

package/src/components/stalux/archives/archivesList.astro

@@ -53,7 +53,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
     }));
 ---
 
-<section class="stalux-archive-container">
+<section class="stalux-archive-container" data-stalux-motion-content>
     <div class="stalux-archive-page-header">
         <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (

package/src/components/stalux/categories/categoriesList.astro

@@ -7,7 +7,7 @@ import { getCategoryCountList } from "@utils/collections-stats";
 const categoryList = await getCategoryCountList(Astro.logger);
 ---
 
-<ul class="stalux-categories">
+<ul class="stalux-categories" data-stalux-motion-content>
     {categoryList.map((category) => (
         <li>
             <CategoriesCard category={category} />

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

@@ -18,6 +18,7 @@ const { heading, description } = Astro.props;
     {description && (
         <div
             class="stalux-page-description stalux-u-text-center"
+            data-stalux-motion-content
             transition:name="stalux-page-description"
             transition:animate="none"
         >

package/src/components/stalux/links/linkList.astro

@@ -10,7 +10,7 @@ const linksConfig = getLinksData(configEntries);
 const links = linksConfig?.sites ?? [];
 ---
 
-<ul class="stalux-links">
+<ul class="stalux-links" data-stalux-motion-content>
     {links.map((link) => (
         <li class="stalux-link-list-item">
             <LinkCard link={link} />

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

@@ -11,6 +11,7 @@ const summary = description?.trim();
 {summary && (
     <aside
         class="stalux-article-summary"
+        data-stalux-motion-content
         aria-label={label}
         transition:name={transitionName}
         transition:animate="none"

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

@@ -127,6 +127,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
     <!-- Article Body -->
     <section
         class="stalux-post-body stalux-prose"
+        data-stalux-motion-content
         data-pagefind-body
         data-stalux-post-id={props.postId === undefined ? undefined : String(props.postId)}
         data-pagefind-filter={props.postId === undefined ? undefined : "post[data-stalux-post-id]"}

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

@@ -11,7 +11,7 @@ const props = Astro.props as Props;
 const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
 ---
 
-<div data-stalux="postlist" class="stalux-post-list-container">
+<div data-stalux="postlist" class="stalux-post-list-container" data-stalux-motion-content>
     <ul class="post-list">
         {posts.map((post, index) => (
             <li>

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

@@ -22,7 +22,7 @@ const tagLinks = tagList.map((t) => ({
 ---
 
 <!-- 移动端：SSR 卡片 -->
-<div class="stalux-cloud-cards" id="tags-cards">
+<div class="stalux-cloud-cards" id="tags-cards" data-stalux-motion-content>
     {tagList.length > 0 ? (
         tagGroups.map((group) => (
             <div class="stalux-cloud-tag-group">
@@ -47,7 +47,11 @@ const tagLinks = tagList.map((t) => ({
 </div>
 
 <!-- 桌面端：Canvas 标签云 -->
-<div class="stalux-cloud-canvas-frame" style={{ "--cloud-density": cloudDensity }}>
+<div
+    class="stalux-cloud-canvas-frame"
+    style={{ "--cloud-density": cloudDensity }}
+    data-stalux-motion-content
+>
     <div class="stalux-cloud-canvas" id="tags-canvas" data-tags={JSON.stringify(tagLinks)}></div>
 </div>
 

package/src/components/stalux/words/wordList.astro

@@ -19,7 +19,7 @@ const sorted = [...entries].sort((a, b) => {
 });
 ---
 
-<ul class="stalux-word-list-list">
+<ul class="stalux-word-list-list" data-stalux-motion-content>
     {sorted.map((entry) => {
         return (
             <li class="stalux-word-list-item">

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

@@ -290,77 +290,80 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--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"
+        "--stalux-vt-distance": "--s1t",
+        "--stalux-vt-duration": "--s1u",
+        "--stalux-vt-rx": "--s1v",
+        "--stalux-vt-ry": "--s1w",
+        "--stalux-vt-rz": "--s1x",
+        "--stalux-vt-scale": "--s1y",
+        "--stalux-vt-tilt": "--s1z",
+        "--stalux-vt-x": "--s20",
+        "--stalux-vt-y": "--s21",
+        "--surface-glass": "--s22",
+        "--surface-glass-shadow": "--s23",
+        "--tag-bg": "--s24",
+        "--tag-bg-hover": "--s25",
+        "--tl-line": "--s26",
+        "--tl-pad": "--s27",
+        "--transition-fast": "--s28",
+        "--transition-medium": "--s29",
+        "--transition-normal": "--s2a",
+        "--transition-slow": "--s2b",
+        "--transition-slower": "--s2c",
+        "--transition-slowest": "--s2d",
+        "--un-rotate": "--s2e",
+        "--un-rotate-x": "--s2f",
+        "--un-rotate-y": "--s2g",
+        "--un-rotate-z": "--s2h",
+        "--un-scale-x": "--s2i",
+        "--un-scale-y": "--s2j",
+        "--un-scale-z": "--s2k",
+        "--un-skew-x": "--s2l",
+        "--un-skew-y": "--s2m",
+        "--un-translate-x": "--s2n",
+        "--un-translate-y": "--s2o",
+        "--un-translate-z": "--s2p",
+        "--updated-bg": "--s2q",
+        "--updated-border": "--s2r",
+        "--white-05p": "--s2s",
+        "--white-10p": "--s2t",
+        "--white-15p": "--s2u",
+        "--white-20p": "--s2v",
+        "--white-30p": "--s2w",
+        "--white-50p": "--s2x",
+        "--white-60p": "--s2y",
+        "--white-70p": "--s2z",
+        "--white-75p": "--s30",
+        "--white-78p": "--s31",
+        "--white-80p": "--s32",
+        "--white-85p": "--s33",
+        "--white-90p": "--s34",
+        "--white-95p": "--s35",
+        "--white-full": "--s36"
     },
     "animations": {
         "fadeInUpComment": "k0",
         "spin": "k1",
         "stalux-article-enter": "k2",
         "stalux-article-enter-back": "k3",
-        "stalux-cursor-blink": "k4",
-        "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"
+        "stalux-content-in": "k4",
+        "stalux-cursor-blink": "k5",
+        "stalux-link-avatar-spin": "k6",
+        "stalux-page-enter": "k7",
+        "stalux-page-enter-back": "k8",
+        "stalux-page-exit": "k9",
+        "stalux-random-spin": "ka",
+        "stalux-sidebar-left-back-in": "kb",
+        "stalux-sidebar-left-back-out": "kc",
+        "stalux-sidebar-left-in": "kd",
+        "stalux-sidebar-left-out": "ke",
+        "stalux-sidebar-right-back-in": "kf",
+        "stalux-sidebar-right-back-out": "kg",
+        "stalux-sidebar-right-in": "kh",
+        "stalux-sidebar-right-out": "ki",
+        "stalux-social-stalux-social-arrive": "kj",
+        "stalux-taxonomy-enter": "kk",
+        "stalux-taxonomy-enter-back": "kl",
+        "stalux-word-word-glow": "km"
     }
 };

package/src/pages/404.astro

@@ -19,8 +19,8 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
     >
         <div class="stalux-404-error-content">
             <h1 data-stalux-motion-focus>404</h1>
-            <p>{t("page404.pageNotFound")}</p>
-            <p class="agent-recovery">
+            <p data-stalux-motion-content>{t("page404.pageNotFound")}</p>
+            <p class="agent-recovery" data-stalux-motion-content>
                 This URL does not exist. Continue at the <a href="/">home page</a>, browse the
                 <a href="/archives/">archive</a>, read <a href="/llms.txt">llms.txt</a>, or inspect
                 the
@@ -29,12 +29,17 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
             </p>
             <p
                 id="countdown"
+                data-stalux-motion-content
                 class="stalux-404-countdown-text"
                 data-countdown-template={t("page404.countdown", { n: "{n}" })}
             >
                 {t("page404.countdown", { n: 5 })}
             </p>
-            <a href="/" class="stalux-404-home-btn home-btn" data-astro-prefetch
+            <a
+                href="/"
+                class="stalux-404-home-btn home-btn"
+                data-astro-prefetch
+                data-stalux-motion-content
                 >{t("page404.backHome")}</a
             >
         </div>

package/src/pages/index.astro

@@ -49,10 +49,12 @@ import { getSiteData } from "@utils/config-utils";
                 mutate data.
             </p>
         </section>
-        <Author />
-        <TextType />
-        <DateTime />
-        <SocialMedia />
-        <ToArchive />
+        <div data-stalux-home-content data-stalux-motion-content>
+            <Author />
+            <TextType />
+            <DateTime />
+            <SocialMedia />
+            <ToArchive />
+        </div>
     </div>
 </Stalux>

package/src/scripts/view-transitions.ts

@@ -53,29 +53,7 @@ function clearNavigationState(): void {
     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);
+    delete html.dataset.staluxVtPhase;
 }
 
 function preserveHeaderMetrics(nextDocument: Document): void {
@@ -159,9 +137,9 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
             clearNavigationState();
         };
         motion?.cancel();
-        // Only the incoming heading animates. Drop any prior marker without
-        // measuring/capturing a hidden outgoing title or flushing its layout.
-        clearFocusVisibility();
+        clearNavigationState();
+        // CSS moves only explicitly marked content, never the root or sidebars.
+        // Long article geometry does not need to be measured or captured.
         preset = getRouteMotionPreset({
             from: new URL(navigation.from, window.location.href),
             to: new URL(navigation.to, window.location.href),
@@ -206,11 +184,29 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         // new document; CSS keyframes read these data-* attributes to pick their
         // own direction rather than letting Astro's default `fade` pair apply.
         setNavigationState(navigation, preset, navigation.newDocument.documentElement);
+        if (preset !== "none") {
+            navigation.newDocument.documentElement.dataset.staluxVtPhase = "prepared";
+        }
         // 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 });
+        // Preparing the incoming content paused prevents a one-frame flash at
+        // its final position. Release it with the heading's native animation;
+        // page scripts and Astro's scroll restoration keep their normal order.
+        void Promise.resolve(navigation.viewTransition?.ready).then(
+            () => {
+                if (
+                    current === generation &&
+                    !navigation.signal.aborted &&
+                    document.documentElement.dataset.staluxVtPhase === "prepared"
+                ) {
+                    document.documentElement.dataset.staluxVtPhase = "running";
+                }
+            },
+            () => {},
+        );
         const finish = () => {
             if (current === generation) clearNavigationState();
         };
@@ -222,7 +218,6 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
 
     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}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}}
+@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-vt-duration:.16s;--stalux-vt-distance:clamp(28px, 4vw, 40px);--stalux-vt-tilt:8deg;--stalux-vt-x:var(--stalux-vt-distance);--stalux-vt-y:0px;--stalux-vt-rx:0deg;--stalux-vt-ry:0deg;--stalux-vt-rz:-.35deg;--stalux-vt-scale:1}html[data-stalux-vt-preset]:not([data-stalux-vt-preset=none]) [data-stalux-motion-focus]{view-transition-name:stalux-focus!important}::view-transition{pointer-events:none}::view-transition-group(stalux-focus){animation:none!important}::view-transition-old(stalux-focus){display:none;animation:none!important}::view-transition-new(stalux-focus){mix-blend-mode:normal;transform-origin:50%;backface-visibility:hidden;animation:stalux-content-in var(--stalux-vt-duration,.16s) cubic-bezier(.22, .7, .2, 1) both paused}html[data-stalux-vt-phase=prepared] [data-stalux-motion-content],html[data-stalux-vt-phase=running] [data-stalux-motion-content]{transform-origin:50% min(42vh,400px);backface-visibility:hidden;animation:stalux-content-in var(--stalux-vt-duration,.16s) cubic-bezier(.22, .7, .2, 1) both paused}html[data-stalux-vt-phase=running] [data-stalux-motion-content],html[data-stalux-vt-phase=running]::view-transition-new(stalux-focus){animation-play-state:running}html[data-stalux-vt-phase] .stalux-article{overflow:clip}[data-stalux-home-content]{flex-direction:column;align-items:center;width:100%;display:flex}html[data-stalux-vt-preset=enter]{--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.25);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=article]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.25);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=next]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=previous]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * -1.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=up]{--stalux-vt-duration:.14s;--stalux-vt-x:calc(var(--stalux-vt-distance) * -.75);--stalux-vt-y:-10px;--stalux-vt-rz:0deg}html[data-stalux-vt-preset=taxonomy]{--stalux-vt-duration:.14s;--stalux-vt-x:0px;--stalux-vt-y:18px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * -.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=panel]{--stalux-vt-x:calc(var(--stalux-vt-distance) * .6);--stalux-vt-ry:calc(var(--stalux-vt-tilt) * -1);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=panel][data-stalux-vt-to=links]{--stalux-vt-x:0px;--stalux-vt-y:12px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * .75);--stalux-vt-ry:0deg}html[data-stalux-vt-preset=panel][data-stalux-vt-to=words]{--stalux-vt-x:0px;--stalux-vt-y:16px;--stalux-vt-ry:0deg;--stalux-vt-rz:-1deg}html[data-stalux-vt-preset=home]{--stalux-vt-duration:.18s;--stalux-vt-x:0px;--stalux-vt-y:20px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * -.625);--stalux-vt-rz:0deg;--stalux-vt-scale:.985}html[data-stalux-vt-preset=restore]{--stalux-vt-duration:.1s;--stalux-vt-x:12px;--stalux-vt-rz:0deg}html[data-stalux-vt-preset=restore][data-stalux-vt-direction=back],html[data-stalux-vt-preset=restore][data-stalux-vt-direction=backward]{--stalux-vt-x:-12px}html[data-stalux-vt-preset=error]{--stalux-vt-duration:.12s;--stalux-vt-x:0px;--stalux-vt-y:12px;--stalux-vt-rz:-.7deg}@keyframes stalux-content-in{0%{opacity:.25;transform:perspective(1200px) translate3d(var(--stalux-vt-x), var(--stalux-vt-y), 0) rotateX(var(--stalux-vt-rx)) rotateY(var(--stalux-vt-ry)) rotateZ(var(--stalux-vt-rz)) scale(var(--stalux-vt-scale))}55%{opacity:1}to{opacity:1;transform:perspective(1200px)translate(0,0)rotateX(0)rotateY(0)rotate(0)scale(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]:not([data-stalux-vt-preset=none]){--stalux-vt-distance:20px;--stalux-vt-tilt:4deg}html[data-stalux-vt-preset=restore]{--stalux-vt-x:8px}html[data-stalux-vt-preset=restore][data-stalux-vt-direction=back],html[data-stalux-vt-preset=restore][data-stalux-vt-direction=backward]{--stalux-vt-x:-8px}}@media (prefers-reduced-motion:reduce){html[data-stalux-vt-preset],html[data-stalux-vt-preset] [data-astro-transition-persist]{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,9 +28,8 @@
     animation-delay: 0.35s;
 }
 
-/* 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. */
+/* Only a bounded heading is captured by native VT. Long article/list content
+   stays in the live DOM; sidebars, navigation, footer and backgrounds stay put. */
 html,
 [data-astro-transition-persist],
 .stalux-main,
@@ -42,143 +41,162 @@ html,
     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] {
+    --stalux-vt-duration: 160ms;
+    --stalux-vt-distance: clamp(28px, 4vw, 40px);
+    --stalux-vt-tilt: 8deg;
+    --stalux-vt-x: var(--stalux-vt-distance);
+    --stalux-vt-y: 0px;
+    --stalux-vt-rx: 0deg;
+    --stalux-vt-ry: 0deg;
+    --stalux-vt-rz: -0.35deg;
+    --stalux-vt-scale: 1;
 }
 
-html[data-stalux-vt-preset="none"]
-    .stalux-main
-    [data-stalux-motion-focus][data-stalux-motion-visible="true"] {
-    view-transition-name: none !important;
+html[data-stalux-vt-preset]:not([data-stalux-vt-preset="none"]) [data-stalux-motion-focus] {
+    view-transition-name: stalux-focus !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 {
+    pointer-events: none;
 }
-
-::view-transition-image-pair(stalux-focus) {
-    isolation: auto;
+::view-transition-group(stalux-focus) {
+    animation: none !important;
 }
-
 ::view-transition-old(stalux-focus) {
     display: none;
-    animation: none;
+    animation: none !important;
 }
-
 ::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;
-    }
-}
-
-@keyframes stalux-focus-enter {
-    from {
-        opacity: 0.86;
-        transform: translateY(6px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-focus-up {
+    transform-origin: 50% 50%;
+    backface-visibility: hidden;
+    animation: stalux-content-in var(--stalux-vt-duration, 160ms) cubic-bezier(0.22, 0.7, 0.2, 1)
+        both paused;
+}
+
+/* The incoming document starts paused, before it can be painted. Native ready
+   releases both the small heading and live content in the same style update. */
+html[data-stalux-vt-phase="prepared"] [data-stalux-motion-content],
+html[data-stalux-vt-phase="running"] [data-stalux-motion-content] {
+    transform-origin: 50% min(42vh, 400px);
+    backface-visibility: hidden;
+    animation: stalux-content-in var(--stalux-vt-duration, 160ms) cubic-bezier(0.22, 0.7, 0.2, 1)
+        both paused;
+}
+html[data-stalux-vt-phase="running"] [data-stalux-motion-content],
+html[data-stalux-vt-phase="running"]::view-transition-new(stalux-focus) {
+    animation-play-state: running;
+}
+html[data-stalux-vt-phase] .stalux-article {
+    /* Clip a sliding paragraph at its reading card, without a scroll container. */
+    overflow: clip;
+}
+[data-stalux-home-content] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+/* Reading follows a horizontal page sequence; prev/next articles are siblings
+   in that sequence, so they keep a lateral glide. Vertical travel is reserved
+   for hierarchical moves (list -> detail, back up to the archive). A slower
+   260ms window keeps the longer sibling travel legible instead of abrupt. */
+html[data-stalux-vt-preset="enter"] {
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * 1.25);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="article"] {
+    --stalux-vt-duration: 260ms;
+    --stalux-vt-distance: clamp(36px, 5vw, 56px);
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * 1.25);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="next"] {
+    --stalux-vt-duration: 260ms;
+    --stalux-vt-distance: clamp(36px, 5vw, 56px);
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * 1.5);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="previous"] {
+    --stalux-vt-duration: 260ms;
+    --stalux-vt-distance: clamp(36px, 5vw, 56px);
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * -1.5);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="up"] {
+    --stalux-vt-duration: 140ms;
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * -0.75);
+    --stalux-vt-y: -10px;
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="taxonomy"] {
+    --stalux-vt-duration: 140ms;
+    --stalux-vt-x: 0px;
+    --stalux-vt-y: 18px;
+    --stalux-vt-rx: calc(var(--stalux-vt-tilt) * -0.5);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="panel"] {
+    --stalux-vt-x: calc(var(--stalux-vt-distance) * 0.6);
+    --stalux-vt-ry: calc(var(--stalux-vt-tilt) * -1);
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="panel"][data-stalux-vt-to="links"] {
+    --stalux-vt-x: 0px;
+    --stalux-vt-y: 12px;
+    --stalux-vt-rx: calc(var(--stalux-vt-tilt) * 0.75);
+    --stalux-vt-ry: 0deg;
+}
+html[data-stalux-vt-preset="panel"][data-stalux-vt-to="words"] {
+    --stalux-vt-x: 0px;
+    --stalux-vt-y: 16px;
+    --stalux-vt-ry: 0deg;
+    --stalux-vt-rz: -1deg;
+}
+html[data-stalux-vt-preset="home"] {
+    --stalux-vt-duration: 180ms;
+    --stalux-vt-x: 0px;
+    --stalux-vt-y: 20px;
+    --stalux-vt-rx: calc(var(--stalux-vt-tilt) * -0.625);
+    --stalux-vt-rz: 0deg;
+    --stalux-vt-scale: 0.985;
+}
+/* History restores the actual reading position. Small mirrored translation
+   signals direction without re-playing the page-entry tilt at a deep scroll. */
+html[data-stalux-vt-preset="restore"] {
+    --stalux-vt-duration: 100ms;
+    --stalux-vt-x: 12px;
+    --stalux-vt-rz: 0deg;
+}
+html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="back"],
+html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="backward"] {
+    --stalux-vt-x: -12px;
+}
+html[data-stalux-vt-preset="error"] {
+    --stalux-vt-duration: 120ms;
+    --stalux-vt-x: 0px;
+    --stalux-vt-y: 12px;
+    --stalux-vt-rz: -0.7deg;
+}
+
+@keyframes stalux-content-in {
     from {
-        opacity: 0.9;
-        transform: translateY(-4px);
+        opacity: 0.25;
+        transform: perspective(1200px) translate3d(var(--stalux-vt-x), var(--stalux-vt-y), 0)
+            rotateX(var(--stalux-vt-rx)) rotateY(var(--stalux-vt-ry)) rotateZ(var(--stalux-vt-rz))
+            scale(var(--stalux-vt-scale));
     }
-    to {
+    55% {
         opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-focus-previous {
-    from {
-        opacity: 0.9;
-        transform: translateX(-8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes stalux-focus-next {
-    from {
-        opacity: 0.9;
-        transform: translateX(8px);
     }
     to {
         opacity: 1;
-        transform: translateX(0);
+        transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg)
+            rotateZ(0deg) scale(1);
     }
 }
-
-@keyframes stalux-focus-home {
-    from {
-        opacity: 0.9;
-        transform: translateY(4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-focus-restore {
-    from {
-        opacity: 0.96;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
 /* 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 {
@@ -312,20 +330,24 @@ html[data-stalux-vt-preset="error"]::view-transition-new(stalux-focus) {
     pointer-events: none;
 }
 
-/* Small screens get the same deterministic timing with no spatial motion. */
+/* Phone routes keep direction and depth with smaller travel/angles. */
 @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]:not([data-stalux-vt-preset="none"]) {
+        --stalux-vt-distance: 20px;
+        --stalux-vt-tilt: 4deg;
+    }
+    html[data-stalux-vt-preset="restore"] {
+        --stalux-vt-x: 8px;
     }
-    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="restore"][data-stalux-vt-direction="back"],
+    html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="backward"] {
+        --stalux-vt-x: -8px;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    html[data-stalux-vt-preset]
-        .stalux-main
-        [data-stalux-motion-focus][data-stalux-motion-visible="true"] {
+    html[data-stalux-vt-preset],
+    html[data-stalux-vt-preset] [data-astro-transition-persist] {
         view-transition-name: none !important;
     }
 

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

@@ -2,7 +2,9 @@ import { getRouteKind, normalizePublicPath } from "./public-routes";
 
 export type RouteMotionPreset =
     | "none"
-    | "fade"
+    | "glide"
+    | "article"
+    | "panel"
     | "enter"
     | "up"
     | "taxonomy"
@@ -42,14 +44,17 @@ export function getRouteMotionPreset(context: MotionContext): RouteMotionPreset
     // 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 (context.navigationType === "replace") return "glide";
     if (target === "not-found") return "error";
-    if (source === "not-found") return "fade";
+    if (source === "not-found") return "glide";
     if (target === "home") return "home";
     if (source === "article" && target === "article") {
-        return context.intent === "previous" || context.intent === "next" ? context.intent : "fade";
+        return context.intent === "previous" || context.intent === "next"
+            ? context.intent
+            : "article";
     }
     if (target === "article") return "enter";
+    if (target === "about" || target === "links" || target === "words") return "panel";
     if (target === "tags-detail" || target === "categories-detail") return "taxonomy";
     if (
         (source === "article" &&
@@ -59,5 +64,5 @@ export function getRouteMotionPreset(context: MotionContext): RouteMotionPreset
     ) {
         return "up";
     }
-    return source === "home" ? "enter" : "fade";
+    return source === "home" ? "enter" : "glide";
 }