@font-face {
    font-family: "Portfolio Source Han Sans";
    src: url("../fonts/SourceHanSansCN-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Portfolio Source Han Sans";
    src: url("../fonts/SourceHanSansCN-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Portfolio Source Han Sans";
    src: url("../fonts/SourceHanSansCN-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    /* 所有界面文字统一使用随项目交付的思源黑体，避免系统字体回退。 */
    --font-sans: "Portfolio Source Han Sans", "Source Han Sans CN", sans-serif;

    /* 悬浮速度与曲线 */
    --hover-dur: 0.35s;
    --hover-ease: cubic-bezier(0.25, 1, 0.5, 1);

    /* 展开/收起节奏：封面先完整打开，卡片随后同步位移、放大与翻面。 */
    --cover-dur: 0.64s;
    --card-move-dur: 0.72s;
    --card-flip-dur: 0.72s;
    --card-spread-dur: 0.78s;
    --notebook-depth-dur: 0.44s;
    --card-return-dur: 0.90s;
    --notebook-fade-dur: 0.34s;
    --scene-color: #eab308;
    --scene-ink: #7a5000;
    --scene-dur: 0.78s;
    --anim-ease: cubic-bezier(0.65, 0, 0.35, 1);
    /* 卡片位移与翻面共用同一进度曲线：离开笔记本时立即开始翻，
       抵达中心时同时完成，反向收起也保持完全同步。 */
    --focus-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --flight-ease: var(--focus-ease);
    --spread-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* 书内卡片继续沿用原始响应式尺寸。展开态使用独立的真实几何：
       R9000P 一类桌面视口约为大屏标准 520px 的 80%，大屏连续回到原尺寸。 */
    --spread-edge: clamp(24px, 5vw, 96px);
    --card-gap: clamp(20px, 2vw, 36px);
    --folded-card-w: min(
        calc((100vw - 2 * var(--spread-edge) - 2 * var(--card-gap)) / 3),
        calc((100dvh - 112px) * 0.625),
        520px
    );
    --expanded-card-cap: min(
        max(24.42vw, calc(14.4vw + 128.256px)),
        calc(43.5dvh - 1.6px),
        520px
    );
    --expanded-edge: clamp(19.2px, 5vw, calc(var(--expanded-card-cap) * 0.184615));
    --expanded-card-gap: clamp(16px, 2vw, calc(var(--expanded-card-cap) * 0.069231));
    --expanded-card-w: min(
        calc((100vw - 2 * var(--expanded-edge) - 2 * var(--expanded-card-gap)) / 3),
        calc((100dvh - 200px) * 0.625),
        var(--expanded-card-cap)
    );
    --expanded-card-h: calc(var(--expanded-card-w) * 1.6);
    --card-w: var(--folded-card-w);
    --card-h: calc(var(--card-w) * 1.6);
    --card-folded-scale: 0.45;
    --open-offset: 142px;
    --bg-color: #ffffff;
    --card-edge-color: rgba(20, 24, 28, 0.12);
    --card-contact-shadow:
        0 1px 2px rgba(13, 32, 72, 0.10),
        0 12px 28px rgba(13, 32, 72, 0.12);

    /* 默认主题颜色（黄色） */
    --cover-rgb: 234 179 8;
    --cover-front: rgb(var(--cover-rgb) / 0.96);
    --cover-back: rgb(var(--cover-rgb));
}

/* --- 动态主题切换 --- */
body.theme-2 {
    /* 黑色 */
    --cover-rgb: 36 37 42;
    --cover-front: rgb(var(--cover-rgb) / 0.96);
    --cover-back: rgb(var(--cover-rgb));
    --scene-color: #24252a;
    --scene-ink: #18181a;
}
body.theme-3 {
    /* 蓝色 */
    --cover-rgb: 59 130 246;
    --cover-front: rgb(var(--cover-rgb) / 0.96);
    --cover-back: rgb(var(--cover-rgb));
    --scene-color: #3b82f6;
    --scene-ink: #1d4ed8;
}

body {
    background-color: var(--bg-color);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-synthesis: none;
    color: var(--ink);
    overflow-x: hidden;
    transition: background-color var(--scene-dur) var(--spread-ease);
}

.site-document-nav {
    position: fixed;
    z-index: 120;
    top: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 44px);
    left: clamp(20px, 3vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.site-document-link {
    color: #202124;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-underline-offset: 5px;
    pointer-events: auto;
    transition: color var(--scene-dur) var(--spread-ease);
}

.site-document-link:hover { text-decoration: underline; }

.site-document-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

body.scene-is-expanded .site-document-link { color: #fff; }
body.theme-3.scene-is-expanded .site-document-link { color: #fff; }

button,
input,
textarea,
select {
    font: inherit;
}

.card-back,
.card-back * {
    font-family: var(--font-sans);
}

/* 只改变三张白色卡片背后的页面底色；卡片纸张本身保持白色。 */
body.scene-is-expanded {
    background-color: var(--scene-color);
    --card-edge-color: rgba(20, 24, 28, 0.09);
    --card-contact-shadow:
        0 1px 2px rgba(13, 32, 72, 0.10),
        0 14px 32px rgba(13, 32, 72, 0.14);
}

.interactive-area {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: min(100dvh, 960px);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2000px;
}

.archive-wrapper {
    position: relative;
    width: 285px;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform var(--cover-dur) var(--anim-ease);
    transform: translateX(0);
}

/* 封面打开后才切到展开几何。JS 同帧补偿 folded scale，因此书内卡片、
   hover 和飞行动画第一帧的可见大小都与原版一致。 */
.archive-wrapper.cards-use-expanded-geometry {
    --card-w: var(--expanded-card-w);
    --card-h: var(--expanded-card-h);
    --card-gap: var(--expanded-card-gap);
    --content-pad-x: clamp(22px, calc(var(--card-w) * 0.076923), 40px);
    --content-pad-y: clamp(26px, calc(var(--card-w) * 0.080769), 42px);
    --section-gap: clamp(24px, calc(var(--card-w) * 0.057692), 30px);
}

/* 动画期间锁定交互，防止错乱 */
.archive-wrapper.is-animating {
    pointer-events: none;
}

/* Tab 切换期间由 Web Animations 编排内容；锁住卡片交互避免竞态。 */
.archive-wrapper.is-tab-switching .card-back {
    pointer-events: none;
}

.back-cover {
    position: absolute;
    inset: 0;
    background-color: var(--cover-back);
    background-image:
        linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 52%, rgba(0,0,0,0.025) 100%),
        /* 背面也加入微弱质感 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.10'/%3E%3C/svg%3E");
    border-radius: 16px;
    transform: translateZ(-2px);
    transform-origin: left center;
    background-blend-mode: soft-light, normal;
    backdrop-filter: blur(2.5px) saturate(0.84);
    -webkit-backdrop-filter: blur(2.5px) saturate(0.84);
    transition:
        transform var(--notebook-depth-dur) var(--flight-ease),
        background-color 0.6s ease,
        opacity var(--notebook-fade-dur) var(--hover-ease);
}

.front-cover {
    position: absolute;
    inset: 0;
    background-color: var(--cover-front);
    background-image: 
        /* 与后盖共用低对比材质，避免合盖时从暗面突然切到亮面。 */
        linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 52%, rgba(0,0,0,0.025) 100%),
        /* 皮质/磨砂质感的 SVG 噪点滤镜 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.10'/%3E%3C/svg%3E");

    /* 保留透底的磨砂书皮；关闭阶段通过禁用 opacity 淡入来避免发白。 */
    backdrop-filter: blur(2.5px) saturate(0.84);
    -webkit-backdrop-filter: blur(2.5px) saturate(0.84);

    padding: 48px 36px;
    box-sizing: border-box;
    transform-origin: left center;
    transition:
        transform var(--hover-dur) var(--hover-ease),
        box-shadow var(--hover-dur) var(--hover-ease),
        background-color 0.6s ease,
        opacity var(--notebook-fade-dur) var(--hover-ease);
    transform-style: preserve-3d;
    box-shadow: inset 1px 0 2px rgba(255,255,255,0.1), 2px 0 10px rgba(0,0,0,0.4);
    transform: translateZ(15px) rotateY(0deg); 

    /* 独立合成图层并抑制 3D 变换时的边缘闪烁。 */
    will-change: transform, filter, opacity;
    outline: 1px solid transparent;
}

.cover-highlight {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35px;
    background: linear-gradient(to right, rgba(255,255,255,0.06), transparent);
    border-radius: 16px 0 0 16px;
    pointer-events: none;
}

.cover-title { color: rgba(255, 255, 255, 0.95); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: 1.5px; margin-bottom: 6px; }
.cover-subtitle { color: rgba(255, 255, 255, 0.4); font-size: 13px; line-height: 1.35; letter-spacing: 1px; text-transform: uppercase; }
.deboss-container { position: absolute; bottom: 30px; left: 28px; right: 28px; display: flex; flex-direction: column; gap: 6px; }
.deboss-line { width: 100%; height: 2px; background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1px; }

.card-mover {
    position: absolute;
    top: 50%; left: 50%;
    margin-top: calc(var(--card-h) / -2);
    margin-left: calc(var(--card-w) / -2);
    width: var(--card-w);
    height: var(--card-h);
    transition: transform var(--hover-dur) var(--hover-ease);
    pointer-events: none;
    transform-style: preserve-3d;
}

/* 初始收起状态，卡片位于笔记本内 */
.card-1 { transform: translateX(0px) translateZ(3px); }
.card-2 { transform: translateX(0px) translateZ(2px); }
.card-3 { transform: translateX(0px) translateZ(1px); }

.card-scaler {
    position: relative;
    width: 100%; height: 100%;
    transform: scale3d(var(--card-folded-scale), var(--card-folded-scale), var(--card-folded-scale));
    transition: transform var(--hover-dur) var(--hover-ease);
    transform-style: preserve-3d;
}

.card-inner {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
    box-shadow: 0 0 0 rgba(13, 32, 72, 0);
    border-radius: 24px;
    transform: translateZ(0px) rotateY(0deg); 
}

/* --- 动画状态覆盖 --- */
.archive-wrapper.is-animating .front-cover,
.archive-wrapper.folder-is-open .front-cover {
    transition:
        transform var(--cover-dur) var(--anim-ease),
        box-shadow var(--cover-dur) var(--anim-ease),
        background-color 0.6s ease,
        opacity var(--notebook-fade-dur) var(--hover-ease);
}

/* 关闭时书本在卡片下方一次恢复为完整颜色。若继续做 opacity
   淡入，白色页面与白卡会在 3D 合成阶段把书皮洗浅。 */
.archive-wrapper.is-closing .back-cover {
    transition:
        transform var(--cover-dur) var(--anim-ease),
        background-color 0.6s ease;
}

.archive-wrapper.is-closing .front-cover {
    transition:
        transform var(--cover-dur) var(--anim-ease),
        box-shadow var(--cover-dur) var(--anim-ease),
        background-color 0.6s ease;
    box-shadow:
        inset 0 -12px 22px rgba(0,0,0,0.032),
        3px 8px 17px rgba(35,31,20,0.11);
}

.archive-wrapper.is-animating .card-mover,
.archive-wrapper.folder-is-open .card-mover,
.archive-wrapper.is-animating .card-scaler,
.archive-wrapper.folder-is-open .card-scaler {
    transition: transform var(--card-move-dur) var(--focus-ease), box-shadow var(--card-move-dur) var(--focus-ease);
}

.archive-wrapper.is-animating .card-inner,
.archive-wrapper.folder-is-open .card-inner {
    transition: transform var(--card-flip-dur) var(--focus-ease), box-shadow var(--card-flip-dur) var(--focus-ease);
}

.card-front, .card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 24px;
    background: #FFFFFF;
}

.card-front { border: 1px solid #E5E7EB; }
.card-back {
    transform: rotateY(180deg);
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    overflow: hidden;
    pointer-events: none;
}

/* -------------------------------------------------------------
   状态 1: 鼠标悬浮 (PEEK) - 露出卡片边缘
------------------------------------------------------------- */
.archive-wrapper:not(.is-animating):not(.folder-is-open):not(.hover-guard):hover .front-cover {
    transform: translateZ(10px) rotateY(-35deg); 
    box-shadow: inset 1px 0 2px rgba(255,255,255,0.16), inset 0 -12px 22px rgba(0,0,0,0.032), 8px 11px 20px rgba(35,31,20,0.13);
}
.archive-wrapper:not(.is-animating):not(.folder-is-open):not(.hover-guard):hover .card-1 { transform: translateX(20px) translateZ(12px); }
.archive-wrapper:not(.is-animating):not(.folder-is-open):not(.hover-guard):hover .card-2 { transform: translateX(34px) translateZ(10px); }
.archive-wrapper:not(.is-animating):not(.folder-is-open):not(.hover-guard):hover .card-3 { transform: translateX(48px) translateZ(8px); }

/* -------------------------------------------------------------
   状态 2: 文件夹打开 (folder-is-open) - 完全摊开
------------------------------------------------------------- */
.archive-wrapper.folder-is-open {
    transform: translateX(var(--open-offset));
    cursor: default;
}
.archive-wrapper.folder-is-open .front-cover {
    transform: translateZ(10px) rotateY(-180deg); 
    box-shadow: inset 0 -12px 22px rgba(0,0,0,0.032), -8px 11px 20px rgba(35,31,20,0.13);
}

/* 左缘高光只属于封面正面。封面翻到背面时 Chromium 会因
   overflow/backdrop-filter 的扁平化继续绘制它，形成截图中的竖向亮带。 */
.archive-wrapper.is-animating .front-cover > .cover-highlight,
.archive-wrapper.folder-is-open .front-cover > .cover-highlight {
    visibility: hidden;
}

/* 同一条本地左边框在 180° 后会落到画面中的右侧铰链。动画期间
   隐去它，封面完全合上后再恢复正面的实体边缘。 */
.archive-wrapper.is-animating .front-cover,
.archive-wrapper.folder-is-open .front-cover {
    border-left-color: transparent;
}

.archive-wrapper.is-animating .back-cover,
.archive-wrapper.folder-is-open .back-cover {
    border-left-color: transparent;
}

.archive-wrapper.folder-is-open:not(.cards-are-out) .card-1 { transform: translateX(0px) translateZ(10px); }
.archive-wrapper.folder-is-open:not(.cards-are-out) .card-2 { transform: translateX(0px) translateZ(8px); }
.archive-wrapper.folder-is-open:not(.cards-are-out) .card-3 { transform: translateX(0px) translateZ(6px); }

/* -------------------------------------------------------------
   状态 3: 卡片同步位移、放大与翻转
------------------------------------------------------------- */
.archive-wrapper.cards-are-out .card-1 { transform: translateX(calc(0px - var(--open-offset))) translateZ(80px); }
.archive-wrapper.cards-are-out .card-2 { transform: translateX(calc(0px - var(--open-offset))) translateZ(79px); }
.archive-wrapper.cards-are-out .card-3 { transform: translateX(calc(0px - var(--open-offset))) translateZ(78px); }

/* 封面完整打开后才让笔记本后退。卡片位移与翻面同步推进，跨过 90° 前
   笔记本已经退到安全深度，继续避免穿模。 */
.archive-wrapper.notebook-is-receded .back-cover {
    transform: translateZ(-260px) scale(0.84);
}
.archive-wrapper.notebook-is-receded .front-cover {
    transition:
        transform var(--notebook-depth-dur) var(--flight-ease),
        box-shadow var(--notebook-depth-dur) var(--flight-ease),
        background-color 0.6s ease,
        opacity var(--notebook-fade-dur) var(--hover-ease);
    transform: translateZ(-248px) rotateY(-180deg) scale(0.84);
}

.archive-wrapper.cards-are-out .card-scaler { transform: scale3d(1, 1, 1); }
.archive-wrapper.cards-are-out .card-mover { pointer-events: auto; }
.archive-wrapper.cards-are-flipped .card-inner {
    transform: rotateY(-180deg);
}
.archive-wrapper.cards-are-flipped .card-back { pointer-events: auto; }

/* -------------------------------------------------------------
   状态 4: 卡片平铺展开 (cards-are-spread)
------------------------------------------------------------- */
/* 中卡保持在视口中心；左右卡按实时宽度和间距展开。 */
.archive-wrapper.cards-are-spread:not(.cards-use-layout-spread) .card-1 {
    transform: translateX(calc(0px - var(--open-offset) - var(--card-w) - var(--card-gap))) translateZ(0px);
}
.archive-wrapper.cards-are-spread:not(.cards-use-layout-spread) .card-2 {
    transform: translateX(calc(0px - var(--open-offset))) translateZ(0px);
}
.archive-wrapper.cards-are-spread:not(.cards-use-layout-spread) .card-3 {
    transform: translateX(calc(0px - var(--open-offset) + var(--card-w) + var(--card-gap))) translateZ(0px);
}

/* 只做水平位移，用更柔和的减速曲线消除突然停住的僵硬感。 */
.archive-wrapper.cards-are-spread:not(.cards-use-layout-spread) .card-mover {
    transition:
        transform var(--card-spread-dur) var(--spread-ease),
        box-shadow var(--card-spread-dur) var(--spread-ease);
}

/* left 展开阶段就退出 3D 合成环境；正文保持显示，不增加淡入淡出。 */
.interactive-area:has(.archive-wrapper.cards-use-layout-spread) {
    perspective: none;
}

.archive-wrapper.cards-use-layout-spread .source-scroll,
.archive-wrapper.cards-use-layout-spread .source-primary {
    contain: none;
}

/* 2D/3D 状态交接时暂停一帧过渡；前后几何位置相同，因此不会闪跳。 */
.archive-wrapper.transitions-are-paused,
.archive-wrapper.transitions-are-paused .card-mover,
.archive-wrapper.transitions-are-paused .card-scaler,
.archive-wrapper.transitions-are-paused .card-inner,
.archive-wrapper.transitions-are-paused .card-front,
.archive-wrapper.transitions-are-paused .card-back {
    transition: none !important;
}

/* The notebook stays geometrically present as the positioning anchor,
   but leaves the paint tree immediately once the cards fan out. */
.archive-wrapper.notebook-is-hidden .back-cover {
    opacity: 0;
    pointer-events: none;
}

.archive-wrapper.notebook-is-hidden .front-cover {
    opacity: 0;
    pointer-events: none;
}

/* -------------------------------------------------------------
   卡片内容级联淡入效果 (Staggered Fade-in)
------------------------------------------------------------- */
.card-back > * {
    opacity: 0;
    transform: none;
    transition: opacity 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 背面跨过 90°、真正进入视野前就让内容准备好，避免分卡前出现整张空白白卡。 */
.archive-wrapper.cards-are-flipped .card-back > * {
    opacity: 1;
    transform: none;
}

.archive-wrapper.cards-are-flipped .card-back > * { transition-delay: 0s; }

/* 收起时在背面转过侧边前保留完整内容；前脸则在整个回翻阶段保持
   同一张卡片的固定层级，避免重叠卡片在中途交换画面。 */
.archive-wrapper.cards-are-returning .card-back > * {
    opacity: 1;
    transition: none;
}

.archive-wrapper.cards-are-returning .card-1 { z-index: 3; }
.archive-wrapper.cards-are-returning .card-2 { z-index: 2; }
.archive-wrapper.cards-are-returning .card-3 { z-index: 1; }

/* 各层使用同一主题正面，回翻时保留原生文字与纸面纹理。 */

.close-btn {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}

/* 彩色圆点外发光动画 */
.color-dot {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.color-dot:not(:disabled):hover { transform: scale(1.1); }
.color-dot:disabled { cursor: default; }
.color-dot:focus-visible {
    outline: 2px solid #202124;
    outline-offset: 7px;
}
.color-dot[data-target="1"] { background: #eab308; box-shadow: 0 2px 10px rgba(234,179,8,.3); }
.color-dot[data-target="2"] { background: #24252a; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.color-dot[data-target="3"] { background: #3b82f6; box-shadow: 0 2px 10px rgba(59,130,246,.3); }
.color-dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.color-dot.active::after {
    border-color: #d1d5db; /* gray-300 ring */
    transform: scale(1);
}

body.scene-is-expanded .color-dot.active::after {
    border-color: rgba(255,255,255,.92);
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.theme-switcher {
    position: fixed;
    z-index: 100;
    bottom: 28px;
    left: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 2.5vw, 28px);
    width: min(92vw, 420px);
    transform: translateX(-50%);
}

.theme-option {
    display: flex;
    flex: 0 1 122px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.theme-option-copy {
    color: #4f5358;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1.35;
    white-space: nowrap;
    transition: color var(--scene-dur) var(--spread-ease);
}

.theme-option:has(.color-dot.active) .theme-option-copy { color: #202124; font-weight: 500; }
body.scene-is-expanded .theme-option-copy,
body.scene-is-expanded .theme-option:has(.color-dot.active) .theme-option-copy { color: #fff; }
body.theme-3.scene-is-expanded .color-dot:focus-visible { outline-color: #fff; }

@media (max-width: 520px) {
    .theme-switcher { gap: 8px; width: calc(100vw - 20px); }
    .theme-option { flex-basis: 108px; }
    .theme-option-copy { font-size: 9.5px; }
}

/* --- 卡片表面：纸张质感、圆角与内容层级 --- */
:root {
    --ink: #202124;
    --text-muted: #5f6368;
    --content-pad-x: clamp(24px, 2.6vw, 40px);
    --content-pad-y: clamp(28px, 3vw, 42px);
    --section-gap: clamp(24px, 2vw, 30px);
    --blue: #3171de;
    --red: #ef3024;
    --card-radius: 36px 39px 35px 38px / 35px 39px 36px 38px;
}

/* 封面实时采样下方卡片，形成透底磨砂质感。 */
.back-cover {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 28px 32px 30px 27px / 25px 34px 29px 31px;
    will-change: opacity;
    box-shadow:
        0 14px 30px rgba(35, 31, 20, 0.12),
        inset 1px 0 2px rgba(255, 255, 255, 0.14),
        inset 0 -12px 22px rgba(0, 0, 0, 0.032);
}

.front-cover {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px 34px 32px 29px / 27px 36px 31px 33px;
    padding: 54px 42px;
    isolation: auto;
    box-shadow:
        inset 1px 0 2px rgba(255, 255, 255, 0.16),
        inset 0 -12px 22px rgba(0, 0, 0, 0.032),
        3px 8px 17px rgba(35, 31, 20, 0.11);
}

.back-cover::after,
.front-cover::before,
.front-cover::after {
    content: none;
}

.front-cover > .cover-highlight,
.front-cover > .cover-heading,
.front-cover > .cover-proof,
.front-cover > .deboss-container {
    z-index: 3;
}

.front-cover > .cover-heading {
    position: relative;
}

.front-cover .cover-heading {
    margin-bottom: 24px;
}

.cover-highlight {
    border-radius: 30px 0 0 30px;
}

.cover-title,
.cover-subtitle,
.cover-proof {
    position: relative;
    z-index: 4;
    transform: translateZ(1px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cover-title {
    font-size: 22px;
}

.cover-subtitle {
    font-size: 13.5px;
}

.cover-proof {
    position: absolute;
    right: 42px;
    bottom: 72px;
    left: 42px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.deboss-container {
    position: absolute;
    z-index: 2;
    right: 34px;
    bottom: 36px;
    left: 34px;
    transform: translateZ(1px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-inner {
    border-radius: var(--card-radius);
    transform: rotateY(0deg) translateZ(0px);
    transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 0 0 rgba(13, 32, 72, 0);
}

/* Paper gains its small cast shadow while it leaves the notebook;
   it fades away during the return, before the cover closes. */
.archive-wrapper.cards-are-out .card-inner {
    box-shadow: var(--card-contact-shadow);
}

.archive-wrapper.cards-are-flipped .card-inner {
    transform: rotateY(-180deg) translateZ(0px);
}

.card-front,
.card-back {
    overflow: hidden;
    border: 1px solid var(--card-edge-color);
    border-radius: inherit;
    background: linear-gradient(145deg, #ffffff 0%, #fafaf7 100%);
    color: var(--ink);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}

.card-front {
    transform: translateZ(1px);
}

.card-back {
    transform: rotateY(180deg);
}

/* 真实 3D 在约 90°结束。后半程继续使用同一张卡壳，以二维 scaleX
   还原翻转投影；三卡展开前不会再让正文经过 perspective/rotateY。 */
.archive-wrapper.cards-are-facing-2d.cards-are-out:not(.cards-are-spread):not(.cards-use-layout-spread) .card-mover {
    transform: translateX(calc(0px - var(--open-offset)));
    transform-style: flat;
}

.archive-wrapper.cards-are-facing-2d .card-scaler {
    transform: scale(1);
    transform-style: flat;
}

.archive-wrapper.cards-are-facing-2d .card-mover.card-is-facing-2d .card-inner {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
}

.archive-wrapper.cards-are-facing-2d .card-mover.card-is-facing-2d .card-front {
    visibility: hidden;
}

.archive-wrapper.cards-are-facing-2d .card-mover.card-is-facing-2d .card-back {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.archive-wrapper.cards-are-facing-2d.cards-are-spread:not(.cards-use-layout-spread) .card-1 {
    transform: translateX(calc(0px - var(--open-offset) - var(--card-w) - var(--card-gap)));
}

.archive-wrapper.cards-are-facing-2d.cards-are-spread:not(.cards-use-layout-spread) .card-2 {
    transform: translateX(calc(0px - var(--open-offset)));
}

.archive-wrapper.cards-are-facing-2d.cards-are-spread:not(.cards-use-layout-spread) .card-3 {
    transform: translateX(calc(0px - var(--open-offset) + var(--card-w) + var(--card-gap)));
}

/* 翻面完成后，三张卡片改由真实 left 坐标展开。这里有意允许每帧布局/重绘：
   只有三张卡，成本可控；换来的是文字从展开开始到静止始终使用同一条原生
   2D 绘制路径，不会在 transform 合成层释放时产生一次像素级“跳字”。 */
.archive-wrapper.cards-use-layout-spread {
    transform: none;
    transform-style: flat;
    transition: none;
}

.archive-wrapper.cards-use-layout-spread .card-mover {
    left: 50%;
    transition:
        left var(--card-spread-dur) var(--spread-ease),
        box-shadow var(--card-spread-dur) var(--spread-ease);
    transform-style: flat;
}

.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d.cards-are-out .card-mover,
.archive-wrapper.cards-use-layout-spread.cards-are-spread .card-mover {
    transform: none;
}

.archive-wrapper.cards-use-layout-spread.cards-are-spread .card-1 {
    left: calc(50% - var(--card-w) - var(--card-gap));
}

.archive-wrapper.cards-use-layout-spread.cards-are-spread .card-2 {
    left: 50%;
}

.archive-wrapper.cards-use-layout-spread.cards-are-spread .card-3 {
    left: calc(50% + var(--card-w) + var(--card-gap));
}

.archive-wrapper.cards-use-layout-spread.cards-are-out .card-scaler {
    transform: none;
    transform-style: flat;
}

.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-inner,
.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-front,
.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-back {
    transform-style: flat;
    -webkit-transform-style: flat;
    will-change: auto;
}

.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-inner,
.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-back {
    transform: none;
}

.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-front {
    visibility: hidden;
}

.archive-wrapper.cards-use-layout-spread.cards-are-facing-2d .card-mover.card-is-facing-2d .card-back {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.card-front::before,
.card-back::before,
.card-front::after,
.card-back::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.card-front::before,
.card-back::before {
    z-index: 0;
    opacity: 0.038;
    mix-blend-mode: multiply;
    background-image:
        repeating-radial-gradient(circle at 17% 22%, rgba(25,25,25,.12) 0 .45px, transparent .55px 2.1px),
        repeating-linear-gradient(92deg, transparent 0 5px, rgba(20,20,20,.025) 5.5px 6px);
}

.card-front::after,
.card-back::after {
    z-index: 1;
    box-shadow:
        inset 0 1px rgba(255,255,255,.72),
        inset 0 -18px 28px rgba(24,28,36,.025),
        inset -1px 0 rgba(24,28,36,.035);
}

.card-front > *,
.card-back > * {
    position: relative;
    z-index: 2;
}

.source-card-front {
    padding: 0 !important;
    background: #ffffff;
}

.source-title-art,
.source-motion-art {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
}

.source-title-art {
    top: 0;
    z-index: 2;
    height: auto;
}

.source-title-art--full {
    height: 100%;
    object-fit: cover;
}

.source-motion-art {
    z-index: 1;
    left: 2.5%;
    bottom: 2.5%;
    width: 95%;
    height: auto;
    object-fit: contain;
}

.source-card-back {
    display: block !important;
    min-height: 0;
    padding: 0 !important;
}

.source-scroll,
.source-primary {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    padding: var(--content-pad-y) var(--content-pad-x) 36px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
}

.source-scroll::-webkit-scrollbar,
.source-primary::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.source-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    width: max-content;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e9eaeb;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
}

.source-title {
    min-block-size: 2.32em;
    margin: 22px 0 18px;
    color: var(--ink);
    font-size: clamp(30px, 2.2vw, 38px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.source-copy,
.source-lead,
.source-start p,
.source-summary p {
    color: var(--text-muted);
    font-size: clamp(13.5px, 0.8vw, 14.5px);
    line-height: 1.7;
    letter-spacing: 0.006em;
}

.source-copy p,
.source-lead,
.source-start p {
    margin: 0 0 18px;
}

.source-copy p {
    margin-bottom: 14px;
}

.source-copy p:last-child {
    margin-bottom: 0;
}

.source-section {
    margin-top: var(--section-gap);
    padding-top: 24px;
    border-top: 1px solid rgba(32, 33, 36, 0.14);
}

.source-label {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.source-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.source-benefit {
    box-sizing: border-box;
    min-height: 112px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
}

.source-benefit > span {
    font-size: 11px;
    opacity: 0.72;
}

.source-benefit h4 {
    margin: auto 0 7px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.24;
}

.source-benefit p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

#c2-grid-1 { background: #3171de; color: #fff; }
#c2-grid-2 { background: #ffbb25; color: #202124; }
#c2-grid-3 { background: #1fb254; color: #fff; }
#c2-grid-4 { background: #ef3024; color: #fff; }

body.theme-2 #c2-grid-1,
body.theme-2 #c2-grid-3 {
    border: 1px solid #f9a8d4;
    background: #fce7f3;
    color: #9d174d;
}
body.theme-2 #c2-grid-2,
body.theme-2 #c2-grid-4 { background: #fbcfe8; color: #9d174d; }

body.theme-3 #c2-grid-1 { background: #059669; color: #fff; }
body.theme-3 #c2-grid-2 { background: #0d9488; color: #fff; }
body.theme-3 #c2-grid-3 { background: #0891b2; color: #fff; }
body.theme-3 #c2-grid-4 { background: #4f46e5; color: #fff; }

.source-start h3 {
    margin: 18px 0 12px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.source-ecosystem {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 14px;
    background: #dedede;
}

.source-ecosystem span {
    min-height: 48px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
}

.source-primary {
    display: flex;
    flex-direction: column;
}

.card-2 .source-scroll,
.card-3 .source-scroll {
    display: flex;
    flex-direction: column;
}

.card-2 .source-copy {
    min-block-size: 108px;
}

.card-3 .source-lead {
    min-block-size: 72px;
}

.card-2 .source-section,
.card-3 .source-section:last-child {
    margin-top: auto;
}

.source-primary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.source-primary .source-pill {
    background: var(--blue);
    color: #fff;
}

body.theme-2 .source-primary .source-pill {
    background: #e5e7eb;
    color: #4b5563;
}

body.theme-3 .source-primary .source-pill {
    background: #059669;
    color: #fff;
}

.source-primary-title {
    min-block-size: 3.42em;
    margin: 26px 0 24px;
    color: var(--ink);
    font-size: clamp(32px, 2.5vw, 42px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.source-primary-art {
    position: relative;
    height: clamp(150px, 12vw, 184px);
    min-height: clamp(150px, 12vw, 184px);
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

.source-primary-art .art-disc,
.source-primary-art .art-panel {
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.92;
}

#c1-shape-1 { top: -32px; left: -24px; width: 128px; height: 128px; background: #facc15; }
#c1-shape-2 { top: 32px; right: -32px; width: 160px; height: 160px; background: #22c55e; }
#c1-shape-3 { bottom: -48px; left: 32px; width: 144px; height: 144px; background: #ef4444; }
#c1-shape-4 { right: -8px; bottom: -24px; width: 112px; height: 112px; background: #3b82f6; }

body.theme-2 #c1-shape-1 { background: #f9a8d4; }
body.theme-2 #c1-shape-2 { background: #fb7185; }
body.theme-2 #c1-shape-3 { background: #e879f9; }
body.theme-2 #c1-shape-4 { background: #c084fc; }

body.theme-3 #c1-shape-1 { background: #34d399; }
body.theme-3 #c1-shape-2 { background: #14b8a6; }
body.theme-3 #c1-shape-3 { background: #06b6d4; }
body.theme-3 #c1-shape-4 { background: #6366f1; }

.source-primary-art .art-disc {
    border-radius: 50%;
}

.source-primary-art .art-panel {
    border-radius: 22px;
    transform: rotate(10deg);
}

.source-primary-art .art-window {
    position: absolute;
    z-index: 3;
    inset: 22px 42px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(32, 33, 36, 0.11);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.source-primary-art .art-window-bar {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
}

.source-primary-art .art-window-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.source-primary-art .art-window-copy {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.source-summary {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(32, 33, 36, 0.12);
}

.source-summary strong {
    display: block;
    margin-bottom: 9px;
    color: var(--red);
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: 0.09em;
}

.source-summary p { margin: 0; }

.project-actions {
    position: absolute;
    z-index: 60;
    top: max(8px, calc(50% - var(--expanded-card-h) / 2 - 64px));
    left: 50%;
    display: flex;
    justify-content: flex-end;
    width: calc(3 * var(--expanded-card-w) + 2 * var(--expanded-card-gap));
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition:
        opacity 0.34s var(--hover-ease),
        transform 0.34s var(--hover-ease);
}

@media (min-width: 901px) {
    /* 右侧给顶栏链接保留固定安全区；只有三卡几乎贴到导航时才内收按钮。 */
    .project-actions { max-width: calc(100vw - 216px); }
}

.archive-wrapper.cards-are-spread + .project-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0.28s;
}

.project-demo-link {
    min-width: 176px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 999px;
    background: #eab308;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background-color 0.5s ease,
        box-shadow 0.2s ease;
    box-shadow:
        0 8px 18px rgba(17, 24, 39, 0.12),
        inset 0 1px rgba(255, 255, 255, 0.16);
}

body.theme-2 .project-demo-link { background: #24252a; }
body.theme-3 .project-demo-link { background: #3b82f6; }

/* 展开后按钮从同色页面中反相浮起，保持可读性与行动层级。 */
body.scene-is-expanded .project-demo-link {
    border: 1px solid rgba(255,255,255,.7);
    background: #fff;
    color: var(--scene-ink);
    box-shadow:
        0 8px 20px rgba(17, 24, 39, 0.14),
        inset 0 1px rgba(255, 255, 255, 0.7);
}

.project-demo-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.project-demo-link:hover svg { transform: translateX(4px); }

.project-demo-link:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 16px 34px rgba(17, 24, 39, 0.21),
        inset 0 1px rgba(255, 255, 255, 0.16);
}

.project-demo-link:focus-visible {
    outline: 3px solid rgba(49, 113, 222, 0.34);
    outline-offset: 4px;
}

.close-btn {
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
}

.close-btn:focus-visible {
    outline: 3px solid rgba(49, 113, 222, 0.38);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    :root {
        --spread-edge: 18px;
        --card-gap: 14px;
        --content-pad-x: 22px;
        --content-pad-y: 26px;
    }

    .source-primary-title { font-size: clamp(25px, 3.5vw, 32px); }
    .source-title { font-size: clamp(23px, 3.1vw, 29px); }
    .source-benefits { grid-template-columns: 1fr; }
    .source-benefit { min-height: 96px; }
    .project-demo-link { min-width: 164px; }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.local-motion-preview) *,
    html:not(.local-motion-preview) *::before,
    html:not(.local-motion-preview) *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 三套正面共享字体规范；图形与文字独立，纸张表层继续由原材质负责。 */
.card-edition {
    box-sizing: border-box;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    padding: 9% 9% 7%;
    font-family: var(--font-sans);
    font-synthesis: none;
    color: #252D31;
}
.edition-meta, .edition-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: calc(var(--card-w) * .027);
    line-height: 1.5; font-weight: 400;
    letter-spacing: .03em;
}
.edition-number { font-weight: 500; font-variant-numeric: tabular-nums; }
.edition-title {
    margin: 13% 0 0;
    font-size: calc(var(--card-w) * .083);
    font-weight: 400; line-height: 1.42; letter-spacing: 0;
}
.edition-description {
    margin: 5% 0 0;
    font-size: calc(var(--card-w) * .029);
    line-height: 1.7; font-weight: 400; color: #646866;
}
.edition-art { flex: 1; min-height: 0; display: flex; align-items: center; margin: 8% -2% 8%; }
.edition-geometry { display: block; width: 100%; max-height: 100%; }
.geometry-path, .geometry-space { display: none; }
body.theme-2 .geometry-start, body.theme-3 .geometry-start { display: none; }
body.theme-2 .geometry-path, body.theme-3 .geometry-space { display: block; }

/* 第二套使用黑色与中性灰，第三套使用参考蓝，让卡片正面与书皮主题一致。 */
body.theme-2 .source-card-front,
body.theme-3 .source-card-front { background: #fff; }
body.theme-2 .edition-number,
body.theme-2 .edition-category,
body.theme-2 .edition-project,
body.theme-2 .edition-stage { color: #24252a; }
body.theme-3 .edition-number,
body.theme-3 .edition-category,
body.theme-3 .edition-project,
body.theme-3 .edition-stage { color: #2563eb; }

body.theme-2 .geometry-path path:nth-of-type(1) { stroke: #24252a; }
body.theme-2 .geometry-path path:nth-of-type(2) { stroke: #f4f4f5; }
body.theme-2 .geometry-path circle { fill: #52525b; }
body.theme-2 .geometry-path path:nth-of-type(3) { fill: #d4d4d8; }

body.theme-3 .geometry-space path:nth-of-type(1) { fill: #1d4ed8; }
body.theme-3 .geometry-space path:nth-of-type(2) { fill: #dbeafe; }
body.theme-3 .geometry-space path:nth-of-type(3) { fill: #3b82f6; }
body.theme-3 .geometry-space circle { fill: #93c5fd; }
.edition-footer { border-top: 1px solid #DCDDD6; padding-top: 6%; gap: 8px; }
.edition-stage { color: #6D706B; white-space: nowrap; }
.archive-wrapper.is-closing.cards-are-returning .card-mover,
.archive-wrapper.is-closing.cards-are-returning .card-scaler,
.archive-wrapper.is-closing.cards-are-returning .card-inner {
    transition-duration: var(--card-return-dur);
}

/* 悬浮到展开保持同一收拢节奏，避免封面已到位时卡片还在横向补位。 */
.archive-wrapper.is-opening:not(.cards-are-out) .card-mover { transition-duration:var(--cover-dur); transition-timing-function:var(--anim-ease); }


/* 首页身份与实践说明；打开笔记本时淡出，为卡片让出阅读空间。 */
.portfolio-intro {
    position: absolute;
    top: max(70px, calc(50dvh - 360px));
    left: 24px;
    right: 24px;
    text-align: center;
    color: #202124;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms;
}
.portfolio-intro h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .025em;
}
.portfolio-intro p {
    margin: 14px 0 0;
    color: #62666b;
    font-size: 14px;
    line-height: 1.8;
}
.portfolio-intro-hint {
    margin-top: 17px;
    font-size: 12px;
    line-height: 1.6;
    color: #85898d;
}
body:has(.folder-is-open) .portfolio-intro,
body:has(.is-closing) .portfolio-intro {
    opacity: 0;
    visibility: hidden;
}
@media (max-height: 800px) {
    .portfolio-intro h1 { font-size: 24px; }
    .portfolio-intro p { margin-top: 8px; font-size: 12px; }
    .portfolio-intro-hint { margin-top: 8px; font-size: 11px; }
}
@media (max-height: 680px) {
    .portfolio-intro { top: 22px; }
    .portfolio-intro-hint { display: none; }
}
@media (max-width: 600px) {
    .portfolio-intro { left: 40px; right: 40px; }
    .portfolio-intro h1 { font-size: 21px; }
    .portfolio-intro p { max-width: 28em; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html:not(.local-motion-preview) .portfolio-intro { transition: none; }
}
/* 矮窗口优先保证介绍与书本之间的留白。 */
@media (max-height: 800px) {
    .portfolio-intro-hint { display: none; }
}

/* 展开项目的阶段概述，与正文共享同一字体层级。 */
.project-summary {
    position: fixed;
    z-index: 110;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    width: min(56vw, 680px);
    text-align: center;
    color: #202124;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms;
}
.project-summary h2 { margin: 0; font-size: 24px; line-height: 1.5; font-weight: 400; }
.project-summary p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
body:has(.cards-are-settled) .project-summary { opacity: 1; visibility: visible; }
body.theme-3 .project-summary { color: #f5f5f5; }
body.theme-3 .project-summary p { color: #c8c9cc; }
body.scene-is-expanded .project-summary,
body.scene-is-expanded .project-summary p { color: #fff; }
@media (max-height: 900px) {
    .project-summary { top: 16px; }
    .project-summary h2 { font-size: 18px; }
    .project-summary p { margin-top: 3px; font-size: 11px; }
}
@media (max-width: 700px) {
    .project-summary { width: 64vw; }
    .project-summary h2 { font-size: 16px; }
    .project-summary p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    html:not(.local-motion-preview) .project-summary { transition: none; }
}

/* 首页与展开后的项目概述统一使用紧凑双行：第一行说明对象，第二行补充能力或结果。 */
.portfolio-intro, .project-summary { top: 28px; }
.portfolio-intro h1, .project-summary h2 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .015em;
    font-weight: 400;
}
.portfolio-intro p, .project-summary p {
    margin-top: 7px;
    color: #73777c;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 400;
}
.portfolio-intro-hint { margin-top: 5px; font-size: 11px; }
@media (max-height: 800px) {
    .portfolio-intro, .project-summary { top: 22px; }
}
@media (max-width: 700px) {
    .portfolio-intro { left: 20%; right: 20%; }
    .portfolio-intro h1, .project-summary h2 { font-size: 15px; }
    .portfolio-intro p, .project-summary p { font-size: 10px; }
    .portfolio-intro-hint { display: none; }
}
/* 较矮窗口缩小字号与顶部间距，但仍保持双行层级。 */
@media (max-height: 900px) and (min-width: 701px) {
    .project-summary { top: 22px; width: min(40vw, 600px); }
    .project-summary h2 { font-size: 16px; }
    .project-summary p { margin-top: 6px; font-size: 11px; }
}