@font-face {
    font-family: "pingfang-Black";
    src: url(../fonts/pf-bs.ttf);
    font-display: swap;
}

/* 霞鹜文楷 Lite（OFL-1.1，许可与字体同目录的 OFL.txt），只给 About 引文用。
   只声明两档：400 → Regular（释义段 / 出处），700 → Medium（ABOUT 标题与引文行的 bold，
   这样不会掉到浏览器合成的假粗）。路径含版本号，升级字体只改这两行 */
@font-face {
    font-family: "LXGW WenKai Lite";
    src: url(../lxgw-wenkai-lite-v1.522/LXGWWenKaiLite-Regular.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "LXGW WenKai Lite";
    src: url(../lxgw-wenkai-lite-v1.522/LXGWWenKaiLite-Medium.ttf) format("truetype");
    font-weight: 700;
    font-display: swap;
}

/* 设计令牌。新增样式一律用变量，反转主题只覆盖这一层 */
:root {
    --ink:            #000;              /* 实心块 / 描边 */
    --paper:          #fff;              /* 与 --ink 相对的那一极 */
    --bg:             #000;              /* 与 WebGL clearColor 一致 */
    --glass:          rgba(255, 255, 255, .10);   /* 越小越通透 */
    --glass-2:        rgba(255, 255, 255, .50);
    --glass-3:        rgba(255, 255, 255, .70);
    --hair:           rgba(255, 255, 255, .35);
    --blur-1:         7px;               /* 越小背景越清晰 */
    --blur-2:         10px;
    --radius:         12px;
    --radius-sm:      8px;
    --shadow:         0 5px 18px rgba(0, 0, 0, .10);
    --shadow-sm:      0 5px 15px rgba(0, 0, 0, .08);
    --on-glass:       #000;              /* 玻璃上的字 */
    --on-ink:         #eee;              /* 反转块上的字 */
    --font:           "pingfang-Black", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --font-kai:       "LXGW WenKai Lite", var(--font);   /* 楷体只用在 About，缺字时回落 --font */
    --tracking:       3px;
    --pad:            clamp(20px, 3.4vw, 56px);
    --col-left:       minmax(300px, 38%);
}

/* 全局反转（由 .toggle 按钮切换） */
html[data-theme="invert"] {
    --ink:       #fff;
    --paper:     #000;
    --bg:        #f2f2f2;
    --glass:     rgba(0, 0, 0, .34);
    --glass-2:   rgba(0, 0, 0, .35);
    --glass-3:   rgba(0, 0, 0, .70);
    --hair:      rgba(0, 0, 0, .35);
    --shadow:    0 5px 18px rgba(255, 255, 255, .12);
    --shadow-sm: 0 5px 15px rgba(255, 255, 255, .12);
    --on-glass:  #fff;
    --on-ink:    #000;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;                /* 让页脚在内容不足时也贴到页面底部 */
    flex-direction: column;
    color: var(--on-glass);
    font-family: var(--font);
    background-color: var(--bg);
    /* 兜底纹理：仅 WebGL 不可用时可见，保证玻璃背后总有内容可模糊 */
    background-image:
        radial-gradient(120% 85% at 50% -15%, rgba(255, 255, 255, .10), transparent 62%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 100% 100%, 64px 64px, 64px 64px;
    /* 全局窗口滚动；背景 canvas 是 fixed，滚动时不动 */
    -webkit-font-smoothing: antialiased;
}

html[data-theme="invert"] body {
    background-image:
        radial-gradient(120% 85% at 50% -15%, rgba(0, 0, 0, .06), transparent 62%),
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
}

/* 背景 canvas（由 js/visual.js 挂到 body）：固定铺满、不吃鼠标事件 */
.bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* ==== 双列骨架 ==== */
.layout {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;                /* 撑满剩余高度，页脚自然落到页面最底部 */
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    gap: clamp(14px, 2.2vw, 38px);
    padding: var(--pad);
}

.col-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* 黑块靠左上角 */
    align-items: flex-start;       /* 不拉伸，按自身宽度成竖形 */
    gap: clamp(10px, 1.6vh, 20px);
    min-width: 0;
}

.col-right-wrap {
    position: relative;        /* 预留：日后往两列分界处放装饰元素 */
    min-width: 0;
}

.col-right {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 26px);
}

