/**
* About 页专用样式（独立页面，不依赖 Butterfly）
* 主题锁定：浅色奶油纸。底色随滚动从"清晨奶油"渐变到"焦糖奶茶"（JS 改写 --ab-bg）。
* 强调色暖琥珀分三档：填充 --ab-accent / 线条标题 --ab-accent-deep / 小字 --ab-accent-text（浅底上保证可读）。
* 视觉风格：手帐拼贴——纸卡是"本子"，更白的纸质物件（票根/拍立得/索引卡/贴纸）是"贴上去的东西"；
* 纸胶带、印章、荧光笔划线、手写体（霞鹜文楷）、背景里的像素咖啡厅负责个人味。
* 深色只留给"图片上"与"聚焦"场景：Hero、分割段嵌入图、终端。
* 圆角规则：容器 14px，交互元素（按钮/胶囊）全圆角，纸质物件小圆角（3~8px）。
*/
:root {
--ab-bg: #f3ece0;
--ab-bg-rgb: 243, 236, 224;
--ab-text: #2f2620;
--ab-text-dim: #7a6a5a;
--ab-accent: #f0a14e;
--ab-accent-deep: #b86814;
--ab-accent-text: #9a520c;
--ab-accent-ink: #2a1703;
--ab-card: #fcf8f1;
--ab-card-border: rgba(110, 80, 50, 0.15);
--ab-line: rgba(110, 80, 50, 0.2);
--ab-shadow: 0 20px 40px -24px rgba(90, 58, 26, 0.45);
--ab-paper: #fffbf3;
--ab-ink: #2b2521;
--ab-ink-dim: #756a60;
--ab-dark: #231a14;
--ab-on-img: #fff8ee;
--ab-radius: 14px;
--ab-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
--ab-hand: 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', var(--ab-font);
--ab-mono: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
/* 颗粒纹理：灰度噪点，在奶油底和纸面上显出纸纹 */
--ab-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
--ab-grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E");
/* 窗边光：以视口为坐标（vw/vh），背景层与分割段遮罩板共用同一套位置，遮罩出现时无接缝 */
--ab-glow-a: rgba(255, 252, 244, 0.75);
--ab-glow-b: rgba(236, 168, 96, 0.16);
/* 印章做旧：噪点转透明度，印面出现斑驳缺墨 */
--ab-stamp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
--ab-cafe-veil: 0.66; /* 背景咖啡厅上那层纸色纱的浓度（分割段遮罩板里的快照也用它） */
--ab-bar-h: 60px;
--ab-bar-pad: 24px; /* 页眉左内边距（唱片坐在这里，头像在它右边） */
}
* { box-sizing: border-box; }
/* 光标：一只 TechCafe 的咖啡杯，点击点在杯口左上角外面一点，那里画着一颗小咖啡豆。
脚本接管后（html.ab-cup-on，about.js initCursor，鼠标第一次动的时候接管）：系统光标换成一张 1×1 的透明图藏起来，
画面上是一只跟着鼠标走的杯子——按住鼠标时一直左右摇（以杯底为支点），松开后摇完这一下停回原位；
杯口平时冒淡淡的热气，移到能点的东西上热气变浓、杯子稍微放大。能点的地方后备值写 pointer，脚本靠它认出"能点"；
原来写 cursor: pointer / grab 的地方都用 var(--ab-cursor-hand)。
没接管时（手机、减少动态效果、脚本没跑、鼠标还没动过）就是一张静止的杯子光标 */
:root {
/* 42×42，viewBox -6 -5.5 34 34：杯子画在 0~28 的格子里，左上多留一块给咖啡豆（离杯口远一点）；豆子中心 = (7, 7) 像素 = 点击点。
--ab-cup 只有杯子（跟手的杯子里会摇的那层）、--ab-bean 只有豆子（不跟着摇，一直在点击点上）、--ab-cup-full 两个合起来（静止光标用） */
--ab-cup: url("data:image/svg+xml,");
--ab-bean: url("data:image/svg+xml,");
--ab-cup-full: url("data:image/svg+xml,");
--ab-cursor: var(--ab-cup-full) 7 7, auto;
--ab-cursor-hand: var(--ab-cup-full) 7 7, pointer;
}
html.ab-cup-on {
--ab-cursor: url("data:image/svg+xml,") 0 0, auto;
--ab-cursor-hand: url("data:image/svg+xml,") 0 0, pointer;
}
html, body { cursor: var(--ab-cursor); }
a[href], button, [role='button'], label, summary, select { cursor: var(--ab-cursor-hand); }
input, textarea, [contenteditable='true'] { cursor: text; }
/* 跟着鼠标的杯子（位置由 about.js initCursor 写在 translate 属性上；42×42，和静止光标同一个点击点 (7, 7) = 咖啡豆中心对准鼠标） */
.ab-cup-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 2147483000;
width: 42px;
height: 42px;
margin: -7px 0 0 -7px;
opacity: 0;
pointer-events: none;
transform-origin: 7px 7px; /* 能点时以点击点（豆子）为中心放大：杯子往右下长，豆子不动 */
transition: opacity 0.15s ease, scale 0.2s ease;
}
.ab-cup-cursor.is-on { opacity: 1; }
.ab-cup-cursor.is-hover { scale: 1.12; }
.ab-cup-cursor-cup {
position: absolute;
inset: 0;
background: var(--ab-cup) center / 100% 100% no-repeat;
transform-origin: 53% 87%; /* 杯底中间：摇的时候以它为支点 */
}
/* 咖啡豆：单独一层，不跟着杯子摇，一直停在点击点上 */
.ab-cup-cursor-bean {
position: absolute;
inset: 0;
background: var(--ab-bean) center / 100% 100% no-repeat;
}
/* 按住：一直左右摇（松开后由脚本等这一下摇完、回到 0° 时再去掉，不会从半空跳回来） */
.ab-cup-cursor.is-shake .ab-cup-cursor-cup { animation: ab-cup-shake 0.42s ease-in-out infinite; }
@keyframes ab-cup-shake {
0%, 100% { rotate: 0deg; }
25% { rotate: -14deg; }
75% { rotate: 12deg; }
}
/* 杯口两缕热气：平时淡淡地飘；移到能点的东西上变浓、冒得高一点、飘得快一点 */
.ab-cup-cursor-steam {
position: absolute;
top: -3px;
left: 13px;
width: 19px;
height: 12px;
background: url("data:image/svg+xml,") center / 100% 100% no-repeat;
opacity: 0.55;
transform-origin: 50% 100%;
animation: ab-cup-steam 1.8s ease-in-out infinite;
transition: opacity 0.2s ease, scale 0.2s ease;
}
.ab-cup-cursor.is-hover .ab-cup-cursor-steam { opacity: 1; scale: 1.2; animation-duration: 1.2s; }
@keyframes ab-cup-steam {
0%, 100% { translate: 0 1px; }
50% { translate: 0 -2px; }
}
html, body {
margin: 0;
padding: 0;
}
/* 隐藏页面滚动条（仍可滚动）；阅读进度由页眉进度线与咖啡杯提示 */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body#about-body {
background: var(--ab-bg);
color: var(--ab-text);
font-family: var(--ab-font);
line-height: 1.75;
overflow-x: hidden;
}
::selection {
background: var(--ab-accent);
color: var(--ab-accent-ink);
}
a { color: inherit; }
/* 线稿图标：跟随文字颜色 */
.ab-icon {
width: 1em;
height: 1em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ab-icon-fill { fill: currentColor; stroke: none; }
/* ========== 背景层 ==========
固定铺满视口，位于所有内容之下：底色（随滚动渐变）+ 窗边光 + 颗粒 + 像素咖啡厅 */
.ab-backdrop {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background:
var(--ab-grain),
radial-gradient(70vw 60vh at 12vw 6vh, var(--ab-glow-a), transparent 70%),
radial-gradient(60vw 55vh at 92vw 88vh, var(--ab-glow-b), transparent 70%),
var(--ab-bg);
}
/* 背景咖啡厅：一整幅像素画（js/about-cafe/ 往里放几块叠在一起的画布）铺满视口，不做边缘渐隐，一直显示。
上面整幅盖一层和当前底色同色的薄纱（--ab-bg-rgb 随滚动变），浓度统一 */
.ab-cafe {
position: absolute;
inset: 0;
overflow: hidden;
}
.ab-cafe::after {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--ab-bg-rgb), var(--ab-cafe-veil));
}
.ab-cafe-layer {
position: absolute;
max-width: none;
image-rendering: pixelated;
}
.ab-cafe-layer.is-moving { will-change: transform; }
/* 纯享背景（body.ab-solo，JS 切换）：其余内容由 JS 淡出（Web Animations，不动它们自己的过渡）；
咖啡厅上的纸色纱淡掉、背景层升到最上面接收点击（is-solo 由 js/about-cafe 切） */
.ab-cafe::after { transition: opacity 0.5s ease; }
.ab-cafe.is-solo::after { opacity: 0; }
body.ab-solo-top .ab-backdrop { z-index: 60; }
.ab-cafe.is-solo { pointer-events: auto; }
/* 淡出那半秒里挡住点击（其余内容已经看不见，但还在原位能被点到） */
body.ab-solo:not(.ab-solo-top)::after {
content: '';
position: fixed;
inset: 0;
z-index: 61;
}
/* 点了咖啡厅里的东西弹出来的字（喵 / 帕！/ 滋——）和音符：往上飘、淡出 */
.ab-cafe-pop {
position: absolute;
z-index: 2;
translate: -50% -100%;
padding: 3px 10px 4px;
border-radius: 10px;
background: #fffaf0;
color: #5a3c2a;
font-family: var(--ab-hand);
font-size: 18px;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 3px 10px rgba(40, 24, 12, 0.25);
pointer-events: none;
animation: ab-cafe-pop 1.6s ease-out forwards;
}
.ab-cafe-pop::after {
content: '';
position: absolute;
left: 50%;
bottom: -5px;
width: 10px;
height: 10px;
background: inherit;
translate: -50% 0;
rotate: 45deg;
}
.ab-cafe-pop.is-note {
padding: 0;
background: none;
box-shadow: none;
color: #ffd27a;
font-size: 24px;
text-shadow: 0 0 8px rgba(255, 190, 90, 0.8), 0 1px 2px rgba(40, 24, 12, 0.6);
animation: ab-cafe-note 1.9s ease-out forwards;
}
.ab-cafe-pop.is-note::after { display: none; }
@keyframes ab-cafe-pop {
0% { opacity: 0; transform: translateY(6px) scale(0.6); }
14% { opacity: 1; transform: translateY(0) scale(1.08); }
24% { transform: translateY(0) scale(1); }
75% { opacity: 1; }
100% { opacity: 0; transform: translateY(-22px); }
}
@keyframes ab-cafe-note {
0% { opacity: 0; transform: translate(0, 4px) scale(0.5); }
15% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--dx, 12px), -70px) rotate(var(--rot, 12deg)); }
}
/* 分割段遮罩板里的咖啡厅快照（js 放进 .about-panel 的最前面，和背景对齐）+ 同样的纸色薄纱：
板上下滑开时咖啡厅跟着分成两半，不会被纯色的板盖掉 */
.ab-cafe-mirror {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.ab-cafe-mirror-veil {
position: absolute;
inset: 0;
background: rgba(var(--ab-bg-rgb), var(--ab-cafe-veil));
}
/* ========== 页眉条（Hero 收起后浮现）==========
左：头像 + TechCafe + 当前章节；右侧留给常驻的微导航（迷你时钟/咖啡杯/主页）；
底边：阅读进度线；下方伸出章节书签。
出场顺序：页眉滑下 → 落定后书签依次伸出；退场反过来：书签先缩回 → 页眉再收起（延迟 0.26s）。
分割段展开时，页眉 / 书签 / 微导航跟着上半页一起被推出屏幕：
--ab-push（0~1，分割段时间轴写到这三个元素上）× −25vh，与上半页的位移、缓动完全相同 */
.ab-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 25;
height: var(--ab-bar-h);
background: rgba(var(--ab-bg-rgb), 0.84);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
border-bottom: 1px dashed var(--ab-line);
box-shadow: 0 12px 26px -22px rgba(90, 58, 26, 0.6);
opacity: 0;
pointer-events: none; /* 隐藏（透明）时不接收点击 */
transform: translateY(-105%);
translate: 0 calc(var(--ab-push, 0) * -25vh);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1) 0.26s, opacity 0.3s ease 0.26s;
}
body.ab-bar-on .ab-bar {
opacity: 1;
pointer-events: auto;
transform: none;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.ab-bar-inner {
display: flex;
align-items: center;
height: 100%;
padding: 0 190px 0 calc(var(--ab-bar-pad) + 54px); /* 左：让出头像左侧的唱片位；右：让出微导航 */
transition: padding-left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 唱片落进面板后，头像与文字挪回原位 */
.ab-bar.is-player-open .ab-bar-inner { padding-left: var(--ab-bar-pad); }
.ab-bar-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: var(--ab-text);
text-decoration: none;
white-space: nowrap;
}
.ab-bar-avatar {
width: 32px;
height: 32px;
flex: none;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--ab-accent);
}
.ab-bar-site {
font-family: var(--ab-hand);
font-size: 1.1rem;
font-weight: 700;
}
.ab-bar-sep { color: var(--ab-text-dim); }
.ab-bar-chapter {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
overflow: hidden;
font-family: var(--ab-hand);
font-size: 1rem;
color: var(--ab-text-dim);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.ab-bar-chapter.is-swapping { opacity: 0; transform: translateY(6px); }
.ab-bar-chapter-no {
font-family: var(--ab-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
color: var(--ab-accent-text);
}
.ab-bar-progress {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--ab-accent);
transform-origin: left center;
transform: scaleX(var(--ab-progress, 0));
}
/* 章节书签：从页眉底边伸出的索引贴，当前章拉长并涂琥珀。
容器上沿 = 页眉底边，clip-path 只裁上方（左右下放宽，留给悬停时的章节名）：
书签缩回时整张藏进页眉里，伸出时像从页眉底下抽出来。
伸缩用独立的 translate 属性，与悬停 / 当前章用的 transform 叠加互不干扰；--i 为序号，错开节奏 */
.ab-marks {
position: fixed;
top: calc(var(--ab-bar-h) - 1px);
right: 24px;
z-index: 24;
display: flex;
gap: 6px;
pointer-events: none;
visibility: hidden;
clip-path: inset(0 -100vw -100vh -100vw);
translate: 0 calc(var(--ab-push, 0) * -25vh);
transition: visibility 0s linear 0.4s;
}
body.ab-bar-on .ab-marks {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.ab-mark {
position: relative;
display: block;
width: 38px;
padding: 12px 0 5px;
font-family: var(--ab-mono);
font-size: 0.68rem;
text-align: center;
text-decoration: none;
color: var(--ab-text-dim);
background: var(--ab-grain-paper), var(--ab-paper);
border: 1px solid var(--ab-card-border);
border-top: none;
border-radius: 0 0 7px 7px;
box-shadow: 0 6px 10px -6px rgba(90, 58, 26, 0.45);
transform: translateY(-9px);
/* 缩回：从最后一张开始，快速收进页眉 */
translate: 0 calc(-100% - 14px);
transition: translate 0.2s cubic-bezier(0.4, 0, 1, 1) calc((4 - var(--i, 0)) * 20ms),
transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
/* 伸出：等页眉落定（0.3s）后从 01 开始依次弹出，带一点回弹 */
body.ab-bar-on:not(.ab-chrome-away) .ab-mark {
translate: 0 0;
transition: translate 0.42s cubic-bezier(0.3, 1.35, 0.5, 1) calc(0.3s + var(--i, 0) * 45ms),
transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ab-mark:hover,
.ab-mark:focus-visible { transform: translateY(-3px); outline: none; }
.ab-mark.is-on {
color: var(--ab-accent-ink);
background: var(--ab-grain-paper), var(--ab-accent);
border-color: rgba(184, 104, 20, 0.5);
transform: translateY(0);
padding-bottom: 11px;
}
/* 悬停时在书签下方露出章节名 */
.ab-mark-name {
position: absolute;
top: calc(100% + 6px);
right: 0;
padding: 3px 10px;
font-family: var(--ab-hand);
font-size: 0.85rem;
white-space: nowrap;
color: var(--ab-text);
background: var(--ab-paper);
border: 1px solid var(--ab-card-border);
border-radius: 6px;
box-shadow: var(--ab-shadow);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ab-mark:hover .ab-mark-name,
.ab-mark:focus-visible .ab-mark-name { opacity: 1; transform: none; }
/* ========== 店内 BGM：页眉头像左侧的唱片 + 弹出式播放器 ==========
坐标原点 = 页眉左上角。平时：唱片（116px）缩到 0.36 倍（≈42px）坐在头像左边，页眉内容右移让位；
封面贴在唱片中心。点开：唱片落进下方弹出的面板左侧，头像与文字挪回原位，封面移到面板右列上方。
--dx / --dy：平时唱片圆心；--px：面板左边。
音频响应融进面板背景：--lo / --mid / --hi（三个频段）驱动三团光晕，--beat（鼓点）驱动亮度与外发光 */
.ab-player {
--dx: calc(var(--ab-bar-pad) + 21px);
--dy: calc(var(--ab-bar-h) / 2);
--px: 12px;
--beat: 0;
--lo: 0;
--mid: 0;
--hi: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.ab-player-disc {
position: absolute;
left: calc(var(--dx) - 58px);
top: calc(var(--dy) - 58px);
z-index: 3;
width: 116px;
height: 116px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
cursor: var(--ab-cursor-hand);
transform: translate(0, 0) scale(0.36);
transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.ab-player-disc:hover { transform: translate(0, 0) scale(0.4); }
.ab-player.is-open .ab-player-disc { transform: translate(calc(var(--px) + 74px - var(--dx)), calc(156px - var(--dy))) scale(1); }
.ab-player-vinyl {
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.16), transparent 40%),
repeating-radial-gradient(circle, #1b1411 0 2px, #2a1f19 2px 4px);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.4),
0 0 calc(var(--beat) * 22px) rgba(255, 194, 122, calc(var(--beat) * 0.8));
animation: ab-spin 5.5s linear infinite;
animation-play-state: paused;
}
.ab-player.is-playing .ab-player-vinyl { animation-play-state: running; }
/* 唱片中心贴纸（无孔）：封面移走后露出 */
.ab-player-label {
position: absolute;
inset: 30%;
border-radius: 50%;
background: radial-gradient(circle at 38% 34%, #ffe0b5, var(--ab-accent) 58%, var(--ab-accent-deep));
}
/* 封面：外框负责位置/大小/圆角，里面的图片负责旋转 */
.ab-player-cover {
position: absolute;
left: calc(var(--dx) - 8.5px);
top: calc(var(--dy) - 8.5px);
z-index: 4;
overflow: hidden;
width: 17px;
height: 17px;
border-radius: 50%;
pointer-events: none;
transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.5s ease, box-shadow 0.5s ease;
}
.ab-player-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ab-player.is-playing:not(.is-open) .ab-player-cover img { animation: ab-spin 5.5s linear infinite; }
.ab-player.is-open .ab-player-cover {
left: calc(var(--px) + 199px);
top: 84px;
width: 68px;
height: 68px;
border-radius: 10px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
transition-delay: 0.08s;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-player-panel {
position: absolute;
left: var(--px);
top: 70px;
z-index: 1;
overflow: hidden;
width: 316px;
height: 172px;
color: var(--ab-on-img);
background: #2a2019;
border-radius: 18px;
box-shadow:
0 18px 40px -12px rgba(40, 24, 10, 0.55),
0 0 calc(var(--beat) * 26px) rgba(255, 190, 110, calc(var(--beat) * 0.55));
transform-origin: calc(var(--dx) - var(--px)) calc(var(--dy) - 70px);
transform: scale(0.35);
opacity: 0;
visibility: hidden;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0s linear 0.45s;
}
.ab-player.is-open .ab-player-panel {
transform: none;
opacity: 1;
visibility: visible;
transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.25s ease, visibility 0s;
}
.ab-player-bg {
position: absolute;
inset: -24px;
background-size: cover;
background-position: center;
filter: blur(18px) saturate(1.25) brightness(calc(0.62 + var(--beat) * 0.32));
transform: scale(calc(1.06 + var(--beat) * 0.05));
}
.ab-player-scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(24, 16, 10, 0.35), rgba(24, 16, 10, 0.72) 60%);
}
/* 音频响应：三团随频段起伏的光晕（叠加混合，融在背景里） */
.ab-player-glow {
position: absolute;
inset: 0;
mix-blend-mode: screen;
pointer-events: none;
background:
radial-gradient(circle at 22% 78%, rgba(255, 170, 80, calc(0.12 + var(--lo) * 0.55)) 0%, transparent calc(28% + var(--lo) * 30%)),
radial-gradient(circle at 62% 20%, rgba(255, 214, 160, calc(0.08 + var(--mid) * 0.5)) 0%, transparent calc(24% + var(--mid) * 26%)),
radial-gradient(circle at 94% 94%, rgba(255, 246, 230, calc(0.05 + var(--hi) * 0.45)) 0%, transparent calc(18% + var(--hi) * 24%));
}
/* 右列：封面位（封面本体是 .ab-player-cover）→ 按钮 → 进度 → 曲名/时间 */
.ab-player-side {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 150px;
}
.ab-player-btns {
position: absolute;
top: 90px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.ab-player-btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
font-size: 13px;
color: var(--ab-on-img);
background: rgba(255, 255, 255, 0.14);
border: none;
border-radius: 50%;
cursor: var(--ab-cursor-hand);
transition: background 0.2s ease, transform 0.2s ease;
}
.ab-player-btn:hover { background: rgba(255, 255, 255, 0.26); }
.ab-player-btn:active { transform: scale(0.92); }
.ab-player-play {
width: 36px;
height: 36px;
font-size: 16px;
color: var(--ab-accent-ink);
background: var(--ab-accent);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.ab-player-play:hover { background: #ffb45e; }
.ab-player-icon-pause,
.ab-player.is-playing .ab-player-icon-play { display: none; }
.ab-player.is-playing .ab-player-icon-pause { display: block; }
.ab-player.is-loading .ab-player-play { opacity: 0.6; cursor: var(--ab-cursor); }
.ab-player-progress {
--p: 0%;
position: absolute;
top: 132px;
left: 14px;
right: 16px;
height: 14px;
cursor: var(--ab-cursor-hand);
touch-action: none;
outline: none;
}
.ab-player-progress::before,
.ab-player-fill {
content: '';
position: absolute;
left: 0;
top: 6px;
height: 3px;
border-radius: 2px;
}
.ab-player-progress::before { right: 0; background: rgba(255, 255, 255, 0.22); }
.ab-player-fill { width: var(--p); background: #ffc27a; }
.ab-player-knob {
position: absolute;
top: 2px;
left: var(--p);
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: 50%;
background: #fff8ee;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease;
}
.ab-player-progress:hover .ab-player-knob,
.ab-player-progress:focus-visible .ab-player-knob { transform: scale(1.3); }
.ab-player-meta {
position: absolute;
top: 150px;
left: 14px;
right: 16px;
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.66rem;
line-height: 1.3;
}
.ab-player-title {
overflow: hidden;
font-family: var(--ab-hand);
white-space: nowrap;
text-overflow: ellipsis;
color: rgba(255, 248, 238, 0.86);
}
.ab-player-time {
flex: none;
font-family: var(--ab-mono);
color: rgba(255, 248, 238, 0.65);
}
/* 翻页过渡：点书签跳章时整屏淡一下再跳 */
.ab-flip {
position: fixed;
inset: 0;
z-index: 35;
background: var(--ab-bg);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.ab-flip.is-on { opacity: 1; }
/* ========== 右上角微导航（常驻，Hero 上也在）：迷你时钟 + 咖啡杯 + 主页 ========== */
.about-nav {
position: fixed;
top: 12px;
right: 24px;
z-index: 30;
display: flex;
align-items: center;
gap: 16px;
height: 36px;
translate: 0 calc(var(--ab-push, 0) * -25vh);
}
/* 分割段展开期间（页眉一行被推出屏幕）不接收点击 */
body.ab-chrome-away .ab-bar,
body.ab-chrome-away .ab-marks,
body.ab-chrome-away .about-nav { pointer-events: none; }
/* 主页：和咖啡杯同尺寸、同线宽、同颜色的小房子（带烟囱），与左边两件之间隔一道细竖线；
Hero 上（深色背景）是浅色 + 投影，页眉出现后换成和时钟 / 咖啡杯一样的棕灰，悬停变琥珀 */
.about-nav-home {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-left: -4px;
border-radius: 8px;
color: var(--ab-on-img);
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
transition: color 0.3s ease, filter 0.3s ease, background 0.25s ease, transform 0.25s ease;
}
.about-nav-home:hover,
.about-nav-home:focus-visible { color: #ffc27a; transform: translateY(-1px); outline: none; }
.about-nav-home:active { transform: scale(0.94); }
body.ab-bar-on .about-nav-home { color: var(--ab-text-dim); filter: none; }
body.ab-bar-on .about-nav-home:hover,
body.ab-bar-on .about-nav-home:focus-visible { color: var(--ab-accent-deep); background: rgba(240, 161, 78, 0.12); }
/* 纯享背景按钮（咖啡杯右边）：一个小画框（山 + 太阳），样式和主页按钮一样；
锁（纯享右边）：锁着 / 解开两种锁梁，样式一样。两者在 Hero 上都不显示（和咖啡杯一样，页眉出现后才浮现） */
.about-nav-solo,
.about-nav-lock {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin: 0 -4px;
padding: 0;
border: 0;
border-radius: 8px;
background: none;
cursor: var(--ab-cursor-hand);
color: var(--ab-on-img);
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
transition: color 0.3s ease, filter 0.3s ease, background 0.25s ease, transform 0.25s ease, opacity 0.3s ease, visibility 0.3s;
}
.about-nav-solo:hover,
.about-nav-solo:focus-visible,
.about-nav-lock:hover,
.about-nav-lock:focus-visible { color: #ffc27a; transform: translateY(-1px); outline: none; }
.about-nav-solo:active,
.about-nav-lock:active { transform: scale(0.94); }
body.ab-bar-on .about-nav-solo,
body.ab-bar-on .about-nav-lock { color: var(--ab-text-dim); filter: none; }
body.ab-bar-on .about-nav-solo:hover,
body.ab-bar-on .about-nav-solo:focus-visible,
body.ab-bar-on .about-nav-lock:hover,
body.ab-bar-on .about-nav-lock:focus-visible { color: var(--ab-accent-deep); background: rgba(240, 161, 78, 0.12); }
.about-nav-solo[hidden] { display: none; }
body:not(.ab-bar-on) .about-nav-solo,
body:not(.ab-bar-on) .about-nav-lock { opacity: 0; visibility: hidden; }
/* 锁梁：锁着是闭合的弧，解开时换成右脚抬起来的那条 */
.about-nav-lock .ab-lock-open,
.about-nav-lock.is-unlocked .ab-lock-shut { opacity: 0; }
.about-nav-lock.is-unlocked .ab-lock-open { opacity: 1; }
.about-nav-lock path { transition: opacity 0.2s ease; }
.about-nav-home-icon {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.about-nav-sep {
width: 1px;
height: 16px;
background: var(--ab-line);
opacity: 0;
transition: opacity 0.3s ease;
}
body.ab-bar-on .about-nav-sep { opacity: 1; }
/* 迷你滚动时钟：和咖啡杯一样，hero 收起、页眉浮现后才出现 */
.about-nav-miniclock {
font-family: var(--ab-mono);
font-size: 15px;
color: var(--ab-text-dim);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
body.ab-bar-on .about-nav-miniclock { opacity: 1; }
/* 咖啡杯阅读进度：液面随进度上涨（--ab-progress 0~1） */
.ab-cup {
display: block;
width: 26px;
height: 26px;
color: var(--ab-text-dim);
opacity: 0;
transition: opacity 0.3s ease;
}
body.ab-bar-on .ab-cup { opacity: 1; }
/* 悬停咖啡杯：下面冒出一个小气泡显示已读百分比（和工牌复制邮箱的气泡同一个样子；文字在 data-tip 里，JS 滚动时更新） */
.ab-cup { position: relative; }
.ab-cup::after {
content: attr(data-tip);
position: absolute;
left: 50%;
top: calc(100% + 8px);
padding: 4px 10px;
border-radius: 999px;
font-family: var(--ab-font);
font-size: 12px;
line-height: 1.5;
white-space: nowrap;
color: #fff8ee;
background: rgba(47, 38, 32, 0.9);
opacity: 0;
translate: -50% -4px;
pointer-events: none;
transition: opacity 0.2s ease, translate 0.2s ease;
}
body.ab-bar-on .ab-cup:hover::after { opacity: 1; translate: -50% 0; }
.ab-cup svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ab-cup-liquid {
fill: var(--ab-accent);
stroke: none;
transform-box: fill-box;
transform-origin: center bottom;
transform: scaleY(var(--ab-progress, 0));
}
.ab-cup-steam {
opacity: calc(var(--ab-progress, 0) * 0.9);
stroke-width: 1.2;
}
/* ========== 滚动数字时钟（MAC 风） ========== */
.ab-rollclock {
display: inline-flex;
align-items: center;
font-variant-numeric: tabular-nums;
}
.ab-roll {
display: inline-block;
height: 1.18em;
overflow: hidden;
}
.ab-roll-strip {
display: block;
transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.ab-roll-num {
display: block;
height: 1.18em;
line-height: 1.18em;
text-align: center;
}
.ab-roll-colon {
display: inline-block;
line-height: 1.18em;
padding: 0 0.06em;
transform: translateY(-0.06em);
opacity: 0.75;
}
/* ========== Hero ========== */
#about-hero {
position: relative;
height: 100vh;
height: 100svh;
overflow: hidden;
color: var(--ab-on-img);
}
/* 像素观景舱：about-pixel.js 往里放 6 层低分辨率画布（星空 / 窗外景色 / 船舱 / 摆设 / 人物 / 粒子），
按整数倍放大、最近邻取样保持像素颗粒；各层四周多画一圈边距供鼠标视差平移。JS 未就绪时先铺夜色渐变 */
.about-hero-pixel {
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(#0b1030, #1f2d5c 70%, #3d5a94);
}
.ab-px-layer {
position: absolute;
image-rendering: crisp-edges;
image-rendering: pixelated;
pointer-events: none;
will-change: transform;
}
/* 薄遮罩：左侧略压暗，左上打字机背后再垫一团淡淡的暗晕（窗外的大家伙常常横在那里），保证白字可读 */
.about-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 42% 26% at 26% 21%, rgba(8, 8, 24, 0.34), transparent 72%),
linear-gradient(100deg, rgba(8, 8, 24, 0.3) 0%, rgba(8, 8, 24, 0.08) 45%, transparent 70%);
}
/* 整体洗白（滚动时 JS 由 0 推到 1，Hero 溶进奶油纸） */
.about-hero-wash {
position: absolute;
inset: 0;
background: var(--ab-bg);
opacity: 0;
}
/* 打字机：左上方（落在舷窗外的星空上）。宽度写死成它最多能撑到的宽度（和原来随内容伸缩时的最大行宽一样）：
打字机要按"这一行还剩多少地方"决定英文单词前要不要先换行，框的宽度不能跟着已打出的字变 */
.about-hero-content {
position: absolute;
left: 8vw;
top: 13vh;
width: min(640px, calc(100% - 8vw));
z-index: 2;
}
.about-scrollhint {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 12px;
color: rgba(255, 248, 238, 0.62);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
letter-spacing: 0.3em;
}
.about-scrollhint-arrow {
animation: ab-bob 1.8s ease-in-out infinite;
}
@keyframes ab-bob {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(6px); opacity: 1; }
}
/* ========== Hero 退场 / 返回（动画模式，about.js initHeroVoyage）==========
退场播完 hero 整个拆掉（html.ab-hero-gone），页顶就是第一部分；返回时 hero 先作为盖在页面上的一层（is-stage）淡入，盖严后再放回文档流。
像素 hero 各层的滑出用 CSS 的 translate 属性（和 10-mount 写的视差 transform 互不覆盖）；
.ab-voyage = 星空穿梭 / 地球那块画布（11-voyage），像素大小和 hero 一样 */
html.ab-hero-gone #about-hero { display: none; }
/* 进页面的入场（about.js startIntro）之前：hero 上的标题区、下滑提示、右上角按钮先藏着（html.ab-pre 由 head 里的小脚本加上），
about.js 接手时换成行内样式、等各层划进来再出来；不播入场就直接去掉 ab-pre。万一 about.js 没跑起来，6 秒后自己出来 */
html.ab-pre .about-hero-content,
html.ab-pre .about-hero-overlay,
html.ab-pre .about-scrollhint,
html.ab-pre .about-nav {
opacity: 0;
animation: ab-pre-show 0.4s ease 6s forwards;
}
@keyframes ab-pre-show { to { opacity: 1; } }
#about-hero.is-stage {
position: fixed;
inset: 0;
z-index: 20;
}
.ab-voyage {
position: absolute;
left: 0;
top: 0;
image-rendering: crisp-edges;
image-rendering: pixelated;
pointer-events: none;
}
/* 返回提示：页眉下面正中，一个小圈（攒满就返回）+ 一行字 */
.ab-pull {
--p: 0;
position: fixed;
top: calc(var(--ab-bar-h) + 14px);
left: 50%;
z-index: 26;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 15px 5px 7px;
border-radius: 999px;
background: rgba(255, 251, 243, 0.94);
box-shadow: 0 8px 20px -10px rgba(60, 38, 18, 0.5), 0 0 0 1px rgba(110, 80, 50, 0.12);
color: var(--ab-text);
font-family: var(--ab-hand);
font-size: 0.92rem;
white-space: nowrap;
opacity: 0;
translate: -50% -8px;
pointer-events: none;
transition: opacity 0.25s ease, translate 0.25s ease;
}
.ab-pull.is-on { opacity: 1; translate: -50% 0; }
.ab-pull-ring { width: 22px; height: 22px; rotate: -90deg; }
.ab-pull-ring circle { fill: none; stroke-width: 2.4; }
.ab-pull-track { stroke: rgba(110, 80, 50, 0.18); }
.ab-pull-fill {
stroke: var(--ab-accent);
stroke-linecap: round;
stroke-dasharray: 56.55;
stroke-dashoffset: calc(56.55 * (1 - var(--p)));
}
/* ========== 打字机（手写体；只出现在图片/暗场上，用浅色字） ========== */
.about-typewriter { color: var(--ab-on-img); }
.about-typewriter-lines {
font-family: var(--ab-hand);
font-size: clamp(1.5rem, 3.2vw, 2.5rem);
font-weight: 700;
line-height: 1.8;
text-shadow: 0 1px 3px rgba(8, 8, 24, 0.7), 0 2px 18px rgba(0, 0, 0, 0.55);
}
.about-typewriter-source {
margin-top: 14px;
font-family: var(--ab-mono);
font-size: 0.95rem;
color: #ffc27a;
opacity: 0;
transition: opacity 0.8s ease;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.ti-cursor { color: #ffc27a; }
/* Hero 打字机自己的光标（js 里 initHeroType）：打字 / 删除时常亮，停下来才闪。
宽度为 0（竖线画在外面），不参与排版，行快满时不会把最后一个字挤到下一行 */
.ab-tw-cursor {
display: inline-block;
width: 0;
white-space: nowrap;
text-indent: 0.06em;
color: #ffc27a;
animation: ab-tw-blink 1.04s step-end infinite;
}
.ab-tw-cursor.is-typing { animation: none; }
@keyframes ab-tw-blink { 50% { opacity: 0; } }
/* 量单元宽度用的隐身 span：和正文同字体，不占位置 */
.ab-tw-measure {
position: absolute;
left: -9999px;
top: 0;
visibility: hidden;
white-space: pre;
}
/* ========== 手帐通用零件 ========== */
/* 纸卡："本子"层。颗粒纹理 + 顶部内高光 + 内缩虚线（缝线感） */
.about-idcard,
.about-heatmap-panel,
.about-bento-cell {
position: relative;
background:
var(--ab-grain),
linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
var(--ab-card);
border: 1px solid var(--ab-card-border);
border-radius: var(--ab-radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--ab-shadow);
}
.about-idcard::after,
.about-heatmap-panel::after,
.about-bento-cell::after {
content: '';
position: absolute;
inset: 7px;
border: 1px dashed var(--ab-line);
border-radius: calc(var(--ab-radius) - 6px);
pointer-events: none;
}
/* 纸胶带：两端锯齿撕口 + 斜纹；默认琥珀半透明，plain 为灰米色半透明 */
.ab-tape {
position: absolute;
z-index: 4;
width: 92px;
height: 24px;
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px),
rgba(240, 161, 78, 0.62);
clip-path: polygon(3% 0, 97% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 97% 100%,
3% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%);
pointer-events: none;
}
.ab-tape-plain {
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 5px, transparent 5px 10px),
rgba(150, 125, 100, 0.3);
}
.ab-tape-top { top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.ab-tape-tl { top: -2px; left: -34px; transform: rotate(-38deg); }
.ab-tape-tr { top: -2px; right: -34px; transform: rotate(38deg); }
/* 印章：描边手写字 + 做旧斑驳 */
.about-stamp {
position: absolute;
top: 22px;
left: 24px;
z-index: 2;
padding: 2px 10px 1px;
font-family: var(--ab-hand);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ab-accent-deep);
border: 1.5px solid currentColor;
border-radius: 6px;
transform: rotate(-7deg);
opacity: 0.9;
-webkit-mask-image: var(--ab-stamp-mask);
mask-image: var(--ab-stamp-mask);
-webkit-mask-size: 120px;
mask-size: 120px;
}
/* 荧光笔划线 / 波浪下划线 */
.about-hl {
color: var(--ab-text);
background: linear-gradient(transparent 58%, rgba(255, 180, 94, 0.5) 58%, rgba(255, 180, 94, 0.5) 92%, transparent 92%);
padding: 0 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.about-wavy {
color: var(--ab-text);
text-decoration: underline wavy var(--ab-accent);
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
}
/* 防 F12 的提示：一张贴着纸胶带、微微歪着的奶油色小纸条，左边盖「STAFF ONLY」做旧章，右边手写「后厨重地，闲人免进～」。
index.pug 开头那段脚本在按下开发者工具快捷键时弹出（从下面轻轻弹上来），2 秒后收起 */
.ab-toast {
position: fixed;
left: 50%;
bottom: 36px;
z-index: 200;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 22px 12px 16px;
font-family: var(--ab-hand);
font-size: 1.05rem;
line-height: 1.4;
white-space: nowrap;
color: var(--ab-ink);
background: var(--ab-grain-paper), var(--ab-paper);
border: 1px solid var(--ab-card-border);
border-radius: 3px;
box-shadow: 0 2px 5px rgba(90, 58, 26, 0.12), 0 16px 30px -14px rgba(90, 58, 26, 0.55);
opacity: 0;
translate: -50% 16px;
rotate: -1.5deg;
transition: opacity 0.25s ease, translate 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
pointer-events: none;
}
.ab-toast.is-on { opacity: 1; translate: -50% 0; }
/* 顶上一截纸胶带 */
.ab-toast::before {
content: '';
position: absolute;
top: -11px;
left: 50%;
width: 72px;
height: 20px;
margin-left: -36px;
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px),
rgba(240, 161, 78, 0.62);
clip-path: polygon(3% 0, 97% 0, 100% 25%, 97% 50%, 100% 75%, 97% 100%, 3% 100%, 0 75%, 3% 50%, 0 25%);
transform: rotate(3deg);
}
/* 做旧的「STAFF ONLY」章（和工牌 / 印章同一张斑驳蒙版） */
.ab-toast-stamp {
padding: 2px 8px 1px;
font-family: var(--ab-mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
color: #b0553a;
border: 1.5px solid currentColor;
border-radius: 4px;
transform: rotate(-8deg);
-webkit-mask-image: var(--ab-stamp-mask);
mask-image: var(--ab-stamp-mask);
-webkit-mask-size: 120px;
mask-size: 120px;
}
/* 社交按钮（工牌 + 页脚共用） */
.about-social {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.about-social-btn {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
font-size: 17px;
color: var(--ab-text-dim);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--ab-card-border);
border-radius: 999px;
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.about-social-btn:hover {
color: var(--ab-accent-deep);
border-color: rgba(184, 104, 20, 0.45);
transform: translateY(-2px);
}
/* 复制邮箱后按钮上方冒出的小气泡（文字在 data-tip 里，JS 写入） */
.about-social-btn { position: relative; }
.about-social-btn[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
line-height: 1.5;
white-space: nowrap;
color: #fff8ee;
background: rgba(47, 38, 32, 0.9);
opacity: 0;
translate: -50% 4px;
pointer-events: none;
transition: opacity 0.2s ease, translate 0.2s ease;
}
.about-social-btn.is-tip::after { opacity: 1; translate: -50% 0; }
/* ========== 内容块 ========== */
.about-block {
position: relative;
padding: 14vh 0;
}
.about-block-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 28px;
}
/* 节标题：眉标 + 手写体标题（荧光笔划线） */
.about-head { margin-bottom: 38px; }
.about-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-family: var(--ab-mono);
font-size: 0.78rem;
letter-spacing: 0.24em;
color: var(--ab-accent-text);
}
.about-eyebrow .ab-icon { font-size: 0.95rem; stroke-width: 2; }
.about-heading {
margin: 0;
font-family: var(--ab-hand);
font-size: clamp(1.9rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.04em;
}
.about-heading-mark {
padding: 0 0.14em;
background: linear-gradient(transparent 52%, rgba(255, 180, 94, 0.5) 52%, rgba(255, 180, 94, 0.5) 84%, transparent 84%);
}
.about-bio {
margin: 0 0 14px;
max-width: 62ch;
color: var(--ab-text-dim);
}
/* 简介里的作品名：斜体 */
.about-bio em { font-style: italic; color: var(--ab-text); }
/* --- Block 1：工牌 + 个人信息 --- */
.about-profile {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 56px;
align-items: stretch;
}
/* 右栏纵向排（flex 里外边距不折叠：打卡本上边距按"简介段落下边距 14px + 20px"算回原来的 34px） */
.about-profile-main {
display: flex;
flex-direction: column;
}
.about-profile-main .about-heatmap-panel { margin-top: 20px; }
/* 第一部分的简介段落：右边和下面 GitHub 打卡本对齐（不限 62ch） */
.about-profile-main .about-bio { max-width: none; }
/* 第一部分：标题「关于店长」和信之间收紧 */
.about-profile-main .about-head { margin-bottom: 10px; }
/* 工牌（彩蛋：挂式模式）
平时：微歪 + 纸胶带，静止。长按 3 秒（逐级抖动）→ 弹一下解锁挂式：纸胶带揭掉，
图钉 → 挂绳 → 金属夹出现，工牌挂在块顶留白里的图钉下，可拖动、按单摆摆回。
挂式时工牌的位移/摆角由 JS 物理模拟写入 transform（绕顶边中点旋转）；
抖动与弹跳用独立的 translate/rotate/scale 属性，与 transform 叠加互不覆盖 */
.about-profile-side {
--lanyard: 108px; /* 挂绳长度：图钉位于工牌顶边上方这么高处（伸进块顶留白） */
position: relative;
z-index: 5; /* 拖到右栏上方时压过热力图面板（含其纸胶带） */
}
.about-lanyard {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.about-lanyard-strap {
fill: none;
stroke: var(--ab-accent);
stroke-width: 13;
stroke-linecap: round;
}
.about-lanyard-edge {
fill: none;
stroke: rgba(184, 104, 20, 0.55);
stroke-width: 15;
stroke-linecap: round;
}
.about-lanyard-text {
font-family: var(--ab-mono);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.22em;
fill: rgba(255, 251, 243, 0.92);
}
/* 图钉：挂绳的固定点（位置由 JS 写入） */
.about-lanyard-pin {
position: absolute;
z-index: 3;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffe0b5 0 18%, var(--ab-accent) 45%, var(--ab-accent-deep) 100%);
box-shadow: 0 3px 5px rgba(90, 58, 26, 0.45), inset 0 -2px 3px rgba(90, 40, 0, 0.35);
pointer-events: none;
}
/* 挂式专属零件：平时隐藏，解锁时浮现 */
.about-lanyard,
.about-lanyard-pin,
.about-idcard-clip {
opacity: 0;
transition: opacity 0.3s ease;
}
.about-profile-side.is-hanging .about-lanyard,
.about-profile-side.is-hanging .about-lanyard-pin,
.about-profile-side.is-hanging .about-idcard-clip { opacity: 1; }
.about-idcard {
z-index: 1;
padding: 0 24px 22px;
transform: rotate(-1.2deg);
transform-origin: 50% 0;
touch-action: pan-y;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.about-idcard > .ab-tape { transition: opacity 0.25s ease, translate 0.25s ease; }
/* 挂式：可拖；纸胶带揭掉；触屏上整张都能拖（不再让位给页面滚动） */
.about-profile-side.is-hanging .about-idcard {
cursor: var(--ab-cursor-hand); /* 原来是 grab：接管后系统光标都藏起来，这里也用杯子 */
touch-action: none;
}
.about-profile-side.is-hanging .about-idcard > .ab-tape {
opacity: 0;
translate: 0 -14px;
}
.about-idcard.is-dragging { cursor: var(--ab-cursor-hand); }
.about-idcard a { cursor: var(--ab-cursor-hand); }
/* 工牌里的图片不参与原生拖拽，按在头像上也是按/拖整张工牌 */
.about-idcard img {
-webkit-user-drag: none;
pointer-events: none;
}
/* 长按抖动：每秒升一档 */
.about-idcard.is-pressing { animation: ab-shake-1 0.16s linear infinite; }
.about-idcard.is-pressing[data-shake='2'] { animation: ab-shake-2 0.12s linear infinite; }
.about-idcard.is-pressing[data-shake='3'] { animation: ab-shake-3 0.08s linear infinite; }
@keyframes ab-shake-1 {
0%, 100% { translate: 0 0; rotate: 0deg; }
25% { translate: 0.6px -0.5px; rotate: 0.5deg; }
75% { translate: -0.6px 0.5px; rotate: -0.5deg; }
}
@keyframes ab-shake-2 {
0%, 100% { translate: 0 0; rotate: 0deg; }
25% { translate: 1.4px -1px; rotate: 1.1deg; }
75% { translate: -1.4px 1px; rotate: -1.1deg; }
}
@keyframes ab-shake-3 {
0%, 100% { translate: 0 0; rotate: 0deg; }
25% { translate: 2.4px -1.6px; rotate: 2deg; }
75% { translate: -2.4px 1.6px; rotate: -2deg; }
}
/* 解锁瞬间弹一下 */
.about-idcard.is-pop { animation: ab-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes ab-pop {
0% { scale: 1; }
35% { scale: 1.07; }
70% { scale: 0.98; }
100% { scale: 1; }
}
/* 恢复正常：平滑回到原位与原角度 */
.about-idcard.is-returning { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* 金属夹：上面是挂绳扣住的金属头，下面伸出一截带子压过工牌上沿、插进挂绳孔（孔在横幅 top 14px、高 9px）。
带子末端停在孔的上半截、颜色压暗——像是从孔里穿到背面去了；孔的两侧和下半截还露着。随工牌一起旋转 */
.about-idcard-clip {
position: absolute;
top: -24px;
left: 50%;
z-index: 3;
width: 28px;
height: 43px; /* 到工牌上沿下 19px：孔的上半截 */
margin-left: -14px;
pointer-events: none;
}
/* 带子：从金属头下面伸出来，末端几像素在孔里（压暗） */
.about-idcard-clip::before {
content: '';
position: absolute;
top: 16px;
bottom: 0;
left: 50%;
width: 20px;
margin-left: -10px;
border-radius: 0 0 2px 2px;
background: linear-gradient(180deg, #cfd4dc 0%, #b3bac5 calc(100% - 6px), #5b626d calc(100% - 5px), #2f343c 100%);
box-shadow: 0 1px 2px rgba(40, 26, 14, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset -1px 0 0 rgba(0, 0, 0, 0.12);
}
/* 金属头：一颗铆钉 */
.about-idcard-clip::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 22px;
border-radius: 7px 7px 5px 5px;
background:
radial-gradient(circle at 50% 60%, #858d99 0 2.4px, #eef0f4 3.2px, transparent 4px),
linear-gradient(180deg, #eef0f4 0%, #bcc3cd 55%, #9aa2ae 100%);
box-shadow: 0 2px 4px rgba(60, 38, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* 横幅：头像放大模糊 + 琥珀渐层；中间打挂绳孔 */
.about-idcard-banner {
position: relative;
height: 104px;
margin: 0 -24px;
overflow: hidden;
border-radius: var(--ab-radius) var(--ab-radius) 0 0;
background: #3a2a1e;
}
.about-idcard-banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(16px) saturate(1.3) brightness(0.8);
transform: scale(1.35);
}
.about-idcard-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(240, 161, 78, 0.5), rgba(58, 42, 30, 0.1) 70%);
}
.about-idcard-slot {
position: absolute;
top: 14px;
left: 50%;
z-index: 1;
width: 46px;
height: 9px;
transform: translateX(-50%);
border-radius: 999px;
background: var(--ab-bg);
box-shadow: inset 0 1px 3px rgba(60, 38, 18, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3);
}
.about-idcard-label {
position: absolute;
right: 18px;
bottom: 10px;
z-index: 1;
font-family: var(--ab-mono);
font-size: 10px;
letter-spacing: 0.28em;
color: rgba(255, 250, 242, 0.9);
}
.about-avatar {
position: relative;
z-index: 1;
display: block;
width: 104px;
height: 104px;
margin-top: -46px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--ab-accent);
background: var(--ab-card);
box-shadow: 0 0 0 5px var(--ab-card), 0 8px 24px rgba(184, 104, 20, 0.3);
}
.about-name {
margin: 14px 0 0;
font-family: var(--ab-hand);
font-size: 2.1rem;
font-weight: 700;
line-height: 1.3;
}
.about-role {
margin: 2px 0 10px;
font-family: var(--ab-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
color: var(--ab-accent-text);
}
.about-motto {
margin: 0 0 16px;
font-family: var(--ab-hand);
font-size: 0.98rem;
color: var(--ab-text-dim);
}
.about-idcard-info {
list-style: none;
margin: 0 0 18px;
padding: 14px 0 0;
border-top: 1px dashed var(--ab-line);
display: grid;
gap: 7px;
font-size: 0.88rem;
}
.about-idcard-info li {
display: grid;
grid-template-columns: 18px 40px 1fr;
align-items: center;
gap: 8px;
}
.about-idcard-info .ab-icon { font-size: 16px; color: var(--ab-accent-deep); }
/* 一串小标签的那一行：图标和键名贴顶，标签自动换行 */
.about-idcard-info .about-idcard-row-tags { align-items: start; }
.about-idcard-row-tags .ab-icon,
.about-idcard-row-tags .about-idcard-k { margin-top: 3px; }
/* 并列几行（主攻）：图标和键名贴顶，第二行起前面一个琥珀色 & */
.about-idcard-info .about-idcard-row-lines { align-items: start; }
.about-idcard-row-lines .ab-icon,
.about-idcard-row-lines .about-idcard-k { margin-top: 2px; }
.about-idcard-lines {
display: flex;
flex-direction: column;
gap: 1px;
}
.about-idcard-lines span + span::before {
content: '& ';
font-family: var(--ab-hand);
font-weight: 700;
color: var(--ab-accent-deep);
}
.about-idcard-tags {
display: flex;
flex-wrap: wrap;
gap: 5px 5px;
}
.about-idcard-tags span {
padding: 1px 7px 2px;
border: 1px solid rgba(184, 104, 20, 0.28);
border-radius: 999px;
background: rgba(240, 161, 78, 0.1);
font-size: 0.74rem;
line-height: 1.5;
color: var(--ab-accent-text);
}
.about-idcard-k {
font-family: var(--ab-mono);
font-size: 0.74rem;
color: var(--ab-text-dim);
}
/* 装饰条码：两层不同周期的竖线叠出"随机"感 */
/* 条形码：矢量竖条（index.pug 的 BARCODE），跟着工牌一起歪，竖条始终垂直于工牌下边 */
.about-idcard-barcode {
height: 30px;
margin-top: 20px;
opacity: 0.5;
}
.about-idcard-barcode svg {
display: block;
width: 100%;
height: 100%;
fill: var(--ab-text);
shape-rendering: geometricPrecision;
}
.about-idcard-serial {
margin: 6px 0 0;
font-family: var(--ab-mono);
font-size: 0.66rem;
letter-spacing: 0.3em;
color: var(--ab-text-dim);
}
/* --- 第一部分 · 自我介绍：一封信 ---
一张红线信笺压在一只航空信封上（信封只露出下沿和两侧一点）；右上角贴邮票、盖邮戳。
正文手写体，行高固定 --ln，横线画在每一行的同一高度（段与段之间不留段距，靠首行缩进分段）。
平时收着：信纸下半截插在信封里（块高和信纸的裁切由 about.js initIntroLetter 写），点一下抽出来展开。
动画模式下信先藏着（is-out 之前整张裁掉），进入视野时从信封口升到收着的位置 */
.ab-letter {
--ln: 28px; /* 信纸行高 = 横线间距 */
--rule: rgba(196, 92, 60, 0.26); /* 红线 */
--pm: rgba(72, 52, 58, 0.62); /* 邮戳油墨 */
position: relative;
isolation: isolate;
margin-bottom: 14px; /* 与原来简介段落的下边距相同：打卡本上边距 20 + 14 */
padding-bottom: 44px; /* 信封露在信纸下面的那一截 */
transform: rotate(-0.4deg);
}
/* 信封：上沿（信封口）在信纸下沿往上 30px（= about.js initIntroLetter 的 IN）；四周一圈航空信封斜纹 */
.ab-letter-env {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 74px;
border: 7px solid transparent;
border-radius: 4px;
background:
var(--ab-grain-paper) padding-box,
linear-gradient(180deg, #ecdcc0, #e3cfac) padding-box,
repeating-linear-gradient(-45deg, #e8923a 0 9px, #fbf3e4 9px 14px, #3aa596 14px 23px, #fbf3e4 23px 28px) border-box;
box-shadow: 0 16px 30px -18px rgba(90, 58, 26, 0.55);
}
.ab-letter-env-to {
position: absolute;
right: 14px;
bottom: 4px;
font-family: var(--ab-hand);
font-size: 0.92rem;
letter-spacing: 0.06em;
color: #7a5634;
}
.ab-letter-paper {
position: relative;
z-index: 2;
margin: 0 14px;
padding: 20px 30px 22px;
color: var(--ab-ink);
background: var(--ab-grain-paper), linear-gradient(180deg, #fffdf7, #fcf4e6);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 5px rgba(90, 58, 26, 0.12),
0 16px 30px -16px rgba(90, 58, 26, 0.5);
}
html.ab-anim .ab-letter:not(.is-out) .ab-letter-paper { clip-path: inset(0 0 100% 0) !important; }
/* 收着的时候点信纸也能展开 */
.ab-letter.is-folded .ab-letter-paper { cursor: var(--ab-cursor-hand); }
/* 展开 / 收起：信封正中一个上下轻轻浮动的小三角（收着朝下 / 展开朝上）；脚本判断需要收起（is-foldable）时才显示 */
.ab-letter-toggle {
position: absolute;
left: 50%;
bottom: 6px;
z-index: 3;
display: none;
width: 36px;
height: 26px;
margin-left: -18px;
padding: 0;
color: #8a6038;
background: none;
border: 0;
border-radius: 6px;
cursor: var(--ab-cursor-hand);
animation: ab-letter-bob 1.8s ease-in-out infinite;
}
@keyframes ab-letter-bob {
0%, 100% { translate: 0 -2px; }
50% { translate: 0 2px; }
}
.ab-letter.is-foldable .ab-letter-toggle { display: block; }
.ab-letter-toggle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 9px;
margin: -4px 0 0 -7px;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.5, 1); /* 朝下 ↔ 朝上：转过去，最后稍微回弹一下 */
}
.ab-letter:not(.is-folded) .ab-letter-toggle::before { transform: rotate(180deg); }
.ab-letter-toggle:hover { color: var(--ab-accent-deep); }
.ab-letter-toggle:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
/* 信头：印好的红字 + 双线 */
.ab-letter-head {
display: flex;
align-items: baseline;
gap: 12px;
height: 36px;
margin-bottom: 14px;
border-bottom: 3px double rgba(196, 92, 60, 0.5);
color: #b0553a;
}
.ab-letter-brand {
font-family: var(--ab-mono);
font-size: 0.76rem;
letter-spacing: 0.32em;
}
.ab-letter-sub {
font-family: var(--ab-hand);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.2em;
}
/* 邮票：外层投影，中层白边打齿孔（54×63 是 9 的整数倍，齿孔正好落在四条边上），里面一小片萤火夜空 */
.ab-letter-stamp {
position: absolute;
top: 14px;
right: 20px;
z-index: 1;
rotate: 4deg;
filter: drop-shadow(0 1px 1.5px rgba(90, 58, 26, 0.35));
pointer-events: none;
}
.ab-letter-stamp-paper {
display: block;
width: 54px;
height: 63px;
padding: 5px;
background: #fffdf8;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
radial-gradient(circle, transparent 2.2px, #000 2.7px) -4.5px -4.5px / 9px 9px;
mask:
linear-gradient(#000 0 0) content-box,
radial-gradient(circle, transparent 2.2px, #000 2.7px) -4.5px -4.5px / 9px 9px;
}
.ab-letter-stamp-art {
position: relative;
display: block;
height: 100%;
background:
radial-gradient(circle at 66% 38%, #f6ffc8 0 1.2px, rgba(200, 255, 140, 0.6) 2px, transparent 6px),
radial-gradient(circle at 30% 62%, #f6ffc8 0 1px, rgba(200, 255, 140, 0.5) 1.6px, transparent 5px),
radial-gradient(circle at 48% 80%, rgba(246, 255, 200, 0.9) 0 0.8px, transparent 3px),
radial-gradient(130% 55% at 50% 118%, rgba(255, 196, 120, 0.65), transparent 70%),
linear-gradient(170deg, #121a33, #154046);
}
.ab-letter-stamp-val {
position: absolute;
top: 3px;
left: 4px;
font-family: var(--ab-mono);
font-size: 10px;
font-weight: 700;
line-height: 1;
color: #ffd79a;
}
/* 邮戳：圆戳只压住邮票左边一小条（油墨盖在深色票面上就看不见了），左边拖几道波浪注销线；做旧斑驳和印章同一张蒙版 */
.ab-letter-postmark {
position: absolute;
top: 36px;
right: 64px;
z-index: 2;
display: flex;
align-items: center;
width: 154px;
height: 70px;
color: var(--pm);
rotate: -12deg;
-webkit-mask-image: var(--ab-stamp-mask);
mask-image: var(--ab-stamp-mask);
-webkit-mask-size: 120px;
mask-size: 120px;
pointer-events: none;
}
.ab-letter-postmark-waves {
flex: 1;
height: 28px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='28'%3E%3Cg fill='none' stroke='%23483a3a' stroke-width='1.5'%3E%3Cpath d='M0 4q5.25-4 10.5 0t10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0'/%3E%3Cpath d='M0 14q5.25-4 10.5 0t10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0'/%3E%3Cpath d='M0 24q5.25-4 10.5 0t10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0 10.5 0'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
opacity: 0.9;
}
.ab-letter-postmark-ring {
display: grid;
flex: none;
place-content: center;
justify-items: center;
width: 70px;
height: 70px;
border: 1.5px solid currentColor;
border-radius: 50%;
box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4.2px currentColor;
font-family: var(--ab-mono);
font-size: 8px;
line-height: 1.3;
letter-spacing: 0.08em;
}
.ab-letter-postmark-ring b {
margin: 1px 0;
padding: 1px 0;
font-size: 9.5px;
letter-spacing: 0;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
}
/* 正文：每一行下面一道红线（线在行盒底往上 4px，贴着字脚） */
.ab-letter-body {
font-family: var(--ab-hand);
font-size: 0.97rem;
line-height: var(--ln);
background: repeating-linear-gradient(180deg,
transparent 0 calc(var(--ln) - 4px),
var(--rule) calc(var(--ln) - 4px) calc(var(--ln) - 3px),
transparent calc(var(--ln) - 3px) var(--ln));
}
.ab-letter-body p { margin: 0; text-indent: 2em; }
.ab-letter-body em { font-style: italic; }
.ab-letter-to { font-weight: 700; }
.ab-letter-body .ab-letter-to,
.ab-letter-body .ab-letter-sign { text-indent: 0; }
/* 收尾一排：左边手写格言，右边落款，各占两行（并排，不多占高度）；放不下时（手机）落款折到格言下面、靠右，
中间空一行格子（花体字脚不碰署名，横线也还对得上） */
.ab-letter-close {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--ln) 16px;
}
/* 格言：手写艺术体（Birthstone），两行，每行字脚落在一道横线上，两行左右错开，摆在落款左边空白处的中间；墨色从晨光的琥珀渐到萤火的青绿。
动画模式下第一次展开之前先藏着（is-signed 之前裁掉），第一次展开时一行一行从左往右"写"出来，见 about.js initIntroLetter */
.ab-letter-body .ab-letter-motto {
/* 占满落款左边那块空白，两行作为一个整体摆在它的水平中间（grid：一列宽 = 较长那行，两行在列里照旧左对齐、第二行错开） */
display: grid;
flex: 1 1 auto; /* 按内容宽度决定要不要折行（手机上落款照旧折到下面），有富余再撑满 */
justify-content: center;
justify-items: start;
text-indent: 0;
font-family: 'Birthstone', var(--ab-hand);
font-size: 2.05rem;
line-height: var(--ln);
white-space: nowrap;
}
.ab-letter-motto span {
/* 墨色是 background-clip: text，只画在这个盒子里：上下撑开，花体伸出行盒的字脚 / 起笔才有颜色（外边距抵回去，不占位） */
margin: -0.35em 0;
padding: 0.35em 0.12em;
translate: 0 0.12em;
background: linear-gradient(100deg, #9c4f16 0%, #c47a26 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ab-letter-motto span + span {
margin-left: 3.2em;
background-image: linear-gradient(100deg, #c47a26 0%, #3b8e82 100%);
}
html.ab-anim .ab-letter:not(.is-signed) .ab-letter-motto span { clip-path: inset(-0.5em 100% -0.5em -0.5em); }
/* 落款：靠右两行（署名 + 写于哪里） */
.ab-letter-body .ab-letter-sign {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
padding-right: 0.5em;
}
.ab-letter-sign-name {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ab-accent-deep);
}
.ab-letter-sign-at { font-size: 0.9rem; color: var(--ab-ink-dim); }
/* --- GitHub 打卡本 --- */
.about-heatmap-panel {
margin-top: 34px;
padding: 22px 24px 18px;
}
.about-heatmap-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
}
.about-heatmap-title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--ab-hand);
font-size: 1.15rem;
font-weight: 700;
}
.about-heatmap-title .ab-icon { font-size: 18px; }
.about-heatmap-user {
font-family: var(--ab-mono);
font-size: 0.85rem;
color: var(--ab-accent-text);
text-decoration: none;
}
.about-heatmap-user:hover { text-decoration: underline; }
/* 三个统计：名称和数字排在一行（面板矮一截，省下的高度让给上面收着的信） */
.about-heatmap-stats {
display: flex;
flex-wrap: wrap;
gap: 4px 26px;
margin-bottom: 12px;
}
.about-heatmap-stat {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1.4;
}
.about-heatmap-num {
font-family: var(--ab-hand);
font-size: 1.12rem;
font-weight: 700;
color: var(--ab-accent-deep);
}
.about-heatmap-label {
font-size: 0.78rem;
color: var(--ab-text-dim);
}
/* 第四项「下次提交 AFKfishing...」：每个字母一个 span（--i = 第几个字），
颜色在一圈彩色里慢慢轮换、字母之间错开一点（颜色像一道彩虹往右流）；同时像水面上的浮漂一样一上一下，相位也错开，连成一道小波浪。
后面三个点（--j）依次亮起、熄灭，像在等鱼上钩。颜色都挑在纸色底上看得清的深一点的色 */
.ab-afk { white-space: nowrap; }
.ab-afk span {
display: inline-block;
animation:
ab-afk-hue 3.6s linear infinite,
ab-afk-float 1.8s ease-in-out infinite;
animation-delay: calc(var(--i) * -0.22s), calc(var(--i) * -0.16s);
}
.ab-afk .ab-afk-dot {
animation:
ab-afk-hue 3.6s linear infinite,
ab-afk-float 1.8s ease-in-out infinite,
ab-afk-dot 1.5s ease-in-out infinite;
animation-delay: calc(var(--i) * -0.22s), calc(var(--i) * -0.16s), calc(var(--j) * 0.25s);
}
@keyframes ab-afk-hue {
0%, 100% { color: #e0484f; }
16% { color: #ec7d1f; }
33% { color: #c59a0c; }
50% { color: #2f9e63; }
66% { color: #2a86d1; }
83% { color: #8655d4; }
}
@keyframes ab-afk-float {
0%, 100% { transform: translateY(1px); }
50% { transform: translateY(-3px); }
}
@keyframes ab-afk-dot {
0%, 100% { opacity: 0.2; }
35%, 60% { opacity: 1; }
}
.about-heatmap { overflow-x: auto; padding-bottom: 4px; }
.about-heatmap-loading {
font-size: 0.85rem;
color: var(--ab-text-dim);
}
/* 网格：第 0 列星期刻度、第 0 行月份刻度；格子随面板宽度自适应（窄屏横向滚动） */
.about-heatmap-grid {
display: grid;
grid-auto-flow: column;
grid-template-columns: 16px repeat(var(--cols, 53), minmax(0, 1fr));
grid-template-rows: auto repeat(7, auto);
gap: 3px;
min-width: 560px;
}
.about-heatmap-cell {
display: block;
aspect-ratio: 1;
border-radius: 2px;
background: rgba(110, 80, 50, 0.1);
}
.about-heatmap-cell[data-level='1'] { background: rgba(240, 161, 78, 0.35); }
.about-heatmap-cell[data-level='2'] { background: rgba(240, 161, 78, 0.6); }
.about-heatmap-cell[data-level='3'] { background: rgba(224, 138, 50, 0.85); }
.about-heatmap-cell[data-level='4'] {
background: var(--ab-accent-deep);
box-shadow: 0 0 5px rgba(240, 161, 78, 0.6);
}
.about-heatmap-month,
.about-heatmap-wd {
font-size: 10px;
line-height: 1;
color: var(--ab-text-dim);
white-space: nowrap;
}
/* 月份行固定高度：骨架（全空）与真实网格（有月份字）高度一致 */
.about-heatmap-month { height: 13px; padding-bottom: 3px; }
.about-heatmap-wd {
display: flex;
align-items: center;
}
.about-heatmap-legend {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
margin-top: 10px;
font-size: 0.72rem;
color: var(--ab-text-dim);
}
.about-heatmap-legend .about-heatmap-cell { width: 10px; }
.about-heatmap-legend span:first-child { margin-right: 4px; }
.about-heatmap-legend span:last-child { margin-left: 4px; }
/* --- Block 2：bento --- */
.about-bento {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
}
.about-bento-cell {
overflow: hidden;
grid-column: span 2;
min-height: 236px;
padding: 24px 26px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: border-color 0.25s ease;
}
.about-bento-cell:hover { border-color: rgba(184, 104, 20, 0.45); }
/* 两条主线并排：各占 3 列，左上角一团琥珀光 */
.about-bento-main {
grid-column: span 3;
background:
var(--ab-grain),
radial-gradient(120% 130% at 0% 0%, rgba(240, 161, 78, 0.2) 0%, rgba(240, 161, 78, 0) 55%),
var(--ab-card);
}
.about-bento-img {
grid-column: span 4;
min-height: 250px;
}
.about-bento-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 上沿也压暗一点，印章和贴纸在亮图上才看得清（压暗只用原来的一半：照片本身够暗，字照样看得清） */
.about-bento-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(24, 16, 10, 0.275) 0%, rgba(24, 16, 10, 0) 34%),
linear-gradient(to top, rgba(24, 16, 10, 0.44) 0%, rgba(24, 16, 10, 0.06) 62%);
}
/* 线稿插画：右上角，淡棕线条 + 琥珀点睛 */
.about-bento-doodle {
position: absolute;
top: 18px;
right: 20px;
width: 112px;
color: rgba(80, 58, 40, 0.38);
pointer-events: none;
}
.about-bento-main .about-bento-doodle { width: 128px; top: 16px; right: 24px; }
/* 简介收窄到插画左边，不和右上角的线稿打架 */
.about-bento-main .about-bento-desc { max-width: 21em; }
.about-bento-doodle svg {
display: block;
width: 100%;
height: auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.about-bento-doodle .dd-hidden { stroke-dasharray: 3 5; opacity: 0.7; }
.about-bento-doodle .dd-thin { stroke-width: 1; opacity: 0.6; }
.about-bento-doodle .dd-atom { fill: var(--ab-card); }
.about-bento-doodle .dd-faint { opacity: 0.55; }
.about-bento-doodle .dd-dot { fill: currentColor; stroke: none; }
.about-bento-doodle .dd-accent {
fill: var(--ab-accent);
stroke: var(--ab-accent-deep);
filter: drop-shadow(0 0 4px rgba(240, 161, 78, 0.55));
}
.about-bento-doodle .dd-note {
font-family: var(--ab-hand);
font-size: 13px;
fill: currentColor;
stroke: none;
}
/* 圆形贴纸（摄影卡）：白纸 + 白边 + 投影，歪贴 */
.about-sticker {
position: absolute;
top: 18px;
right: 20px;
z-index: 2;
display: grid;
place-items: center;
width: 58px;
height: 58px;
font-size: 26px;
color: var(--ab-ink);
background: var(--ab-grain-paper), var(--ab-paper);
border: 3px solid #fff;
border-radius: 50%;
transform: rotate(12deg);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.about-bento-body {
position: relative;
z-index: 1;
}
.about-bento-title {
margin: 0 0 6px;
font-family: var(--ab-hand);
font-size: 1.3rem;
font-weight: 700;
}
.about-bento-desc {
margin: 0;
font-size: 0.9rem;
color: var(--ab-text-dim);
max-width: 46ch;
}
.about-tags {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-family: var(--ab-mono);
font-size: 0.74rem;
color: var(--ab-accent-text);
}
/* 图片卡：字与印章改为浅色 */
.about-bento-img .about-bento-title { color: var(--ab-on-img); }
.about-bento-img .about-bento-desc { color: rgba(255, 248, 238, 0.86); }
.about-bento-img .about-tags,
.about-bento-img .about-stamp { color: #ffc27a; }
.about-bento-img::after { border-color: rgba(255, 255, 255, 0.25); }
/* 计算机卡（占 4 格）：左文字，右终端 */
.about-bento-code {
grid-column: span 4;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
align-items: center;
gap: 24px;
padding: 26px;
}
/* 摄影磁贴：几张照片叠在一起交叉淡入，当前那张慢慢推近；右下角小圆点 */
.about-bento-slides { position: absolute; inset: 0; }
.about-bento-slide {
opacity: 0;
transform: scale(1.04);
transition: opacity 1.4s ease, transform 7s linear;
}
.about-bento-slide.is-on { opacity: 1; transform: scale(1.12); }
.about-bento-dots {
position: absolute;
right: 22px;
bottom: 22px;
z-index: 2;
display: flex;
gap: 6px;
}
.about-bento-dots span {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(255, 248, 238, 0.45);
transition: width 0.4s ease, background 0.4s ease;
}
.about-bento-dots span.is-on { width: 18px; background: #ffc27a; }
/* 终端：保持深色（纸上的一块屏幕） */
.about-term {
position: relative;
z-index: 1;
overflow: hidden;
font-family: var(--ab-mono);
font-size: 0.8rem;
color: #f3ebe0;
background: #2a2019;
border: 1px solid rgba(60, 40, 25, 0.5);
border-radius: 10px;
box-shadow: 0 18px 36px -18px rgba(60, 38, 18, 0.7);
}
.about-term-bar {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.about-term-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.about-term-dot:first-child { background: #ffb45e; }
.about-term-title {
margin-left: 8px;
font-size: 0.72rem;
color: #b9aa98;
}
.about-term-body {
padding: 14px 16px 16px;
line-height: 1.75;
white-space: nowrap;
overflow: hidden;
}
.about-term-line { display: flex; gap: 0.7em; }
.about-term-p { color: #ffb45e; }
.about-term-path { color: #b9aa98; }
/* 输出行放不下时在空格处折行（不出横向滚动条），折下来的部分和上一行对齐；目录名整个不拆（about-term-nb） */
.about-term-out { padding-left: 1.7em; color: #b9aa98; white-space: pre-wrap; }
.about-term-nb { white-space: nowrap; }
.about-term-info { color: #ffb45e; }
.about-term-cursor {
display: inline-block;
width: 0.55em;
height: 1.1em;
align-self: center;
background: #ffb45e;
animation: ab-blink 1.1s steps(1) infinite;
}
@keyframes ab-blink {
50% { opacity: 0; }
}
/* --- Block 3：写过的文字（白纸索引卡：表头线 + 横线纸） --- */
.about-posts {
display: grid;
grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
gap: 26px 24px;
margin-top: 30px;
}
.about-post {
--r: 0deg;
position: relative;
display: flex;
flex-direction: column;
padding: 18px 20px 14px;
color: var(--ab-ink);
text-decoration: none;
background: var(--ab-grain-paper), var(--ab-paper);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(110, 80, 50, 0.12), 0 16px 30px -14px rgba(90, 58, 26, 0.45);
transform: rotate(var(--r));
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-post:hover,
.about-post:focus-visible {
z-index: 2;
transform: translateY(-6px) rotate(0deg);
box-shadow: 0 1px 0 rgba(110, 80, 50, 0.12), 0 26px 44px -16px rgba(90, 58, 26, 0.5);
outline: none;
}
/* 主卡：占左侧两行，多一张贴上去的照片 */
.about-post-feature { grid-row: span 2; }
.about-post-photo {
position: relative;
display: block;
aspect-ratio: 16 / 10;
margin: 6px 0 16px;
background: #d9ccb8;
box-shadow: 0 3px 8px rgba(60, 38, 18, 0.25);
transform: rotate(1.4deg);
}
.about-post-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.about-post-photo .ab-tape { width: 78px; height: 20px; top: -10px; }
.about-post-meta {
display: flex;
justify-content: space-between;
gap: 10px;
font-family: var(--ab-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--ab-ink-dim);
white-space: nowrap;
}
.about-post-cat {
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
color: var(--ab-accent-deep);
}
/* 标题 + 索引卡的琥珀色表头线；最多两行 */
.about-post-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 8px 0 0;
padding-bottom: 8px;
font-family: var(--ab-hand);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
border-bottom: 2px solid rgba(184, 104, 20, 0.55);
}
.about-post-feature .about-post-title { font-size: 1.6rem; }
/* 摘要写在横线纸上：行高与横线间距一致，空白处也铺满横线 */
.about-post-desc {
flex: 1;
min-height: 84px;
margin: 0;
padding-top: 1px;
font-family: var(--ab-hand);
font-size: 0.95rem;
line-height: 28px;
color: #4a4038;
background: repeating-linear-gradient(transparent 0 27px, rgba(43, 37, 33, 0.12) 27px 28px);
}
.about-post-feature .about-post-desc { font-size: 1.05rem; }
.about-post-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
}
.about-post-tags {
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
min-width: 0;
font-family: var(--ab-mono);
font-size: 0.66rem;
color: var(--ab-ink-dim);
}
.about-post-go {
flex: none;
font-family: var(--ab-hand);
font-size: 0.9rem;
font-weight: 700;
color: var(--ab-accent-deep);
transition: transform 0.25s ease;
}
.about-post:hover .about-post-go { transform: translateX(4px); }
/* 回形针：夹在卡片上沿 */
.about-post-clip {
position: absolute;
top: -18px;
right: 26px;
z-index: 3;
font-size: 42px;
line-height: 0;
color: #9aa1ad;
transform: rotate(10deg);
filter: drop-shadow(0 2px 2px rgba(60, 38, 18, 0.3));
}
.about-post-clip .ab-icon { stroke-width: 1.4; }
/* --- 抽签盒：头脑风暴左边一栏——一张和纸卡：顶上横拉一根注连绳、垂着两条纸垂，中间日式六角签箱（SVG），下面两行小字，底边一抹青海波。
抽到的签纸平时收着，鼠标移到这一栏上才从签箱右边弹出来（键盘聚焦签箱、手机上点签箱 = is-open）。按住签箱摇签的时候先收起（is-busy），摇出签再弹。见 about.js initOmikuji --- */
.about-omikuji {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 44px 0 32px;
text-align: center;
background: var(--ab-grain-paper), #fffaf0;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(60, 38, 18, 0.16), 0 16px 30px -18px rgba(60, 38, 18, 0.55);
}
/* 注连绳 + 两条纸垂：绳子两头各伸出卡片 8px，中间垂下来、也更粗；签冒出来时顶到绳子下沿（绳子盖在签箱上面） */
.about-omikuji::before {
content: '';
position: absolute;
z-index: 3;
top: 2px;
left: -8px;
right: -8px;
height: 64px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='64'%3E%3Crect x='44.5' y='18' width='3' height='4' fill='%23fffdf8' stroke='%23a8977e' stroke-width='.7'/%3E%3Cpolygon points='41.5,21 50.5,21 50.5,29 55.5,29 55.5,37 50.5,37 50.5,45 55.5,45 55.5,53 46.5,53 46.5,45 41.5,45 41.5,37 46.5,37 46.5,29 41.5,29' fill='%23fffdf8'/%3E%3Cg fill='%23ebe2d2'%3E%3Crect x='46.5' y='29' width='9' height='8'/%3E%3Crect x='46.5' y='45' width='9' height='8'/%3E%3C/g%3E%3Cpolygon points='41.5,21 50.5,21 50.5,29 55.5,29 55.5,37 50.5,37 50.5,45 55.5,45 55.5,53 46.5,53 46.5,45 41.5,45 41.5,37 46.5,37 46.5,29 41.5,29' fill='none' stroke='%23a8977e' stroke-width='.8' stroke-linejoin='round'/%3E%3Crect x='168.5' y='18' width='3' height='4' fill='%23fffdf8' stroke='%23a8977e' stroke-width='.7'/%3E%3Cpolygon points='165.5,21 174.5,21 174.5,29 169.5,29 169.5,37 174.5,37 174.5,45 169.5,45 169.5,53 160.5,53 160.5,45 165.5,45 165.5,37 160.5,37 160.5,29 165.5,29' fill='%23fffdf8'/%3E%3Cg fill='%23ebe2d2'%3E%3Crect x='160.5' y='29' width='9' height='8'/%3E%3Crect x='160.5' y='45' width='9' height='8'/%3E%3C/g%3E%3Cpolygon points='165.5,21 174.5,21 174.5,29 169.5,29 169.5,37 174.5,37 174.5,45 169.5,45 169.5,53 160.5,53 160.5,45 165.5,45 165.5,37 160.5,37 160.5,29 165.5,29' fill='none' stroke='%23a8977e' stroke-width='.8' stroke-linejoin='round'/%3E%3Cpath d='M0,8.8 6,9.2 12,9.6 18,10 24,10.3 30,10.7 36,11 42,11.3 48,11.5 54,11.8 60,12 66,12.1 72,12.3 78,12.4 84,12.6 90,12.6 96,12.7 102,12.7 108,12.8 114,12.7 120,12.7 126,12.6 132,12.6 138,12.4 144,12.3 150,12.1 156,12 162,11.8 168,11.5 174,11.3 180,11 186,10.7 192,10.3 198,10 204,9.6 210,9.2 216,8.8 216,15.2 210,16.3 204,17.3 198,18.3 192,19.2 186,20 180,20.8 174,21.5 168,22.2 162,22.8 156,23.3 150,23.7 144,24.1 138,24.5 132,24.8 126,25 120,25.1 114,25.2 108,25.2 102,25.2 96,25.1 90,25 84,24.8 78,24.5 72,24.1 66,23.7 60,23.3 54,22.8 48,22.2 42,21.5 36,20.8 30,20 24,19.2 18,18.3 12,17.3 6,16.3 0,15.2Z' fill='%23d6b169' stroke='%237c5a28' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.2 10.1L9.8 15.8 M10.5 10.5L15.5 16.7 M15.8 10.8L21.2 17.6 M21.2 11.1L26.8 18.4 M26.5 11.4L32.5 19.2 M31.9 11.7L38.1 19.9 M37.2 12L43.8 20.5 M42.6 12.2L49.4 21.2 M48 12.5L55 21.7 M53.4 12.7L60.6 22.2 M58.8 12.8L66.2 22.7 M64.3 13L71.7 23.1 M69.7 13.1L77.3 23.4 M75.1 13.3L82.9 23.7 M80.6 13.4L88.4 24 M86.1 13.4L93.9 24.2 M91.5 13.5L99.5 24.3 M97 13.5L105 24.4 M102.5 13.5L110.5 24.4 M108 13.5L116 24.4 M113.5 13.5L121.5 24.4 M119 13.5L127 24.3 M124.6 13.4L132.4 24.1 M130.1 13.3L137.9 23.9 M135.7 13.2L143.3 23.6 M141.2 13.1L148.8 23.3 M146.8 12.9L154.2 22.9 M152.4 12.8L159.6 22.5 M158 12.6L165 22 M163.6 12.4L170.4 21.5 M169.2 12.1L175.8 20.9 M174.8 11.9L181.2 20.2 M180.4 11.6L186.6 19.6 M186.1 11.3L191.9 18.8 M191.7 11L197.3 18 M197.4 10.6L202.6 17.2 M203.1 10.3L207.9 16.3 M208.7 9.9L213.3 15.4' stroke='%239c7438' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M6,10.8 12,11.2 18,11.6 24,11.9 30,12.3 36,12.6 42,12.9 48,13.1 54,13.3 60,13.6 66,13.7 72,13.9 78,14 84,14.2 90,14.2 96,14.3 102,14.3 108,14.3 114,14.3 120,14.3 126,14.2 132,14.2 138,14 144,13.9 150,13.7 156,13.6 162,13.3 168,13.1 174,12.9 180,12.6 186,12.3 192,11.9 198,11.6 204,11.2 210,10.8' fill='none' stroke='%23f2dfab' stroke-width='1.2' stroke-opacity='.85' stroke-linecap='round'/%3E%3C/svg%3E") center top / 216px 64px no-repeat;
pointer-events: none;
}
/* 底边的青海波：朱红细线，往上渐隐 */
.about-omikuji::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
border-radius: 0 0 4px 4px;
background: var(--ab-grain-paper), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cdefs%3E%3Cg id='s' stroke='%23c63c2c' stroke-width='.9'%3E%3Ccircle r='9.6' fill='%23fffaf0'/%3E%3Ccircle r='6.6' fill='none'/%3E%3Ccircle r='3.6' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' x='-10' y='-5'/%3E%3Cuse href='%23s' x='10' y='-5'/%3E%3Cuse href='%23s' x='30' y='-5'/%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='20' y='0'/%3E%3Cuse href='%23s' x='-10' y='5'/%3E%3Cuse href='%23s' x='10' y='5'/%3E%3Cuse href='%23s' x='30' y='5'/%3E%3Cuse href='%23s' x='0' y='10'/%3E%3Cuse href='%23s' x='20' y='10'/%3E%3Cuse href='%23s' x='-10' y='15'/%3E%3Cuse href='%23s' x='10' y='15'/%3E%3Cuse href='%23s' x='30' y='15'/%3E%3C/svg%3E") 0 100% / 20px 10px repeat;
opacity: 0.55;
-webkit-mask-image: linear-gradient(transparent, #000 75%);
mask-image: linear-gradient(transparent, #000 75%);
pointer-events: none;
}
.about-omikuji-box {
position: relative;
width: 132px;
height: 222px;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: var(--ab-cursor-hand);
transform-origin: 50% 92%;
transition: rotate 0.3s ease;
-webkit-appearance: none;
appearance: none;
/* 要按住 3 秒：长按别选中字、别弹系统菜单（iOS） */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.about-omikuji-box:hover { rotate: -3deg; }
.about-omikuji-box:focus-visible { outline: 2px dashed var(--ab-accent); outline-offset: 4px; }
.about-omikuji-svg {
position: absolute;
left: 6px;
top: 22px;
width: 120px;
height: 200px;
overflow: visible;
}
.about-omikuji-shadow { fill: rgba(60, 38, 18, 0.18); }
.about-omikuji-side-l { fill: #8c5a2e; }
.about-omikuji-side-f { fill: #b27440; }
.about-omikuji-side-r { fill: #9c6533; }
.about-omikuji-grain line { stroke: rgba(60, 34, 14, 0.2); stroke-width: 1; }
.about-omikuji-band { fill: #d4a24a; }
.about-omikuji-top { fill: #d29a5c; stroke: #8c5a2e; stroke-width: 1; stroke-linejoin: round; }
.about-omikuji-hole { fill: #3a2414; }
.about-omikuji-label { fill: #c63c2c; }
.about-omikuji-label-line { fill: none; stroke: rgba(255, 236, 200, 0.7); stroke-width: 1; }
.about-omikuji-label-text {
fill: #fff3dc;
font-family: var(--ab-hand);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
writing-mode: vertical-rl;
}
/* 签：这一格的底边对准顶面的签孔，签只露出孔以上的那一截；平时整支藏在格子下面，抽到时往上冒出来（is-out） */
.about-omikuji-stick-clip {
position: absolute;
z-index: 2;
left: 66px;
top: -34px;
width: 18px;
height: 92px;
overflow: hidden;
translate: -50% 0;
pointer-events: none;
}
.about-omikuji-stick {
position: absolute;
left: 3px;
bottom: 0;
width: 12px;
height: 88px;
padding-top: 7px;
border-radius: 6px 6px 1px 1px;
background: linear-gradient(90deg, #d6b97e, #f0ddb0 45%, #d1b077);
box-shadow: inset 0 0 0 1px rgba(120, 84, 40, 0.35);
font-family: var(--ab-hand);
font-size: 10px;
font-weight: 700;
line-height: 12px;
letter-spacing: 1px;
color: #b0322a;
writing-mode: vertical-rl;
translate: 0 105%;
transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-omikuji-stick.is-out { translate: 0 16%; }
.about-omikuji-name {
margin: 6px 0 0;
font-family: var(--ab-hand);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
color: #c63c2c;
}
.about-omikuji-name span {
display: block;
font-family: var(--ab-mono);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.22em;
color: var(--ab-accent-text);
}
.about-omikuji-left {
margin: 4px 0 0;
font-family: var(--ab-hand);
font-size: 0.9rem;
color: var(--ab-text-dim);
}
/* 签纸：米白和纸 + 朱红双线框；顶上一条朱红横带（御 神 籤 + 签号），下面吉凶竖写、签文、宜 / 忌；左上角系着一截红绳 */
.about-omikuji-slip {
position: absolute;
z-index: 8;
top: 48px;
left: calc(50% + 44px);
width: 290px;
padding-bottom: 16px;
text-align: left;
background: var(--ab-grain-paper), #fffaf0;
border: 1px solid rgba(198, 60, 44, 0.45);
border-radius: 2px;
box-shadow: 0 2px 0 rgba(110, 80, 50, 0.1), 0 20px 36px -16px rgba(90, 58, 26, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-12px) rotate(-4deg) scale(0.94);
transform-origin: 0 0;
transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
}
/* 弹出：鼠标在签箱这一栏上（签纸也算这一栏，移到签纸上读也不会收起）、键盘聚焦签箱、手机上点了签箱 */
.about-omikuji:hover .about-omikuji-slip,
.about-omikuji:has(.about-omikuji-box:focus-visible) .about-omikuji-slip,
.about-omikuji.is-open .about-omikuji-slip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: rotate(-1.4deg);
transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* 摇签的时候先收起，换好这一签再弹 */
.about-omikuji.is-busy .about-omikuji-slip {
opacity: 0;
visibility: hidden;
transform: translateX(-12px) rotate(-4deg) scale(0.94);
}
.about-omikuji-slip::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(198, 60, 44, 0.22);
pointer-events: none;
}
/* 红绳结：签纸左上角一个小绳圈 + 两截绳头 */
.about-omikuji-slip::after {
content: '';
position: absolute;
z-index: 1;
top: 8px;
left: -15px;
width: 24px;
height: 12px;
border: 2px solid #c63c2c;
border-right-color: transparent;
border-radius: 50%;
rotate: -18deg;
}
.about-omikuji-slip-band {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 5px 5px 0;
padding: 6px 12px;
background: #c63c2c;
font-family: var(--ab-hand);
color: #fff3dc;
}
.about-omikuji-slip-title { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.3em; }
.about-omikuji-slip-no { font-size: 0.86rem; letter-spacing: 0.12em; }
.about-omikuji-slip-body {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4px 16px;
padding: 14px 18px 0 16px;
}
.about-omikuji-lv {
margin: 0;
font-family: var(--ab-hand);
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.12em;
color: #c63c2c;
writing-mode: vertical-rl;
}
.about-omikuji-text {
margin: 0 0 12px;
font-family: var(--ab-hand);
font-size: 1.05rem;
line-height: 1.65;
color: var(--ab-ink);
}
.about-omikuji-yiji {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 6px 10px;
margin: 0;
font-family: var(--ab-hand);
font-size: 0.98rem;
color: #4a4038;
}
.about-omikuji-yiji dt {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 3px;
background: #c63c2c;
font-size: 0.8rem;
font-weight: 700;
color: #fff6e6;
}
.about-omikuji-yiji dt.is-ji { background: #5a4d42; }
.about-omikuji-yiji dd { margin: 0; }
/* 还没抽：签纸上只有一行提示 */
.about-omikuji-slip.is-empty .about-omikuji-lv,
.about-omikuji-slip.is-empty .about-omikuji-yiji,
.about-omikuji-slip.is-empty .about-omikuji-slip-no { display: none; }
.about-omikuji-slip.is-empty .about-omikuji-slip-body { grid-template-columns: minmax(0, 1fr); }
.about-omikuji-slip.is-empty .about-omikuji-text { margin: 0; color: var(--ab-ink-dim); }
/* --- Block 3 顶部：左边标题 + 写作账本，右边草稿箱便利贴 --- */
.about-writing-top {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
gap: 28px 56px;
align-items: stretch; /* 两栏等高：左边的写作账本拉到和右边草稿便签一样低 */
margin-bottom: 40px;
}
.about-writing-main {
display: flex;
flex-direction: column;
}
.about-writing-main .about-head { margin-bottom: 26px; }
/* 写作账本：一张小票，下沿锯齿撕口。外层负责投影和歪角，内层负责锯齿遮罩（遮罩会把投影一起裁掉） */
.about-ledger {
flex: 1;
display: flex;
max-width: 700px;
filter: drop-shadow(0 1px 1px rgba(90, 58, 26, 0.14)) drop-shadow(0 12px 12px rgba(90, 58, 26, 0.14));
transform: rotate(-0.5deg);
}
.about-ledger-paper {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 28px 30px;
border-radius: 3px 3px 0 0;
background: var(--ab-grain-paper), var(--ab-paper);
-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
.about-ledger-head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--ab-line);
font-family: var(--ab-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
color: var(--ab-text-dim);
}
/* 纸被拉高时，内容在剩下的高度里上下居中 */
.about-ledger-body {
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: flex-end;
justify-content: space-between;
gap: 16px 30px;
}
.about-ledger-stats {
display: flex;
flex-wrap: wrap;
gap: 10px 34px;
}
.about-ledger-stat {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.about-ledger-fig {
display: flex;
align-items: baseline;
gap: 3px;
}
.about-ledger-num {
font-family: var(--ab-hand);
font-size: 2.2rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ab-accent-deep);
}
.about-ledger-unit { font-size: 0.86rem; color: var(--ab-accent-text); }
.about-ledger-label { font-size: 0.8rem; color: var(--ab-text-dim); }
/* 每年篇数：小柱子，上面标篇数、下面标年份 */
.about-ledger-years {
display: flex;
align-items: flex-end;
gap: 10px;
height: 84px;
padding-left: 26px;
border-left: 1px dashed var(--ab-line);
}
.about-ledger-bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 3px;
height: 100%;
font-family: var(--ab-mono);
font-size: 0.66rem;
line-height: 1;
color: var(--ab-text-dim);
}
.about-ledger-bar em { font-style: normal; color: var(--ab-accent-text); }
.about-ledger-bar i {
display: block;
width: 16px;
height: calc(var(--h) * 46px + 2px);
border-radius: 3px 3px 1px 1px;
background: repeating-linear-gradient(-45deg, var(--ab-accent) 0 3px, #f6b877 3px 6px);
transition: height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--k, 0) * 0.08s);
}
/* 草稿箱便利贴：薄荷绿（流萤的颜色）方形便签，微歪，顶上一截纸胶带，右下角折起一个小角。
纸面画在 ::before 上并切掉右下角，::after 是折过来的那个三角；投影用 filter 包住整张形状 */
.about-draft {
position: relative;
margin-top: 6px;
padding: 24px 20px 20px;
font-family: var(--ab-hand);
color: #2f4a3c;
filter: drop-shadow(0 1px 1px rgba(40, 70, 50, 0.16)) drop-shadow(0 12px 10px rgba(40, 70, 50, 0.18));
transform: rotate(2.4deg);
}
.about-draft::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--ab-grain-paper), linear-gradient(170deg, #e9f7e5 0%, #d5eed5 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.about-draft::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 22px;
height: 22px;
background: linear-gradient(135deg, #b9dcba 0%, #a5d0a8 50%, #cde8cc 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.about-draft-kicker {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 0.86rem;
color: #4d6e5b;
}
.about-draft-kicker .ab-icon { font-size: 15px; }
.about-draft-title {
margin: 8px 0 12px;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.45;
color: #1f3a2c;
}
.about-draft-progress {
display: flex;
align-items: center;
gap: 10px;
}
.about-draft-track {
flex: 1;
height: 9px;
overflow: hidden;
border: 1.5px solid rgba(47, 74, 60, 0.55);
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
}
.about-draft-fill {
display: block;
width: var(--p);
height: 100%;
background: repeating-linear-gradient(-45deg, #5fb88a 0 4px, #83cfa6 4px 8px);
}
.about-draft-pct {
font-family: var(--ab-mono);
font-size: 0.72rem;
color: #4d6e5b;
}
.about-draft-sub {
margin: 14px 0 4px;
font-size: 0.78rem;
letter-spacing: 0.1em;
color: #6c8a78;
}
.about-draft-queue {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.92rem;
line-height: 1.75;
}
.about-draft-queue li {
display: flex;
align-items: center;
gap: 7px;
}
/* 复选框；做完的打勾 + 删除线 */
.about-draft-queue li::before {
content: '';
flex: none;
display: grid;
place-items: center;
width: 11px;
height: 11px;
border: 1.5px solid rgba(47, 74, 60, 0.6);
border-radius: 3px;
font-size: 10px;
line-height: 1;
color: #3e8a62;
}
.about-draft-queue li.is-done {
color: rgba(47, 74, 60, 0.5);
text-decoration: line-through;
text-decoration-color: rgba(47, 74, 60, 0.45);
}
.about-draft-queue li.is-done::before { content: '✓'; }
/* 今日特调 + 刚出炉（第三部分，写作账本下面、精选文章上面）：和上下几块一样是摆在桌上的东西，并排两样——
左边一张木夹子夹着的菜单卡（小黑板斜靠在它左边、伸出卡外一截），右边一张贴着胶带的出餐小票（刚出炉） */
.about-special-row {
display: flex;
align-items: center;
gap: 44px;
margin: 0 0 44px; /* 在精选文章上面：和下面那几张卡隔开 */
}
/* 菜单卡：米色厚卡纸、直角、微微歪着，投影和下面的文章卡一样 */
.about-special {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 30px;
margin-left: 30px; /* 小黑板往左伸出卡外 30px，外沿和上面的账本对齐 */
padding: 30px 30px 24px 0;
background: var(--ab-grain-paper), #fbf4e6;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(110, 80, 50, 0.12), 0 16px 30px -14px rgba(90, 58, 26, 0.45);
transform: rotate(-0.6deg);
}
/* 木夹子（晾衣夹）：夹在卡片上沿，一半露在卡外 */
.about-special-peg {
position: absolute;
z-index: 3;
top: -26px;
left: 58%;
width: 18px;
height: 50px;
rotate: 6deg;
filter: drop-shadow(0 2px 2px rgba(60, 38, 18, 0.35));
}
.about-special-peg .peg-wood { fill: #dcb77d; stroke: #9a7342; stroke-width: 1; }
.about-special-peg .peg-wood.is-r { fill: #c99f63; }
.about-special-peg .peg-spring { fill: none; stroke: #7d838c; stroke-width: 2; stroke-linecap: round; }
/* 小黑板：木框 + 墨绿板面 + 粉笔字 / 粉笔画的咖啡杯（热气往上飘），框下沿搁着一截粉笔；斜靠在菜单卡左边，伸出卡外一截 */
.about-special-board {
position: relative;
z-index: 2;
flex: none;
margin-left: -30px;
display: flex;
flex-direction: column;
align-items: center;
width: 148px;
padding: 11px 10px 9px;
border: 6px solid #8b5e3c;
border-radius: 8px;
color: rgba(246, 242, 230, 0.92);
background:
radial-gradient(120% 80% at 25% 15%, rgba(255, 255, 255, 0.09), transparent 60%),
radial-gradient(80% 60% at 80% 90%, rgba(255, 255, 255, 0.05), transparent 70%),
#2d3630;
box-shadow:
inset 0 0 16px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(70, 42, 20, 0.45),
0 12px 20px -10px rgba(60, 38, 18, 0.55);
transform: rotate(-4deg);
}
.about-special-board-en {
font-family: var(--ab-mono);
font-size: 0.6rem;
letter-spacing: 0.34em;
opacity: 0.7;
}
.about-special-board-zh {
font-family: var(--ab-hand);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.12em;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.14);
}
.about-special-cup {
width: 66px;
height: auto;
margin-top: 4px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.about-special-cup .cup-steam { animation: ab-steam 2.8s ease-in-out infinite; }
.about-special-cup .cup-steam:nth-child(2) { animation-delay: -0.9s; }
.about-special-cup .cup-steam:nth-child(3) { animation-delay: -1.9s; }
.about-special-board-chalk {
position: absolute;
right: 16px;
bottom: -10px;
width: 22px;
height: 5px;
border-radius: 2px;
background: #f4f1e8;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
/* 换一杯：黑板晃一下（rotate 独立属性，与 transform 里的歪角叠加） */
.about-special-board.is-wobble { animation: ab-board-wobble 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes ab-board-wobble {
0% { rotate: 0deg; }
30% { rotate: -3deg; }
60% { rotate: 2deg; }
100% { rotate: 0deg; }
}
/* 菜单：标题 / 摘要各一行（省略号），换哪篇高度都不变 */
.about-special-menu {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
transition: opacity 0.22s ease, translate 0.22s ease;
}
.about-special-menu.is-out { opacity: 0; translate: 0 -6px; }
.about-special-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-family: var(--ab-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--ab-accent-text);
}
.about-special-no { letter-spacing: 0.1em; color: var(--ab-text-dim); }
/* 饮品名 ······ 分类（菜单上的点线） */
.about-special-line {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 10px;
}
.about-special-drink {
font-family: var(--ab-hand);
font-size: 1.02rem;
font-weight: 700;
white-space: nowrap;
color: var(--ab-accent-deep);
}
.about-special-dots {
flex: 1;
min-width: 24px;
border-bottom: 2px dotted rgba(110, 80, 50, 0.35);
translate: 0 -4px;
}
.about-special-cat {
font-size: 0.8rem;
white-space: nowrap;
color: var(--ab-text-dim);
}
.about-special-title {
display: block;
margin-top: 4px;
overflow: hidden;
font-family: var(--ab-hand);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
color: var(--ab-text);
transition: color 0.2s ease;
}
.about-special-title:hover { color: var(--ab-accent-deep); }
.about-special-desc {
margin: 0;
overflow: hidden;
font-size: 0.88rem;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ab-text-dim);
}
.about-special-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
margin-top: 12px;
}
.about-special-meta {
font-family: var(--ab-mono);
font-size: 0.72rem;
color: var(--ab-text-dim);
}
/* 换一杯：手写字 + 虚线下划线（和文章卡的「读一读 →」一路）；趁热读：一枚做旧的朱红小印章 */
.about-special-actions {
display: flex;
flex: none;
align-items: center;
gap: 18px;
}
.about-special-reroll,
.about-special-go {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
font-family: var(--ab-hand);
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: var(--ab-cursor-hand);
-webkit-appearance: none;
appearance: none;
}
.about-special-reroll {
padding: 0 1px 2px;
border: 0;
border-bottom: 1.5px dashed rgba(184, 104, 20, 0.6);
background: none;
color: var(--ab-accent-deep);
transition: color 0.2s ease, opacity 0.2s ease;
}
.about-special-reroll:hover { color: var(--ab-accent-text); }
.about-special-reroll:disabled { opacity: 0.45; cursor: var(--ab-cursor); }
.about-special-reroll span { display: inline-block; transition: rotate 0.5s ease; }
.about-special-reroll:not(:disabled):hover span { rotate: 180deg; }
.about-special-go {
padding: 3px 10px 2px;
border: 2px solid currentColor;
border-radius: 4px;
color: rgba(186, 50, 38, 0.9);
letter-spacing: 0.08em;
rotate: -5deg;
-webkit-mask-image: var(--ab-stamp-mask);
mask-image: var(--ab-stamp-mask);
-webkit-mask-size: 120px;
mask-size: 120px;
transition: rotate 0.2s ease, scale 0.2s ease;
}
.about-special-go:hover { rotate: -1deg; scale: 1.06; }
/* 刚出炉（最新发布）：一张出餐小票——窄长、顶上贴一截胶带、下沿锯齿撕口（和上面的写作账本一个路数），往右歪一点。
外层负责投影和歪角，内层负责锯齿遮罩。最新的一篇写大一点，更早的两篇各一行；数据见 about.js initFresh，拿不到时整张藏起来 */
.about-fresh {
position: relative;
flex: 0 0 300px;
min-width: 0;
filter: drop-shadow(0 1px 1px rgba(90, 58, 26, 0.14)) drop-shadow(0 12px 12px rgba(90, 58, 26, 0.16));
transform: rotate(1.6deg);
}
.about-fresh[hidden] { display: none; }
.about-fresh-paper {
display: flex;
flex-direction: column;
padding: 20px 22px 28px;
border-radius: 3px 3px 0 0;
background: var(--ab-grain-paper), var(--ab-paper);
-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
.about-fresh-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-family: var(--ab-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--ab-accent-text);
}
/* 红墨水小圆戳 NEW（双圈） */
.about-fresh-stamp {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
border: 1.5px solid currentColor;
border-radius: 50%;
outline: 1px solid currentColor;
outline-offset: -4.5px;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(186, 58, 42, 0.78);
rotate: -14deg;
}
.about-fresh-title {
display: block;
margin-top: 6px;
overflow: hidden;
font-family: var(--ab-hand);
font-size: 1.22rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
color: var(--ab-text);
transition: color 0.2s ease;
}
.about-fresh-title:hover,
.about-fresh-title:focus-visible { color: var(--ab-accent-deep); outline: none; }
.about-fresh-meta {
overflow: hidden;
font-family: var(--ab-mono);
font-size: 0.68rem;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ab-text-dim);
}
.about-fresh-list {
margin-top: 10px;
border-top: 1px dashed rgba(110, 80, 50, 0.3);
}
.about-fresh-item {
display: flex;
align-items: baseline;
gap: 10px;
padding: 6px 0;
text-decoration: none;
color: var(--ab-text);
border-bottom: 1px dashed rgba(110, 80, 50, 0.22);
}
.about-fresh-item:last-child { border-bottom: 0; }
.about-fresh-item[hidden] { display: none; }
.about-fresh-item-title {
flex: 1;
min-width: 0;
overflow: hidden;
font-family: var(--ab-hand);
font-size: 0.98rem;
white-space: nowrap;
text-overflow: ellipsis;
transition: color 0.2s ease;
}
.about-fresh-item:hover .about-fresh-item-title,
.about-fresh-item:focus-visible .about-fresh-item-title { color: var(--ab-accent-deep); }
.about-fresh-item:focus-visible { outline: none; }
.about-fresh-item-date {
flex: none;
font-family: var(--ab-mono);
font-size: 0.64rem;
color: var(--ab-text-dim);
}
/* 小票最底下一行 */
.about-fresh-foot {
margin: 12px 0 0;
padding-top: 8px;
border-top: 1px dashed rgba(110, 80, 50, 0.3);
font-family: var(--ab-mono);
font-size: 0.66rem;
letter-spacing: 0.24em;
text-align: center;
color: var(--ab-text-dim);
}
.about-posts-more {
display: table;
margin: 34px 0 0 auto;
padding-bottom: 2px;
font-family: var(--ab-hand);
font-size: 1rem;
text-decoration: none;
color: var(--ab-text-dim);
border-bottom: 1px dashed rgba(184, 104, 20, 0.5);
transition: color 0.2s ease;
}
.about-posts-more:hover { color: var(--ab-accent-deep); }
/* --- Block 4：另一面（贴图 + 票根墙） --- */
.about-fandom {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 40px;
align-items: start;
}
/* 右栏：一张牛皮纸收藏页——票根贴在上面，字直接写在纸上（原来字压在咖啡厅背景上看不清）；
顶上一截纸胶带、四周一圈缝线，微微歪着贴 */
.about-fandom-side {
position: relative;
padding: 30px 26px 28px;
color: #3d2d1f;
background:
var(--ab-grain-paper),
radial-gradient(120% 80% at 18% 8%, rgba(255, 242, 214, 0.4), transparent 60%),
linear-gradient(172deg, #ddc59d 0%, #d2b687 100%);
border-radius: 4px;
box-shadow: 0 2px 5px rgba(90, 58, 26, 0.15), 0 18px 34px -18px rgba(90, 58, 26, 0.55);
transform: rotate(0.6deg);
}
.about-fandom-side::after {
content: '';
position: absolute;
inset: 8px;
border: 1px dashed rgba(96, 66, 36, 0.35);
border-radius: 2px;
pointer-events: none;
}
.about-fandom-side .about-bio { color: #54402c; }
.about-fandom-side .about-bio:last-of-type { margin-bottom: 18px; }
.about-fandom-kicker {
margin: 4px 0 14px;
font-family: var(--ab-hand);
font-size: 1.1rem;
font-weight: 700;
color: #3d2d1f;
}
/* 冲印相片：米白相纸，四周留白边（下沿留宽，台词和标题写在上面），图完整露出不压暗；整张微微歪着贴 */
.about-fandom-feature {
position: relative;
padding: 12px 12px 0;
color: var(--ab-ink);
background: var(--ab-grain-paper), var(--ab-paper);
border-radius: 6px;
box-shadow: 0 26px 50px -24px rgba(60, 38, 18, 0.6), 0 2px 6px rgba(60, 38, 18, 0.1);
transform: rotate(-0.7deg);
}
.about-fandom-photo {
position: relative;
aspect-ratio: 1600 / 1114;
overflow: hidden;
border-radius: 3px;
background: #1d1a22;
}
/* 相片压在相纸上的那一圈细边 */
.about-fandom-photo::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(43, 37, 33, 0.16), inset 0 1px 5px rgba(43, 37, 33, 0.2);
pointer-events: none;
}
.about-fandom-bg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.about-fandom-body {
padding: 18px 12px 20px;
}
.about-fandom-quote {
margin: 0 0 14px;
font-family: var(--ab-hand);
font-size: 1.04rem;
line-height: 1.75;
color: var(--ab-ink-dim);
}
/* 最后一句：金色荧光笔 */
.about-fandom-gold {
color: var(--ab-ink);
background: linear-gradient(transparent 58%, rgba(236, 184, 72, 0.5) 58%, rgba(236, 184, 72, 0.5) 92%, transparent 92%);
padding: 0 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.about-fandom-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 18px;
}
.about-fandom-title {
margin: 0;
font-family: var(--ab-hand);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.3;
}
/* CP：一截截撕下来的纸胶带（两端锯齿 + 斜纹），颜色轮换、各歪一点 */
.about-fandom-ships {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
}
.about-fandom-ships li {
--tp: 104, 196, 168;
padding: 3px 15px 4px;
font-family: var(--ab-hand);
font-size: 0.95rem;
font-weight: 700;
color: var(--ab-ink);
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.34) 0 5px, transparent 5px 10px),
rgba(var(--tp), 0.5);
clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 20%, 100% 40%, calc(100% - 4px) 60%, 100% 80%, calc(100% - 3px) 100%,
3px 100%, 0 80%, 4px 60%, 0 40%, 4px 20%);
transform: rotate(-2deg);
}
.about-fandom-ships li:nth-child(3n + 2) { --tp: 240, 161, 78; transform: rotate(1.6deg) translateY(1px); }
.about-fandom-ships li:nth-child(3n) { --tp: 126, 164, 222; transform: rotate(-0.8deg); }
/* 票根：外层负责摆放角度与投影（mask 会裁掉自身投影），内层是纸面 */
.about-tickets {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 22px;
}
.about-ticket-wrap {
transform: translateX(var(--x, 0)) rotate(var(--r, 0deg));
filter: drop-shadow(0 8px 12px rgba(90, 58, 26, 0.3));
}
.about-ticket {
--stub: 80px;
position: relative;
display: flex;
min-height: 86px;
color: var(--ab-ink);
background: var(--ab-grain-paper), var(--ab-paper);
border-radius: 8px;
/* 撕口两端的半圆缺口 */
-webkit-mask:
radial-gradient(circle 7px at calc(var(--stub) - 1px) 0, transparent 97%, #000) top / 100% 51% no-repeat,
radial-gradient(circle 7px at calc(var(--stub) - 1px) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
mask:
radial-gradient(circle 7px at calc(var(--stub) - 1px) 0, transparent 97%, #000) top / 100% 51% no-repeat,
radial-gradient(circle 7px at calc(var(--stub) - 1px) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
.about-ticket-stub {
flex: none;
width: var(--stub);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
border-right: 2px dashed rgba(43, 37, 33, 0.3);
line-height: 1.2;
}
.about-ticket-year {
font-family: var(--ab-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
color: var(--ab-ink-dim);
}
.about-ticket-date {
font-family: var(--ab-hand);
font-size: 1.4rem;
font-weight: 700;
}
.about-ticket-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 10px 12px 10px 16px;
line-height: 1.35;
}
.about-ticket-type {
font-family: var(--ab-mono);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ab-accent-deep);
}
.about-ticket-name {
overflow: hidden;
font-family: var(--ab-hand);
font-size: 1.05rem;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.about-ticket-meta {
font-size: 0.74rem;
color: var(--ab-ink-dim);
}
.about-ticket-code {
flex: none;
width: 20px;
margin: 12px 14px 12px 0;
background:
repeating-linear-gradient(0deg, var(--ab-ink) 0 1px, transparent 1px 3px),
repeating-linear-gradient(0deg, var(--ab-ink) 0 2px, transparent 2px 7px);
opacity: 0.55;
}
.about-ticket-no {
position: absolute;
top: 7px;
right: 44px;
font-family: var(--ab-mono);
font-size: 0.6rem;
color: var(--ab-ink-dim);
}
/* 按钮：琥珀胶囊 + 错位描边影（手帐贴纸感） */
.about-cta {
align-self: flex-start;
margin-top: 10px;
padding: 10px 28px;
font-family: var(--ab-hand);
font-size: 1.02rem;
font-weight: 700;
text-decoration: none;
color: var(--ab-accent-ink);
background: var(--ab-accent);
border-radius: 999px;
box-shadow: 4px 4px 0 -1px var(--ab-bg), 4px 4px 0 0 var(--ab-accent-deep);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.about-cta:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 -1px var(--ab-bg), 6px 6px 0 0 var(--ab-accent-deep);
}
.about-cta:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 -1px var(--ab-bg), 1px 1px 0 0 var(--ab-accent-deep);
}
/* --- Block 4：头脑风暴（第四部分最前面；左边一朵想法云，右边一本顶端线圈的方格便签本；翻页见 about.js initMuse）--- */
/* 头脑风暴 + 抽签盒：左边签箱卡（200px，原来大云朵那一栏）；右边一栏上面是便签本，紧跟着下面是集点卡 + 打盹的店猫，
整栏在签箱卡旁边上下居中（上下空出来的一样多） */
.about-desk {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 30px;
margin-bottom: 64px;
}
.about-desk-side {
align-self: center;
display: flex;
flex-direction: column;
gap: 44px;
min-width: 0;
}
.about-muse { min-width: 0; }
.about-desk-extra {
position: relative;
display: flex;
align-items: flex-end;
gap: 16px;
}
/* 咖啡集点卡：一张牛皮纸卡，左边 10 个杯子格（每天盖一个章），右边一截兑换联（虚线撕口隔开）。
投影用 filter 包住整张（兑换联剪了孔以后，孔边也有影子）。见 about.js initPoints */
.about-points {
position: relative;
flex: 1;
min-width: 0;
display: flex;
color: #5a3c2a;
filter: drop-shadow(0 1px 1px rgba(90, 58, 26, 0.18)) drop-shadow(0 10px 12px rgba(90, 58, 26, 0.2));
transform: rotate(-0.5deg);
}
.about-points-main {
flex: 1;
min-width: 0;
padding: 10px 16px 10px 18px;
border-radius: 6px 0 0 6px;
background: var(--ab-grain-paper), #ead8b6;
}
.about-points-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
font-family: var(--ab-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
color: #8a5a2c;
}
.about-points-slots {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 6px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.about-points-slots li { display: grid; place-items: center; }
/* 一格：虚线圆圈里一只淡淡的杯子；第 10 格写个「隐」；今天能盖的那格描实线、一明一暗地亮着 */
.about-points-slot {
position: relative;
width: 100%;
max-width: 36px;
aspect-ratio: 1;
margin: 0;
padding: 0;
border: 1.5px dashed rgba(110, 72, 36, 0.42);
border-radius: 50%;
background: rgba(255, 250, 240, 0.35);
color: rgba(110, 72, 36, 0.28);
cursor: var(--ab-cursor);
-webkit-appearance: none;
appearance: none;
}
.about-points-slot::before {
content: '';
position: absolute;
inset: 24%;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h14v4.5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 10h1.5a3 3 0 0 1 0 6H17'/%3E%3Cpath d='M8 2.5c-1 1.2 1 2.2 0 3.4M12 2.5c-1 1.2 1 2.2 0 3.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h14v4.5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 10h1.5a3 3 0 0 1 0 6H17'/%3E%3Cpath d='M8 2.5c-1 1.2 1 2.2 0 3.4M12 2.5c-1 1.2 1 2.2 0 3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about-points-slot.is-last { border-color: rgba(176, 134, 52, 0.7); color: rgba(150, 110, 40, 0.55); }
.about-points-slot.is-last::before {
content: '隐';
inset: 0;
display: grid;
place-items: center;
background: none;
-webkit-mask: none;
mask: none;
font-family: var(--ab-hand);
font-size: 0.95rem;
font-weight: 700;
}
.about-points-slot.is-stamped::before { visibility: hidden; }
.about-points-slot.is-today {
border-style: solid;
border-color: var(--ab-accent-deep);
color: var(--ab-accent-deep);
cursor: var(--ab-cursor-hand);
animation: ab-points-glow 1.8s ease-in-out infinite;
}
.about-points-slot:focus-visible { outline: 2px dashed var(--ab-accent); outline-offset: 3px; }
@keyframes ab-points-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(240, 161, 78, 0); }
50% { box-shadow: 0 0 0 5px rgba(240, 161, 78, 0.38); }
}
/* 盖上的章：朱红双圈、做旧，中间一只实心杯子 + 盖章那天的日期；每枚歪的角度不一样（--rot） */
.about-points-mark {
position: absolute;
inset: -3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
border: 2px solid currentColor;
border-radius: 50%;
outline: 1px solid currentColor;
outline-offset: -5px;
color: rgba(186, 50, 38, 0.86);
rotate: var(--rot, 0deg);
-webkit-mask-image: var(--ab-stamp-mask);
mask-image: var(--ab-stamp-mask);
-webkit-mask-size: 90px;
mask-size: 90px;
pointer-events: none;
}
.about-points-mark i {
width: 40%;
aspect-ratio: 24 / 22;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 8h14v4.5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 10h1.5a3 3 0 0 1 0 6H17' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.5c-1 1.2 1 2.2 0 3.4M12 2.5c-1 1.2 1 2.2 0 3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 8h14v4.5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 10h1.5a3 3 0 0 1 0 6H17' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.5c-1 1.2 1 2.2 0 3.4M12 2.5c-1 1.2 1 2.2 0 3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about-points-mark b { font: 700 7.5px/1 var(--ab-mono); letter-spacing: 0; }
.about-points-mark.is-new { animation: ab-points-ink 0.36s ease-out; }
@keyframes ab-points-ink {
0% { opacity: 0; scale: 1.5; }
60% { opacity: 1; scale: 0.94; }
100% { scale: 1; }
}
/* 盖章时落下来的那枚木头印章：圆头木柄 + 方木座 + 一层朱红印泥（只在动画时出现，about.js 临时加进那一格） */
.about-points-stamper {
position: absolute;
z-index: 5;
left: 50%;
bottom: 6px;
width: 34px;
height: 46px;
margin-left: -17px;
background:
radial-gradient(circle at 50% 8px, #c58b52 0 7px, transparent 7.5px),
linear-gradient(#a8703c, #a8703c) 50% 12px / 8px 16px no-repeat,
linear-gradient(#8b5a2e, #6e4522) 50% 28px / 34px 11px no-repeat,
linear-gradient(#b8392b, #b8392b) 50% 39px / 30px 4px no-repeat;
filter: drop-shadow(0 3px 3px rgba(60, 38, 18, 0.35));
pointer-events: none;
}
.about-points-foot { font-family: var(--ab-hand); font-size: 0.86rem; letter-spacing: 0.02em; color: #7a5a40; }
/* 兑换联：虚线撕口隔开，斜纹牛皮纸；集满兑换后（is-won）变成淡金色、可以点 / 悬停看签。
剪票之后（is-punched）顶上剪出一个星形孔（遮罩挖空，透得见后面） */
.about-points-stub {
position: relative;
flex: 0 0 112px;
display: flex;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: center;
cursor: var(--ab-cursor);
-webkit-appearance: none;
appearance: none;
}
.about-points-stub-paper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 22px 6px 7px;
line-height: 1.2;
border-left: 2px dashed rgba(110, 72, 36, 0.45);
border-radius: 0 6px 6px 0;
background: var(--ab-grain-paper), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 6px, transparent 6px 12px), #e2cba3;
}
.about-points-stub-paper.is-punched {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8.0,1.0 9.8,6.1 15.2,6.3 10.9,9.6 12.5,14.7 8.0,11.7 3.5,14.7 5.1,9.6 0.8,6.3 6.2,6.1'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
-webkit-mask-position: 50% 4px, 0 0;
-webkit-mask-size: 16px 16px, 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8.0,1.0 9.8,6.1 15.2,6.3 10.9,9.6 12.5,14.7 8.0,11.7 3.5,14.7 5.1,9.6 0.8,6.3 6.2,6.1'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
mask-position: 50% 4px, 0 0;
mask-size: 16px 16px, 100% 100%;
mask-repeat: no-repeat;
mask-composite: exclude;
}
.about-points-stub-en { font-family: var(--ab-mono); font-size: 0.56rem; letter-spacing: 0.18em; color: #8a5a2c; }
.about-points-stub-title { font-family: var(--ab-hand); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; color: #5a3c2a; }
.about-points-stub-note { font-family: var(--ab-hand); font-size: 0.74rem; color: #7a5a40; text-wrap: balance; }
.about-points.is-won .about-points-stub { cursor: var(--ab-cursor-hand); }
.about-points.is-won .about-points-stub-paper { background: var(--ab-grain-paper), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.24) 0 6px, transparent 6px 12px), #efd598; }
.about-points.is-won .about-points-stub-title { color: #8a5a10; }
.about-points-stub:focus-visible { outline: 2px dashed var(--ab-accent); outline-offset: 3px; }
/* 剪票钳（只在剪票动画时出现）：钳口朝下咬在兑换联顶上，两条钳臂绕中间的轴各转一下 = 捏一下 */
.about-points-punch {
position: absolute;
z-index: 6;
left: 50%;
bottom: calc(100% - 20px);
width: 44px;
height: 117px;
margin-left: -22px;
pointer-events: none;
filter: drop-shadow(0 4px 4px rgba(40, 24, 12, 0.35));
}
.about-points-punch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-points-punch .punch-arm { transform-origin: 24px 90px; }
/* 剪下来的那粒星星纸屑 */
.about-points-chip {
position: absolute;
z-index: 6;
left: 50%;
top: 4px;
width: 16px;
height: 16px;
margin-left: -8px;
background: #e2cba3;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8.0,1.0 9.8,6.1 15.2,6.3 10.9,9.6 12.5,14.7 8.0,11.7 3.5,14.7 5.1,9.6 0.8,6.3 6.2,6.1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8.0,1.0 9.8,6.1 15.2,6.3 10.9,9.6 12.5,14.7 8.0,11.7 3.5,14.7 5.1,9.6 0.8,6.3 6.2,6.1'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}
/* 剪票那一下冒出来的「咔嚓！」 */
.about-points-sfx {
position: absolute;
z-index: 7;
right: -18px;
top: -24px;
font-family: var(--ab-hand);
font-size: 1.1rem;
font-weight: 700;
white-space: nowrap;
color: #b8392b;
text-shadow: 0 0 3px rgba(255, 251, 243, 0.95), 0 0 8px rgba(255, 251, 243, 0.8);
rotate: 10deg;
pointer-events: none;
}
/* 隐藏签：和抽签盒的签纸一个样子（.about-omikuji-slip），换成墨黑横带 + 金色；从兑换联上方弹出来。
鼠标移到兑换过的兑换联上 / 键盘聚焦它 / 点它（is-reveal）时弹出 */
.about-omikuji-slip.is-secret {
top: auto;
left: auto;
right: 136px;
bottom: calc(100% + 12px);
border-color: rgba(176, 134, 52, 0.6);
transform: translateY(10px) rotate(3deg) scale(0.94);
transform-origin: 100% 100%;
}
.about-desk-extra.is-reveal .about-omikuji-slip.is-secret,
.about-desk-extra:has(.about-points.is-won .about-points-stub:hover) .about-omikuji-slip.is-secret,
.about-desk-extra:has(.about-points-stub:focus-visible) .about-omikuji-slip.is-secret {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: rotate(1.2deg);
transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.about-omikuji-slip.is-secret::before { border-color: rgba(176, 134, 52, 0.3); }
.about-omikuji-slip.is-secret::after { border-color: #b0863a; border-right-color: transparent; }
.about-omikuji-slip.is-secret .about-omikuji-slip-band { background: #2b2a33; color: #f0d48a; }
.about-omikuji-slip.is-secret .about-omikuji-lv { color: #b0863a; }
.about-omikuji-slip.is-secret .about-omikuji-yiji dt { background: #b0863a; }
.about-omikuji-slip.is-secret .about-omikuji-yiji dt.is-ji { background: #5a4d42; }
/* 打盹的店猫：Minecraft 的猫——照 Minecraft Wiki 上 11 种毛色的猫材质拼的一只侧身趴着、脸朝外的小猫（外加一只店里原创的玛奇朵），每次打开页面随机来一只
（about.js initNapcat 画在 28 × 11 的小画布上，这里放大 4 倍、保持像素硬边）；下面垫一块黄羊毛坐垫。
睡着时一起一伏、头上飘 z；点一下醒过来（is-awake）说句话 */
.about-napcat {
position: relative;
flex: none;
width: 112px;
height: 56px;
margin: 0 0 4px;
padding: 0;
border: 0;
background: none;
cursor: var(--ab-cursor-hand);
-webkit-appearance: none;
appearance: none;
}
.about-napcat-cushion {
position: absolute;
left: 0;
bottom: 0;
width: 112px;
height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23f3cc5c' d='M1 0h2v1h-2zM5 0h2v1h-2zM9 0h2v1h-2zM14 0h3v1h-3zM18 0h4v1h-4zM23 0h1v1h-1z'/%3E%3Cpath fill='%23efc653' d='M3 0h2v1h-2zM7 0h2v1h-2zM11 0h3v1h-3zM17 0h1v1h-1zM22 0h1v1h-1zM24 0h3v1h-3z'/%3E%3Cpath fill='%236e4c12' d='M0 1h1v1h-1zM27 1h1v1h-1zM0 2h28v1h-28z'/%3E%3Cpath fill='%23dcaa30' d='M1 1h3v1h-3zM9 1h1v1h-1zM12 1h1v1h-1zM14 1h2v1h-2zM17 1h1v1h-1z'/%3E%3Cpath fill='%23e1b034' d='M4 1h1v1h-1zM8 1h1v1h-1zM10 1h1v1h-1zM18 1h1v1h-1zM22 1h1v1h-1zM25 1h1v1h-1z'/%3E%3Cpath fill='%23edbf45' d='M5 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM16 1h1v1h-1zM19 1h1v1h-1zM21 1h1v1h-1zM23 1h1v1h-1zM26 1h1v1h-1z'/%3E%3Cpath fill='%23e8b83a' d='M6 1h2v1h-2zM20 1h1v1h-1zM24 1h1v1h-1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
}
.about-napcat-body {
position: absolute;
left: 0;
top: 0;
width: 112px;
height: 44px;
image-rendering: pixelated;
transform-origin: 50% 100%;
animation: ab-napcat-breathe 3.2s ease-in-out infinite;
pointer-events: none;
}
.about-napcat.is-awake .about-napcat-body { animation: none; }
.about-napcat:focus-visible { outline: 2px dashed var(--ab-accent); outline-offset: 3px; }
@keyframes ab-napcat-breathe {
0%, 100% { scale: 1 1; }
50% { scale: 1.01 1.05; }
}
.about-napcat-z {
position: absolute;
left: 82%;
top: 14px;
pointer-events: none;
}
.about-napcat-z i {
position: absolute;
left: 0;
bottom: 0;
font: italic 700 12px/1 var(--ab-mono);
color: #554d47;
text-shadow: 0 0 3px rgba(255, 251, 243, 0.95);
opacity: 0;
animation: ab-napcat-z 3.6s linear infinite;
}
.about-napcat-z i:nth-child(2) { font-size: 14px; animation-delay: 1.2s; }
.about-napcat-z i:nth-child(3) { font-size: 17px; animation-delay: 2.4s; }
.about-napcat.is-awake .about-napcat-z { display: none; }
@keyframes ab-napcat-z {
0% { opacity: 0; translate: 0 0; }
15% { opacity: 0.85; }
100% { opacity: 0; translate: 16px -28px; }
}
/* 页顶的标题：一朵小云 + 头脑风暴 + 一行小字 */
.about-muse-label {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin: -14px 0 8px;
}
.about-muse-cloud {
flex: none;
width: 38px;
height: auto;
overflow: visible;
fill: rgba(255, 251, 243, 0.95);
stroke: var(--ab-text);
stroke-width: 8;
stroke-linejoin: round;
}
.about-muse-title {
flex: none;
margin: 0;
font-family: var(--ab-hand);
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
color: var(--ab-ink);
}
.about-muse-en {
min-width: 0;
overflow: hidden;
font-family: var(--ab-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ab-accent-text);
}
/* 便签本：底下垫着两页（错开一点，看得出是一沓），最上面一页是方格纸 */
.about-muse-pad {
--ring: 26px;
position: relative;
isolation: isolate;
padding-top: 14px;
perspective: 1600px;
perspective-origin: 50% 0;
}
.about-muse-pad::before,
.about-muse-pad::after {
content: '';
position: absolute;
z-index: 0;
top: 14px;
border-radius: 4px;
background: var(--ab-grain-paper), var(--ab-paper);
box-shadow: 0 1px 2px rgba(60, 38, 18, 0.16);
}
.about-muse-pad::before { left: 12px; right: 12px; bottom: -10px; box-shadow: 0 16px 30px -18px rgba(60, 38, 18, 0.55); }
.about-muse-pad::after { left: 6px; right: 6px; bottom: -5px; }
/* 顶端线圈：一个个金属圈穿过纸上的孔（孔和圈画在同一张小图里，横向平铺；space = 只放整圈、均匀排开） */
.about-muse-rings {
position: absolute;
z-index: 4;
top: 0;
left: 18px;
right: 18px;
height: 32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32'%3E%3Ccircle cx='13' cy='26' r='3.6' fill='%233a2f28' fill-opacity='.5'/%3E%3Cellipse cx='13' cy='15' rx='4' ry='11.5' fill='none' stroke='%235f5852' stroke-width='2.4'/%3E%3Cpath d='M10.3 8.5c-.8 4-.8 9.5 0 13' fill='none' stroke='%23d8d1c8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center 0 / var(--ring) 32px space no-repeat;
pointer-events: none;
}
.about-muse-sheet {
position: relative;
z-index: 2;
padding: 34px 32px 16px 76px;
color: var(--ab-ink);
border-radius: 4px;
/* 左边一条红色页边线（--mx）+ 22px 方格 + 纸纹 */
--mx: 57px;
background:
linear-gradient(90deg, transparent var(--mx), rgba(214, 104, 84, 0.4) var(--mx), rgba(214, 104, 84, 0.4) calc(var(--mx) + 1px), transparent calc(var(--mx) + 1px)),
linear-gradient(rgba(96, 136, 176, 0.14) 1px, transparent 1px) 0 11px / 22px 22px,
linear-gradient(90deg, rgba(96, 136, 176, 0.14) 1px, transparent 1px) 11px 0 / 22px 22px,
var(--ab-grain-paper),
var(--ab-paper);
box-shadow: 0 1px 3px rgba(60, 38, 18, 0.16);
}
.about-muse-mark {
position: absolute;
top: 18px;
left: 18px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 3.6rem;
line-height: 1;
color: var(--ab-accent);
opacity: 0.75;
pointer-events: none;
}
/* 几条叠在同一格里、只显示当前那条：高度按最长的那条定，翻页时不跳 */
.about-muse-texts { display: grid; }
.about-muse-text {
grid-area: 1 / 1;
margin: 0;
font-family: var(--ab-hand);
font-size: 1.3rem;
line-height: 1.8;
visibility: hidden;
}
.about-muse-text.is-on { visibility: visible; }
.about-muse-foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 14px;
font-family: var(--ab-mono);
font-size: 0.72rem;
color: var(--ab-ink-dim);
}
.about-muse-no { flex: none; letter-spacing: 0.08em; }
/* 已探索的进度条：这次看过几条 / 一共几条（about.js initMuse 写 --p，长一截时缓缓伸过去；刷新从头算）。
炫彩：填满的那一截（宽 = --p）里始终是一整道彩虹、一直往右流——进度再短也看得到全部颜色；
颜色和打卡本里 AFKfishing 的那一圈一样 */
.about-muse-progress {
position: relative;
flex: 1;
height: 3px;
overflow: hidden;
border-radius: 2px;
background: rgba(43, 37, 33, 0.1);
}
.about-muse-progress i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: calc(var(--p, 0) * 100%);
border-radius: 2px;
background: linear-gradient(90deg, #e0484f, #ec7d1f, #e7b416, #2f9e63, #2a86d1, #8655d4, #e0484f, #ec7d1f, #e7b416, #2f9e63, #2a86d1, #8655d4, #e0484f) 0 0 / 200% 100%;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
animation: ab-muse-rainbow 3s linear infinite;
}
/* 彩虹往右流：图是填满那截的两倍宽、里面两道彩虹（露出来的正好一道），挪满一整张图正好接回开头 */
@keyframes ab-muse-rainbow { to { background-position: -200% 0; } }
.about-muse-next {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 2px 2px 3px;
border: 0;
border-bottom: 1.5px dashed rgba(184, 104, 20, 0.55);
background: none;
font-family: var(--ab-hand);
font-size: 0.95rem;
line-height: 1.2;
color: var(--ab-accent-deep);
cursor: var(--ab-cursor-hand);
-webkit-appearance: none;
appearance: none;
}
.about-muse-next span { display: inline-block; transition: rotate 0.4s ease; }
.about-muse-next:hover span { rotate: -30deg; }
/* 翻走的那页：当前页的克隆，盖在最上面，绕上沿（线圈）往上翻过去，越翻越暗，翻过一半看不见背面就消失 */
.about-muse-sheet.is-leaf {
position: absolute;
z-index: 3;
top: 14px;
left: 0;
right: 0;
transform-origin: 50% 0;
backface-visibility: hidden;
animation: ab-muse-flip 0.8s cubic-bezier(0.5, 0.05, 0.55, 0.95) forwards;
}
.about-muse-sheet.is-leaf::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to top, rgba(60, 40, 22, 0.3), rgba(60, 40, 22, 0.04));
opacity: 0;
animation: ab-muse-shade 0.8s ease-in forwards;
}
@keyframes ab-muse-flip {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(100deg); }
}
@keyframes ab-muse-shade { to { opacity: 1; } }
/* 今日特调的咖啡杯、其他地方的星星闪烁还在用这两组关键帧 */
@keyframes ab-steam { 0%, 100% { opacity: 0.15; translate: 0 3px; } 50% { opacity: 0.85; translate: 0 -3px; } }
/* --- Block 5：回忆录（手帐本：一段回忆一个跨页；翻页见 about.js initMemoBook）--- */
.about-memo-hint {
margin: -6px 0 22px;
font-size: 0.85rem;
color: var(--ab-text-dim);
}
.about-memo-hint .is-narrow,
.about-memo-hint .is-soon { display: none; }
/* 线上先合着（about.js initMemoBook：不是本机调试时给书加 is-closed、给第五部分加 is-memo-closed）：
提示换成「正在准备中」，翻开的那本和翻页按钮收起来，换成一本合上的皮面手帐 */
.is-memo-closed .about-memo-hint .is-wide,
.is-memo-closed .about-memo-hint .is-narrow { display: none; }
.is-memo-closed .about-memo-hint .is-soon { display: inline; }
.mj-closed { display: none; }
.mj-book.is-closed .mj-cover,
.mj-book.is-closed .mj-nav { display: none; }
/* 合上的手帐：和翻开那本同一种深棕皮面，右边和下边露出纸页的厚度，左边书脊处压暗一点；微微歪着放 */
.mj-book.is-closed .mj-closed {
position: relative;
display: block;
width: min(400px, 78%);
aspect-ratio: 0.76;
margin: 6px auto 64px;
border-radius: 8px 16px 16px 8px;
background:
var(--ab-grain),
radial-gradient(120% 90% at 30% 20%, #6e4630, #4a2d1d 70%, #3a2216);
box-shadow:
4px 4px 0 -1px #efe5d2,
8px 7px 0 -2px #e0d3bb,
inset 16px 0 18px -12px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 230, 200, 0.08),
inset 0 0 0 5px rgba(0, 0, 0, 0.12),
0 30px 50px -26px rgba(40, 24, 10, 0.75);
transform: rotate(-2deg);
}
/* 松紧带：竖着压过封面右侧 */
.mj-closed-band {
position: absolute;
top: -3px;
bottom: -3px;
right: 15%;
width: 13px;
border-radius: 3px;
background: linear-gradient(90deg, #22150d, #3d271a 45%, #22150d);
box-shadow: 2px 0 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 220, 180, 0.06);
}
/* 烫金铭牌 */
.mj-closed-plate {
position: absolute;
top: 22%;
left: 14%;
right: 26%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 16px 10px 14px;
border: 1.5px solid rgba(232, 196, 106, 0.55);
border-radius: 4px;
box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.12), inset 0 0 0 5px rgba(232, 196, 106, 0.25);
}
.mj-closed-en {
font-family: var(--ab-mono);
font-size: 0.72rem;
letter-spacing: 0.42em;
color: rgba(232, 196, 106, 0.8);
}
.mj-closed-zh {
font-family: var(--ab-hand);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 700;
letter-spacing: 0.3em;
color: #e8c46a;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 236, 190, 0.25);
}
/* 贴在封面左下角的小纸条：一截纸胶带，手写「正在准备中」 */
.mj-closed-note {
position: absolute;
left: 10%;
bottom: 14%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 18px 10px;
color: var(--ab-ink);
background: var(--ab-grain-paper), var(--ab-paper);
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.5);
transform: rotate(-4deg);
}
.mj-closed-note::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 64px;
height: 20px;
margin-left: -32px;
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px),
rgba(240, 161, 78, 0.62);
clip-path: polygon(3% 0, 97% 0, 100% 25%, 97% 50%, 100% 75%, 97% 100%, 3% 100%, 0 75%, 3% 50%, 0 25%);
transform: rotate(2deg);
}
.mj-closed-note b {
font-family: var(--ab-hand);
font-size: 1.15rem;
letter-spacing: 0.08em;
}
.mj-closed-note span {
font-family: var(--ab-mono);
font-size: 0.66rem;
letter-spacing: 0.28em;
color: var(--ab-accent-text);
}
/* 书签带：从纸页中间垂出来 */
.mj-closed-ribbon {
position: absolute;
top: 100%;
left: 36%;
width: 14px;
height: 50px;
background: linear-gradient(90deg, #9c2a22, #c23a30 45%, #9c2a22);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.mj-book {
position: relative;
max-width: 960px;
margin: 0 auto;
outline: none;
}
.mj-book:focus-visible .mj-cover { box-shadow: 0 0 0 3px var(--ab-accent), 0 30px 50px -28px rgba(40, 24, 10, 0.7); }
/* 深棕皮面封皮：纸页四周露出一圈 */
.mj-cover {
position: relative;
padding: 14px 16px;
border-radius: 14px;
background:
var(--ab-grain),
radial-gradient(120% 90% at 30% 20%, #6e4630, #4a2d1d 70%, #3a2216);
box-shadow: 0 30px 50px -28px rgba(40, 24, 10, 0.75), inset 0 0 0 1px rgba(255, 230, 200, 0.08), inset 0 0 0 5px rgba(0, 0, 0, 0.12);
}
.mj-pages {
position: relative;
aspect-ratio: 1.56;
perspective: 2400px;
cursor: var(--ab-cursor-hand);
/* 两边露出来的纸页厚度 */
box-shadow: 3px 1px 0 #efe5d2, 6px 2px 0 #e0d3bb, -3px 1px 0 #efe5d2, -6px 2px 0 #e0d3bb;
border-radius: 6px;
user-select: none;
-webkit-user-select: none;
}
.mj-spread {
position: absolute;
inset: 0;
display: none;
grid-template-columns: 1fr 1fr;
}
.mj-spread.is-on,
.mj-spread.show-left,
.mj-spread.show-right { display: grid; }
/* 翻页时底下拼出来的那一对：当前的左页 + 下一跨页的右页（往前翻反过来） */
.mj-spread.show-left .mj-right,
.mj-spread.show-right .mj-left { visibility: hidden; }
.mj-page {
position: relative;
overflow: hidden;
padding: 7% 8% 9%;
color: var(--ab-ink);
}
/* 左页：点阵纸；右页：横线纸 + 红色页边线；靠书脊一侧压一道阴影 */
.mj-left {
border-radius: 6px 0 0 6px;
background:
radial-gradient(circle, rgba(110, 90, 70, 0.28) 0 0.8px, transparent 1.2px) 0 0 / 18px 18px,
var(--ab-grain-paper),
#fbf6ea;
box-shadow: inset -26px 0 26px -22px rgba(70, 45, 20, 0.4);
}
.mj-right {
--line: 30px;
border-radius: 0 6px 6px 0;
background:
linear-gradient(90deg, transparent 13%, rgba(214, 104, 84, 0.35) 13%, rgba(214, 104, 84, 0.35) calc(13% + 1px), transparent calc(13% + 1px)),
repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), rgba(96, 136, 176, 0.2) calc(var(--line) - 1px) var(--line)),
var(--ab-grain-paper),
#fcf8ee;
box-shadow: inset 26px 0 26px -22px rgba(70, 45, 20, 0.4);
padding-left: 17%;
}
.mj-spine {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 2;
width: 2px;
translate: -50% 0;
background: rgba(70, 45, 20, 0.28);
pointer-events: none;
}
/* 书签带：从书脊旁垂下来 */
.mj-ribbon {
position: absolute;
top: 2px;
left: calc(50% + 34px);
z-index: 6;
width: 14px;
height: 92px;
background: linear-gradient(90deg, #9c2a22, #c23a30 45%, #9c2a22);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
/* 左页：照片（四个相角、微微歪）+ 圆形日期戳 + 手写说明 */
.mj-photo {
position: relative;
display: block;
width: 60%;
margin: 4% auto 0;
aspect-ratio: 3 / 4;
background: #d9ccb8;
box-shadow: 0 2px 3px rgba(40, 24, 10, 0.2), 0 10px 16px -8px rgba(40, 24, 10, 0.4);
}
.mj-tilt-0 { transform: rotate(-2deg); }
.mj-tilt-1 { transform: rotate(1.6deg); }
.mj-tilt-2 { transform: rotate(-0.8deg); }
.mj-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mj-corner {
position: absolute;
width: 22px;
height: 22px;
background: #3a2a20;
opacity: 0.88;
}
.mj-corner-tl { top: -5px; left: -5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.mj-corner-tr { top: -5px; right: -5px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.mj-corner-bl { bottom: -5px; left: -5px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.mj-corner-br { bottom: -5px; right: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.mj-stamp {
position: absolute;
top: 6%;
right: 7%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border: 2px solid rgba(184, 50, 42, 0.72);
border-radius: 50%;
box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(184, 50, 42, 0.5);
color: rgba(184, 50, 42, 0.8);
font-family: var(--ab-mono);
line-height: 1.15;
transform: rotate(-14deg);
-webkit-mask: var(--ab-stamp-mask);
mask: var(--ab-stamp-mask);
}
.mj-stamp-y { font-size: 0.64rem; letter-spacing: 0.1em; }
.mj-stamp-d { font-size: 0.95rem; font-weight: 700; }
.mj-caption {
display: block;
margin-top: 6%;
text-align: center;
font-family: var(--ab-hand);
font-size: 1.2rem;
color: var(--ab-ink);
}
.mj-folio {
position: absolute;
bottom: 4%;
font-family: var(--ab-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
color: var(--ab-ink-dim);
}
.mj-left .mj-folio { left: 7%; }
.mj-right .mj-folio { right: 7%; }
/* 右页：日期 + 手写标题（琥珀荧光笔）+ 故事 */
.mj-date {
display: block;
font-family: var(--ab-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
color: var(--ab-ink-dim);
line-height: var(--line);
}
.mj-title {
display: inline;
margin: 0;
padding: 0 4px;
font-family: var(--ab-hand);
font-size: 1.65rem;
font-weight: 700;
line-height: calc(var(--line) * 1.5);
background: linear-gradient(transparent 58%, rgba(255, 180, 94, 0.5) 58%, rgba(255, 180, 94, 0.5) 90%, transparent 90%);
}
.mj-text { margin-top: calc(var(--line) * 0.5); }
.mj-text p {
margin: 0;
font-family: var(--ab-hand);
font-size: 1.12rem;
line-height: var(--line);
color: var(--ab-ink);
}
.mj-text .mj-src {
margin-top: var(--line);
font-size: 0.95rem;
color: var(--ab-ink-dim);
text-align: right;
}
/* 5 星的回忆：右下角一方红色「珍藏」印 */
.mj-seal {
position: absolute;
right: 9%;
bottom: 12%;
padding: 4px 6px;
font-family: var(--ab-hand);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(184, 50, 42, 0.82);
border: 2px solid currentColor;
border-radius: 4px;
transform: rotate(8deg);
-webkit-mask: var(--ab-stamp-mask);
mask: var(--ab-stamp-mask);
}
/* 翻页：当前页的克隆绕书脊转过去（正面 = 翻走的这页，背面 = 翻过去之后露出来的那页） */
.mj-leaf {
position: absolute;
top: 0;
bottom: 0;
z-index: 5;
width: 50%;
transform-style: preserve-3d;
pointer-events: none;
}
.mj-leaf.is-fwd { left: 50%; transform-origin: 0 50%; }
.mj-leaf.is-back { left: 0; transform-origin: 100% 50%; }
.mj-leaf .mj-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.mj-leaf .mj-back { transform: rotateY(180deg); }
.mj-leaf .mj-face::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(40, 25, 10, 0.28), rgba(40, 25, 10, 0) 70%);
opacity: var(--shade, 0);
pointer-events: none;
}
.mj-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
margin-top: 18px;
}
.mj-nav button {
padding: 2px 2px 3px;
border: 0;
border-bottom: 1.5px dashed rgba(184, 104, 20, 0.55);
background: none;
font-family: var(--ab-hand);
font-size: 1rem;
color: var(--ab-accent-deep);
cursor: var(--ab-cursor-hand);
-webkit-appearance: none;
appearance: none;
}
.mj-nav button:disabled { opacity: 0.35; cursor: var(--ab-cursor); }
.mj-count {
font-family: var(--ab-mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--ab-text-dim);
}
/* ========== 分割段 ========== */
/* 页面内容层需盖过全屏遮罩板(z2)与嵌入图(z1) */
main#about-page {
position: relative;
z-index: 3;
}
/* 动画模式下分割段是零高占位——分割线就是相邻两块的接缝，
两块的呼吸间距由块自身的上下 padding 提供 */
.about-split { position: relative; }
html.ab-anim .about-split { height: 0; }
/* 嵌入图：降级时是静态图带；动画模式下为全屏固定层（JS 移到 body 下） */
.about-split-media {
position: relative;
height: 62vh;
}
/* 锁着（html.ab-locked）：分割段的嵌入图、遮罩板整个不显示（动画模式下钉住时长也是 0，见 about.js initLock） */
html.ab-locked .about-split,
html.ab-locked .about-split-media,
html.ab-locked .about-panel { display: none !important; }
html.ab-anim .about-split-media {
position: fixed;
inset: 0;
height: auto;
z-index: 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.about-split-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 展开时的缩放交给合成器（显卡；大图每帧重绘会卡） */
html.ab-anim .about-split-media img { will-change: transform; }
/* is-band（index.pug 给了取景 pos 的分割段）：动画模式下上下两块只各让开 25vh，露出来的就是屏幕中间一半——
图只铺在这一半里（按这一条的宽高比 cover），object-position 选图上哪一段落进来；降级模式的静态图带照旧 */
html.ab-anim .about-split-media.is-band img {
position: absolute;
left: 0;
top: 25%;
height: 50%;
}
.about-split-media-shade {
position: absolute;
inset: 0;
background: rgba(24, 16, 10, 0.3);
}
.about-split-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(80vw, 760px);
text-align: center;
z-index: 2;
}
.about-split-text .about-typewriter-lines {
font-size: clamp(1.3rem, 2.6vw, 2rem);
}
/* 文字靠左（图的主体在正中偏右时）：左半边、左对齐 */
.about-split-text.is-left {
left: 7vw;
width: min(44vw, 640px);
transform: translate(0, -50%);
text-align: left;
}
/* 全屏遮罩板：与背景层同色同光，闭合时不可见；分离时上下滑开露出嵌入图 */
.about-panel {
position: fixed;
left: 0;
right: 0;
z-index: 2;
background: var(--ab-bg);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* 遮罩板复刻背景层的光晕：上板原点≈视口顶，下板原点在 50vh，所以光晕 y 坐标减 50vh */
.about-panel-top {
top: -2px;
height: calc(50vh + 2px);
background:
var(--ab-grain),
radial-gradient(70vw 60vh at 12vw calc(6vh + 2px), var(--ab-glow-a), transparent 70%),
radial-gradient(60vw 55vh at 92vw calc(88vh + 2px), var(--ab-glow-b), transparent 70%),
var(--ab-bg);
}
.about-panel-bottom {
top: 50%;
height: 52vh;
background:
var(--ab-grain),
radial-gradient(70vw 60vh at 12vw -44vh, var(--ab-glow-a), transparent 70%),
radial-gradient(60vw 55vh at 92vw 38vh, var(--ab-glow-b), transparent 70%),
var(--ab-bg);
}
/* 分离时遮罩区域压暗（暖暗，聚焦嵌入图） */
.about-panel-dim {
position: absolute;
inset: 0;
background: var(--ab-dark);
opacity: 0;
}
/* 分割线：浅底上用深琥珀线，附着在板的内缘，闭合时上下线重合于屏幕中央 */
.about-panel-edge {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: var(--ab-accent-deep);
box-shadow: 0 0 12px rgba(240, 161, 78, 0.55);
transform: scaleX(0);
}
.about-panel-top .about-panel-edge { bottom: 0; }
.about-panel-bottom .about-panel-edge { top: 0; }
/* ========== Footer ========== */
.about-footer {
position: relative;
padding: 9vh 28px 13vh;
text-align: center;
}
/* 虚线分隔 + 中间一只咖啡杯 */
.about-footer-rule {
display: flex;
align-items: center;
gap: 16px;
max-width: 420px;
margin: 0 auto 10px;
font-size: 22px;
color: var(--ab-accent-deep);
}
.about-footer-rule::before,
.about-footer-rule::after {
content: '';
flex: 1;
border-top: 1px dashed var(--ab-line);
}
.about-footer-mark {
margin: 0;
font-family: var(--ab-hand);
font-size: clamp(3rem, 9vw, 6.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
color: rgba(80, 58, 40, 0.1);
user-select: none;
}
.about-footer-mark + .about-footer-line { margin-top: 18px; }
.about-footer-line {
margin: 0 0 6px;
font-size: 0.9rem;
color: var(--ab-text-dim);
}
.about-footer-line #about-runtime,
.about-footer-line #about-firefly { color: var(--ab-accent-text); }
.about-footer-dim { font-size: 0.78rem; opacity: 0.75; }
/* 从主站过来时（主站点「关于店长」先预渲染这一页）顶上那条进度条：和主站 pace 的一个样子（居中的小胶囊、金色渐变），
切过来时停在 90%，入场播完走到 100%（is-full），再往上收回（is-gone）。见 about.js initTransitBar */
.ab-pace {
position: fixed;
z-index: 2147482000;
top: 4px;
left: 0;
right: 0;
width: 7rem;
height: 8px;
margin: auto;
overflow: hidden;
border-radius: 8px;
background: #eaecf2;
pointer-events: none;
transition: opacity 0.3s ease, top 0.3s ease;
}
.ab-pace i {
position: absolute;
top: 0;
right: 100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, #f3d397, #fcad02);
translate: 90% 0;
transition: translate 0.35s ease-out;
}
.ab-pace.is-full i { translate: 100% 0; }
.ab-pace.is-gone { opacity: 0; top: -8px; }
/* 屏幕外暂停的循环动画（about.js initOffscreenPause 给元素加 .ab-off；离屏幕还有一屏远时就去掉，滚到眼前前早已恢复） */
.ab-off,
.ab-off * { animation-play-state: paused !important; }
/* ========== 动画初始态（仅在 JS 动画可用时生效） ========== */
/* 浮现作用于内层（外层的位移/透明度归分割段时间轴），由 JS 按滚动触发 */
html.ab-anim .about-block-inner {
opacity: 0;
transform: translateY(52px);
}
html.ab-anim .about-scrollhint { opacity: 0; }
/* JS 或动画库加载失败的降级：一切可见、遮罩板不参与 */
html.ab-fallback .about-panel { display: none; }
/* ========== 移动端 / 减少动态 ========== */
@media (max-width: 768px) {
:root { --ab-bar-h: 54px; --ab-bar-pad: 14px; }
.about-nav { top: 9px; right: 12px; gap: 10px; }
.about-nav-miniclock { display: none; }
.ab-bar-inner { padding-right: 100px; }
.ab-bar-site,
.ab-bar-sep { display: none; }
.ab-marks { right: 12px; gap: 4px; }
.ab-mark { width: 30px; }
/* 背景咖啡厅手机上也显示：只露出整幅最右边那一截（砖墙、招牌、黑板、吧台），见 about-cafe/09-cafe-mount */
.about-nav-solo { display: none; }
.about-hero-content { left: 7vw; right: 7vw; top: 9vh; width: auto; }
.about-block { padding: 11vh 0; }
.about-block-inner { padding: 0 20px; }
/* 侧边留白窄：斜贴的角胶带往里收，不伸出屏幕 */
.ab-tape-tl { left: -16px; }
.ab-tape-tr { right: -16px; }
.about-profile { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about-profile-side { --lanyard: 88px; max-width: 360px; }
.about-idcard { transform: rotate(-0.8deg); }
.about-bento { grid-template-columns: minmax(0, 1fr); }
.about-bento-cell,
.about-bento-main,
.about-bento-img,
.about-bento-code { grid-column: span 1; }
.about-bento-code { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.about-bento-main .about-bento-doodle { width: 120px; }
.about-special-row { flex-direction: column; align-items: stretch; gap: 34px; }
.about-special { flex-direction: column; align-items: stretch; gap: 18px; margin: 34px 0 0; padding: 0 22px 22px; }
.about-special-board { align-self: center; margin: -34px 0 0; }
.about-special-peg { left: auto; right: 26px; }
.about-fresh { flex: none; width: min(100%, 330px); margin: 0 auto; }
.about-special-foot { flex-wrap: wrap; }
.about-writing-top { grid-template-columns: minmax(0, 1fr); }
.about-draft { width: min(100%, 300px); margin: 4px auto 0; transform: rotate(1.4deg); }
.about-ledger-years { padding-left: 0; border-left: 0; }
.about-omikuji { width: 200px; margin: 0 auto; }
.about-omikuji-slip { top: 276px; left: 50%; width: min(300px, 86vw); transform: translate(-50%, -8px) scale(0.96); transform-origin: 50% 0; }
.about-omikuji:hover .about-omikuji-slip,
.about-omikuji:has(.about-omikuji-box:focus-visible) .about-omikuji-slip,
.about-omikuji.is-open .about-omikuji-slip { transform: translate(-50%, 0) rotate(-0.8deg); }
.about-omikuji.is-busy .about-omikuji-slip { transform: translate(-50%, -8px) scale(0.96); }
.about-posts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.about-post-feature { grid-row: auto; }
.about-fandom { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.about-fandom-feature { padding: 10px 10px 0; transform: rotate(-0.5deg); }
.about-fandom-body { padding: 14px 6px 16px; }
.about-fandom-title { font-size: 1.4rem; }
.about-desk { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 48px; }
.about-desk-side { gap: 24px; }
.about-desk-extra { flex-direction: column; align-items: stretch; gap: 10px; }
.about-points-main { padding: 12px 14px 10px 15px; }
.about-points-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.about-points-stub { flex-basis: 90px; }
.about-points-foot { font-size: 0.8rem; }
.about-points-stub-en { letter-spacing: 0.04em; }
.about-napcat { align-self: flex-end; margin-right: 6px; }
.about-omikuji-slip.is-secret { right: 0; width: min(300px, 86vw); }
.about-muse-sheet { --mx: 38px; padding: 30px 18px 14px 50px; }
.about-muse-mark { left: 8px; top: 16px; font-size: 2.8rem; }
.about-muse-text { font-size: 1.12rem; }
/* 靠左的分割段文字（流萤那张）手机上都回到正中，不压流萤的脸：
降级时（静态图带，图按高度铺满）挪到图带下部 76% 处；
动画模式下露出来的是屏幕中间一半（25%~75%），这段字长（四五行），放在这一半的上部（脸在一半往下），字号小一点，整段落在眼睛上面 */
html.ab-fallback .about-split-text.is-left { left: 50%; top: 76%; width: min(80vw, 760px); transform: translate(-50%, -50%); text-align: center; }
html.ab-anim .about-split-text.is-left { left: 50%; top: calc(25% + 16px); width: 86vw; transform: translate(-50%, 0); text-align: center; }
html.ab-anim .about-split-text.is-left .about-typewriter-lines { font-size: 1.1rem; }
/* 回忆录手帐本：改成上下两页（照片页在上），翻页换成直接切换（左右滑动 / 按钮）；「珍藏」印挪到右上角，不压右下的出处 */
.about-memo-hint .is-wide { display: none; }
.about-memo-hint .is-narrow { display: inline; }
.mj-seal { top: 8%; bottom: auto; }
.mj-pages { aspect-ratio: auto; cursor: var(--ab-cursor); }
.mj-spread { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); }
.mj-left { border-radius: 6px 6px 0 0; box-shadow: inset 0 -26px 26px -22px rgba(70, 45, 20, 0.4); }
.mj-right { border-radius: 0 0 6px 6px; box-shadow: inset 0 26px 26px -22px rgba(70, 45, 20, 0.4); min-height: 300px; }
.mj-page { padding: 8% 8% 12%; }
.mj-right { padding-left: 17%; }
.mj-spine { display: none; }
.mj-ribbon { left: auto; right: 26px; }
/* 自我介绍信笺：信纸两边少留点，邮戳的波浪线收掉（不压第一行） */
.ab-letter-paper { margin: 0 8px; padding: 18px 18px 20px; }
.ab-letter-postmark { width: 70px; right: 64px; }
.ab-letter-postmark-waves { display: none; }
}
/* 「减少动态效果」的样式先停用（2026-10-01，用户要求不管系统开没开都按有动态效果走），和 about.js 的 reduceMotion 判定一起；
要恢复就去掉这层注释
@media (prefers-reduced-motion: reduce) {
.about-scrollhint-arrow { animation: none; }
.about-term-cursor { animation: none; }
.ab-roll-strip { transition: none; }
.about-idcard.is-pressing { animation-duration: 0.4s; }
.ab-player-vinyl,
.ab-player-cover img { animation: none !important; }
.ab-player { --beat: 0 !important; --lo: 0 !important; --mid: 0 !important; --hi: 0 !important; }
.about-bento-slide { transition: opacity 0.6s ease; transform: none; }
.about-special-cup .cup-steam { animation: none; opacity: 0.6; }
.about-special-board.is-wobble { animation: none; }
.about-muse-next span { transition: none; }
.about-special-menu,
.about-ledger-bar i { transition: none; }
.about-idcard.is-pop { animation: none; }
.ab-letter-toggle { animation: none; }
.ab-letter-toggle::before { transition: none; }
.ab-mark,
body.ab-bar-on:not(.ab-chrome-away) .ab-mark { transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
}
*/