/* ==== 页脚 ==== */
.footer {
    position: relative;
    z-index: 1;                              /* 压在背景 canvas 之上 */
    margin-top: clamp(20px, 3vw, 44px);
    padding: 12px var(--pad);
    background: var(--glass-3);
    -webkit-backdrop-filter: blur(var(--blur-2));
    backdrop-filter: blur(var(--blur-2));
    color: var(--on-glass);
    font-size: 13px;
    letter-spacing: .08em;
    text-align: center;
}

.footer p {
    margin: 0;
}

/* ==== 积木 1：反转色块（竖形圆角矩形）==== */
.card-invert {
    position: sticky;              /* 滚动时留在左上角 */
    top: var(--pad);
    display: flex;
    flex-direction: column;
    justify-content: center;       /* 内容整组竖向居中 */
    align-items: center;           /* 子元素横向居中 */
    text-align: center;            /* 多行文本逐行居中 */
    width: 100%;
    max-width: 360px;
    min-height: clamp(420px, 66vh, 680px);
    padding: clamp(24px, 3vw, 42px);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.eyebrow {
    margin: 0 0 .8em;
    font-size: 13px;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    opacity: .62;
}

.name {
    margin: 0;
    font-size: clamp(40px, 5.6vw, 78px);
    font-weight: bold;
    line-height: 1.04;
    letter-spacing: .04em;
}

.lead {
    margin: .9em 0 0;
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.85;
    opacity: .78;
}

/* 「颠倒黑白！」开关：直角描边条，填充自左向右滑入 */
.toggle {
    position: relative;
    z-index: 0;                    /* 建层叠上下文，::after 填充才会落在文字下方 */
    display: inline-block;
    align-self: stretch;           /* 与上方文字块同宽 */
    width: 100%;
    margin: 1.8em 0 0;
    padding: 14px 18px;
    overflow: hidden;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: .14em;
    color: var(--on-ink);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0;              /* 直角 */
    cursor: pointer;
    transition: color .28s ease;
}

/* 填充块：scaleX 0→1、原点在左 = 自左向右滑入 */
.toggle::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;                    /* 外扩 1px，滑到最右不留白缝 */
    z-index: -1;
    background: var(--on-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .42s cubic-bezier(.22, .75, .25, 1);
}

/* 悬停 / 聚焦 / 按下才滑。刻意不含 [aria-pressed]：否则反转后按钮常驻填满，
   就没有滑动可看。填充与字色都取自令牌，两个主题下方向一致、颜色自动互换 */
.toggle:hover,
.toggle:focus-visible,
.toggle:active {
    color: var(--ink);
}

.toggle:hover::after,
.toggle:focus-visible::after,
.toggle:active::after {
    transform: scaleX(1);
}

/* 已翻转的静态标记：1px 内描边（不占填充，把填充留给滑动动效） */
.toggle[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ==== 积木 2：磨玻璃（通透度见 :root 的 --glass / --blur-1）==== */
.glass {
    position: relative;
    padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.6vw, 36px);
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--blur-1));
    backdrop-filter: blur(var(--blur-1));
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    color: var(--on-glass);
}

/* 顶部高光 */
.glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--hair);
}

/* 备用令牌 --glass-2 / --shadow-sm 目前没有使用者，保留以记录原始配色 */

/* ==== 右列内容 ==== */
.glass h2 {
    margin: 0 0 .75em;
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: bold;
    letter-spacing: var(--tracking);
}

.glass p {
    margin: 0;
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.9;
}

.glass p + p {
    margin-top: .7em;
}

/* ABOUT 整块用楷体（霞鹜文楷 Lite）。楷体笔画比无衬线细、视觉块面也小，
   所以下面各行的字号都比 sans 版抬半档，免得看起来「变小变淡」 */
#about {
    font-family: var(--font-kai);
}

/* ABOUT 引文：不加线框，只用「大一档 + 字距」与正文分层。
   选择器带 .glass 前缀是为了压过上面的 .glass p（同一份字号/行高） */
.quote {
    margin: 0;                     /* 清掉 blockquote 自带的 1em 40px，与标题/释义段左对齐 */
}

/* 引文正文：比正文大一档、字距略开。重量走 Medium 档（700），别让浏览器合成假粗 */
.glass .quote-line {
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .04em;
}

/* 出处：右对齐到引文右缘，与 .list 的 key / val 同一套左右对仗。
   楷体的小字要多半像素才不发虚，所以这里比 sans 版大 1px */
.glass .quote-cite {
    display: block;
    margin-top: .45em;
    font-size: 13px;
    font-style: normal;        /* 浏览器默认给 cite 斜体，这里归正 */
    letter-spacing: .12em;
    text-align: right;
    opacity: .62;              /* 与 .eyebrow 同级弱化 */
}

/* 释义段：上一兄弟是 blockquote 而非 p，拿不到 .glass p + p 的间距，这里补上；
   字号放大到正文与引文之间（窄屏保底 15px，桌面 17.5px），30 字在桌面宽度仍是一行 */
.glass .quote-note {
    margin-top: 1.1em;
    font-size: clamp(15px, 1.4vw, 17.5px);
    letter-spacing: .02em;
}

/* 宽屏（≥960px，与双列断点同阈值，即「电脑 / 横屏」）才给引文配大引号：
   引号绝对定位（不占行盒、不影响行高），靠 text-indent 把正文推右半格，
   短句 + 右对齐出处因此左右都有落点，整句更像居中。
   就地放在 About 规则里而不是文件末尾的响应式段 —— 调引文时能一眼看到 */
@media (min-width: 960px) {
    .glass .quote-line {
        position: relative;
        text-indent: 1.8em;        /* 给大引号让位：正文右移 ≈1.8em（桌面 ≈34px） */
    }

    /* 文楷的引号字形本身很小（墨迹只有 0.21em 高、0.26em 宽），
       要 4em 才有「大引号」的体量；left/top 用 em 是跟着自身字号缩放的。
       currentColor + 透明度：反转主题不用再写一套；纯装饰，不进无障碍树 */
    .glass .quote-line::before {
        content: "\201C";          /* “ 开引号，走文楷自己的字形 */
        position: absolute;
        left: -.04em;              /* 抵消字形的左侧边距，让墨迹左缘落在 ABOUT / 释义段那条线上 */
        top: .05em;                /* 墨迹与正文墨迹上下居中对齐 */
        text-indent: 0;            /* 必须有：text-indent 会继承进这个绝对定位盒，把它自己那行也缩进，
                                      引号会被推到正文上（实测过，别删） */
        font-size: 4em;            /* 相对引文行放大 4 倍，字重不动，免得抢正文 */
        line-height: 1;
        opacity: .45;              /* 引号笔画细，太淡就会被玻璃背景吃掉 */
        pointer-events: none;
    }
}

/* 技能：黑白交替 */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1.2em 0 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 4px 11px;
    font-size: 12.5px;
    letter-spacing: .1em;
    border: 1px solid var(--on-glass);
    border-radius: var(--radius-sm);
}

.chips li:nth-child(even) {
    background: var(--on-glass);
    color: var(--paper);
}

/* 作品 / 时间线：hover 整行反转 */
.list {
    margin: 1.1em 0 0;
    padding: 0;
    list-style: none;
}

.list li {
    border-top: 1px solid var(--hair);
}

.list li:last-child {
    border-bottom: 1px solid var(--hair);
}

.list a,
.list .row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    transition: background-color .25s ease, color .25s ease, padding-left .25s ease;
}

.list a:hover,
.list .row:hover {
    background: var(--on-glass);
    color: var(--paper);
    padding-left: 18px;
}

.list .key {
    flex: 0 0 auto;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .62;
}

.list .val {
    flex: 1 1 auto;
    text-align: right;
    font-size: clamp(13px, 1.15vw, 15px);
    overflow-wrap: anywhere;
}

/* ==== 入场 ==== */
/* 只在 JS 可用时（html.js）才隐藏，禁用 JS 也能读到内容 */
.layout,
.footer {
    opacity: 1;
    transition: opacity .7s ease;
}

html.js:not(.ready) .layout,
html.js:not(.ready) .footer {
    opacity: 0;
}

/* 玻璃卡滚动显形 */
html.js .glass {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}

html.js .glass.in {
    opacity: 1;
    transform: none;
}

/* ==== 响应式：折叠单列 ==== */
@media (max-width: 959px) {
    .layout {
        grid-template-columns: 1fr;
    }

    /* 单列时黑块回普通流 */
    .card-invert {
        position: static;
        max-width: none;
        min-height: 0;
    }
}

@media (max-width: 420px) {
    .list .val {
        flex-basis: 100%;
        text-align: left;
    }
}

/* 无 backdrop-filter：换不透明底色保对比度 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .footer {
        background: rgba(240, 240, 240, .94);
    }

    html[data-theme="invert"] .glass,
    html[data-theme="invert"] .footer {
        background: rgba(15, 15, 15, .94);
    }
}

/* 减弱动态效果：不动，也不藏内容 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .layout,
    .footer,
    html.js .glass {
        opacity: 1 !important;
        transform: none !important;
    }
}