@charset "utf-8";
/* 精静的个人网站 —— 前台样式

   说几条规矩，改的时候照着来，不然很容易又变回那种一眼模板的样子：

   1. 颜色只有一套：深浅不一的灰，加一个暖色 --accent。
      那个暖色是留给「可以点」和「正在看」的东西，别拿去铺背景、描边。
   2. 面就是面，不要渐变。卡片、按钮、弹层全都是纯色块 ——
      渐变一多，屏幕上就到处是光，看着吵，也假。
   3. 不发光。box-shadow 只用来压暗（往下投影），不用来提亮。
   4. 字距别乱加。中文加字距本来就慢，通篇加就更慢，
      只给那些一两个字的标签留一点点。
   5. 圆角、动效曲线统一走下面这几个变量，不要各处写各处的。 */

:root{
    --ink:#0a0a0c;                        /* 底 */
    --ink2:#141416;                       /* 抬起来的面，弹层用 */
    --panel:rgba(255,255,255,.028);       /* 卡片 */
    --panel2:rgba(255,255,255,.05);       /* 卡片里再抬一层 */
    --line:rgba(255,255,255,.09);
    --line2:rgba(255,255,255,.17);

    --text:#e3e3e6;
    --dim:#8d8d94;
    --dim2:#616168;

    --accent:#c8a97e;                     /* 全站唯一一个颜色 */
    --accent2:#dcc39c;                    /* 悬停时亮一档 */
    --on-accent:#1b1509;                  /* 压在暖色上的字 */

    --err:#d98a8a;

    --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,"SimSun",serif;
    --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",-apple-system,"Segoe UI",sans-serif;
    --ease:cubic-bezier(.22,.61,.36,1);
    --spring:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font:15px/1.95 var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;font-weight:400}
::selection{background:rgba(200,169,126,.26)}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#3a3a40}

/* 背景层：一块星野画布 + 一层暗罩。
   就这两层，别再往上叠星云、光束、颗粒了。 */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------------- 开屏加载 ----------------
   这一层压在进站视频上面，等东西都到位了再淡出去 */
#boot{
    position:fixed;inset:0;z-index:97;display:grid;place-items:center;
    background:var(--ink);
    transition:opacity .8s var(--ease),visibility .8s;
}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-in{display:flex;flex-direction:column;align-items:center}
.boot-name{
    font-family:var(--serif);font-size:clamp(22px,3.6vw,31px);letter-spacing:.3em;text-indent:.3em;
    color:#f0f0f2;
    opacity:0;animation:bootin 1.2s var(--spring) .1s forwards;
}
@keyframes bootin{from{opacity:0;transform:translateY(8px);letter-spacing:.5em}to{opacity:1;transform:none;letter-spacing:.3em}}
.boot-bar{
    position:relative;width:172px;height:1px;margin-top:28px;overflow:hidden;
    background:rgba(255,255,255,.09);
}
.boot-bar i{
    position:absolute;left:0;top:0;width:100%;height:100%;display:block;
    transform-origin:left center;transform:scaleX(0);
    background:var(--accent);
    will-change:transform;
}
.boot-num{
    margin-top:14px;font-size:10.5px;letter-spacing:.24em;text-indent:.24em;color:var(--dim2);
    font-variant-numeric:tabular-nums;
    transition:opacity .4s;
}
#boot.gone .boot-num{opacity:0}

/* ---------------- 背景视频 ----------------
   垫在最底下，压一层暗罩保证字看得清 */
.bgvideo{
    position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
    pointer-events:none;opacity:0;
    /* 视频是块动态的背景板，不是给人读的。
       糊一下、褪一下色，画面里原本的字就化成一片会动的东西，
       不然像录屏里的大标题、按钮会跟着浮上来，跟正文抢着看。
       尺寸比视口大 7%（见 galaxy.js 的 scale），糊出来的边正好在屏幕外。 */
    filter:blur(4px) saturate(.35) brightness(.6);
    transition:opacity 2s var(--ease);
    will-change:opacity;
}
/* 视频压到很淡这一档是有意的：它本身也是星空素材，
   跟粒子的点线是一路东西，两边都清楚就会糊成一片，谁也不是主角。
   现在这样只留「底下有东西在慢慢动」的一层感觉，主角是粒子网。
   想彻底关掉，后台「设置」里把背景视频关了就干净了。 */
.bgvideo.on{opacity:.12}
.bgvideo-veil{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(78% 60% at 50% 34%,rgba(10,10,12,.5),rgba(10,10,12,.9) 100%),
        linear-gradient(180deg,rgba(10,10,12,.84),rgba(10,10,12,.56) 34%,rgba(10,10,12,.92));
}

/* ---------------- 进站视频 ---------------- */
.gate{
    position:fixed;inset:0;z-index:90;background:var(--ink);
    transition:opacity .9s var(--ease),visibility .9s;
}
.gate.gone{opacity:0;visibility:hidden}
.gate-passed .gate{display:none}
.gate-video{width:100%;height:100%;object-fit:cover;opacity:.8}
.gate-veil{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(10,10,12,.55),transparent 32%,rgba(10,10,12,.88))}
.gate-word{
    position:absolute;left:0;right:0;bottom:94px;margin:0;text-align:center;
    font-family:var(--serif);font-size:19px;letter-spacing:.4em;text-indent:.4em;
    color:rgba(255,255,255,.7);
}
.gate-foot{position:absolute;right:32px;bottom:34px}
.gate-skip{
    padding:9px 20px;border-radius:99px;color:#cfcfd4;font-size:13px;letter-spacing:.1em;
    border:1px solid var(--line);background:rgba(255,255,255,.04);
    display:flex;align-items:center;gap:8px;
    transition:background .4s var(--ease),border-color .4s;
}
.gate-skip em{font-style:normal;transition:transform .5s var(--spring)}
.gate-skip:hover{background:rgba(255,255,255,.1);border-color:var(--line2)}
.gate-skip:hover em{transform:translate(2px,-2px)}
.gate-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.gate-line i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------------- 顶部导航 ---------------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:60;padding:16px 20px 0;pointer-events:none}
.navpill{
    pointer-events:auto;position:relative;width:max-content;max-width:100%;margin:0 auto;
    display:flex;align-items:center;gap:6px;padding:7px 8px 7px 12px;border-radius:99px;
    background:rgba(16,16,18,.78);border:1px solid var(--line);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:padding .5s var(--ease),background .5s var(--ease);
}
.navpill.small{padding:5px 6px 5px 10px;background:rgba(12,12,14,.92)}
.brand{display:flex;align-items:center;gap:10px;padding-right:10px}
.brand-face{width:31px;height:31px;border-radius:50%;overflow:hidden;flex:none;background:#1a1a1c;
    box-shadow:0 0 0 1px var(--line2)}
/* 头像现在是从 xiangce 里读的，不一定是正方形的图。
   不给 img 定死尺寸的话，方形的正好，长方形的会被压成一条贴在圆上头。
   object-fit:cover 就是按短边裁一刀，管它什么比例都是填满的圆。 */
.brand-face img{width:100%;height:100%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:13.5px;letter-spacing:.1em;font-weight:600}

.navlinks{position:relative;display:flex;align-items:center}
.navlinks a{
    position:relative;z-index:2;padding:8px 15px;font-size:13.5px;color:var(--dim);
    transition:color .4s var(--ease);
}
.navlinks a:hover{color:var(--text)}
.navlinks a.on{color:#fff}
.nav-ink{
    position:absolute;z-index:1;height:30px;border-radius:99px;background:rgba(255,255,255,.07);
    transition:transform .6s var(--spring),width .6s var(--spring),opacity .4s;
    left:0;top:50%;margin-top:-15px;width:0;opacity:0;
}
.navcta{
    display:flex;align-items:center;gap:7px;padding:8px 17px;border-radius:99px;
    border:1px solid var(--line2);font-size:13px;color:var(--text);
    transition:background .4s var(--ease),border-color .4s;
}
.navcta em{font-style:normal;font-size:11px;color:var(--accent);
    transition:transform .5s var(--spring)}
.navcta:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}
.navcta:hover em{transform:translate(2px,-2px)}
.burger{display:none;width:38px;height:34px;border-radius:99px;position:relative}
.burger i{position:absolute;left:11px;width:16px;height:1.5px;background:var(--text);border-radius:2px;
    transition:transform .5s var(--spring),opacity .3s}
.burger i:first-child{top:14px}
.burger i:last-child{top:20px}
.burger.on i:first-child{transform:translateY(3px) rotate(45deg)}
.burger.on i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* 左上角那个小家伙，就它一个 */
.pet{
    position:fixed;left:-18px;top:-16px;z-index:55;width:196px;
    pointer-events:none;user-select:none;
    transform-origin:32% 18%;
    /* 底子就写成「看得见」的，动画只负责加一点摇晃。
       淡入这种事本来想用 opacity:0 + 过渡/动画来做，但那样一来
       它折不折得出来全看动画跑没跑：有人开了系统的「减少动态效果」，
       或者插件把动画一律关掉，它就会一直停在透明那一格，整个不见。
       开屏那层本来就会挡住这一秒，等它淡出去这小人自然就露出来了，
       所以这儿不需要自己再淡一次。 */
    opacity:1;
    animation:swing 4.4s var(--ease) infinite alternate;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));
}
@keyframes swing{
    from{transform:rotate(-3.4deg) translateY(0)}
    to{transform:rotate(3.4deg) translateY(5px)}
}

/* 展开菜单 */
.menu{
    position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;
    padding:0 34px;background:rgba(10,10,12,.95);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;
}
.menu.on{opacity:1;visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:4px}
.menu a{
    display:flex;align-items:baseline;gap:16px;padding:13px 0;
    font-family:var(--serif);font-size:29px;letter-spacing:.08em;color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.05);
    opacity:0;transform:translateY(20px);
    transition:opacity .7s var(--ease),transform .7s var(--spring),color .4s;
}
.menu a:hover{color:var(--accent2)}
.menu.on a{opacity:1;transform:none}
.menu.on a:nth-child(1){transition-delay:.10s}
.menu.on a:nth-child(2){transition-delay:.16s}
.menu.on a:nth-child(3){transition-delay:.22s}
.menu.on a:nth-child(4){transition-delay:.28s}
.menu.on a:nth-child(5){transition-delay:.34s}
.menu-foot{margin:34px 0 0;font-size:12px;letter-spacing:.16em;color:var(--dim2);opacity:0;transition:opacity .8s .4s}
.menu.on .menu-foot{opacity:1}

/* ---------------- 通用 ---------------- */
.sec{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:122px 28px 0;scroll-margin-top:96px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:42px}
.sec-head h2{font-family:var(--serif);font-size:26px;letter-spacing:.1em}
.sec-head .rule{flex:1;height:1px;background:var(--line);margin-left:8px}

.reveal{opacity:0;transform:translateY(18px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

.empty{color:var(--dim2);font-size:13.5px;padding:26px 0 0}

/* ---------------- 首屏 ---------------- */
.hero{
    position:relative;z-index:2;max-width:1180px;margin:0 auto;
    min-height:100dvh;padding:150px 28px 90px;
    display:grid;grid-template-columns:1fr 372px;gap:64px;align-items:center;
}
.hero h1{position:relative;margin:0 0 22px;line-height:.94}
.hero h1 .cn{
    display:block;font-family:var(--serif);font-size:clamp(62px,10vw,112px);
    letter-spacing:.05em;color:#f2f2f4;
}
.hero-line{margin:0 0 16px;font-family:var(--serif);font-size:19px;letter-spacing:.08em;color:#c6c6cc}
.hero-desc{margin:0 0 36px;max-width:31em;color:var(--dim);font-size:14.5px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{
    display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:99px;
    font-size:13.5px;letter-spacing:.1em;
    transition:transform .45s var(--spring),background .4s var(--ease),border-color .4s,color .4s;
}
.btn em{font-style:normal;font-size:11px;
    transition:transform .45s var(--spring),color .4s}
.btn-gold{background:var(--accent);color:var(--on-accent)}
.btn-gold em{color:var(--on-accent)}
.btn-gold:hover{background:var(--accent2);transform:translateY(-2px)}
.btn-gold:hover em{transform:translate(3px,-3px)}
.btn-line{border:1px solid var(--line2);color:var(--dim)}
.btn-line:hover{border-color:rgba(255,255,255,.28);color:var(--text);background:rgba(255,255,255,.04)}
.btn:active{transform:scale(.98)}

.hero-facts{display:flex;gap:38px;margin-top:50px;padding-top:26px;border-top:1px solid var(--line)}
.hero-facts li{display:flex;flex-direction:column}
.hero-facts b{font-family:var(--serif);font-size:25px;letter-spacing:.02em;color:#eeeef2}
.hero-facts span{font-size:11.5px;letter-spacing:.14em;color:var(--dim2);margin-top:2px}

.hero-face{position:relative;justify-self:center}
.face-shell{
    padding:9px;border-radius:150px;background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    transition:transform .8s var(--spring),border-color .5s;
}
.hero-face:hover .face-shell{transform:translateY(-5px);border-color:var(--line2)}
.face-core{border-radius:141px;overflow:hidden;background:#1a1a1c}
.face-core img{width:100%;aspect-ratio:1/1.06;object-fit:cover}
.hero-face figcaption{
    margin-top:20px;display:flex;align-items:center;gap:8px;justify-content:center;
    font-size:11.5px;letter-spacing:.16em;color:var(--dim2);
}
.hero-face figcaption em{font-style:normal;color:var(--dim2);opacity:.75;letter-spacing:.1em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
    animation:pulse 2.6s infinite}
@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.28}
}

/* ---------------- 关于 ---------------- */
.about-grid{display:grid;grid-template-columns:1.42fr .58fr;gap:44px;align-items:start}
.card{
    position:relative;padding:38px 40px;border-radius:16px;
    background:var(--panel);
    border:1px solid var(--line);
    font-size:15px;line-height:2.15;color:#c8c8ce;
}
.minicard{
    display:flex;flex-direction:column;gap:3px;padding:20px 22px;border-radius:12px;
    background:var(--panel);border:1px solid var(--line);margin-bottom:12px;
}
.mini-key{font-size:10.5px;letter-spacing:.22em;color:var(--dim2)}
.minicard b{font-family:var(--serif);font-size:21px;letter-spacing:.04em;color:#eaeef0}
.minicard em{font-style:normal;font-size:12px;color:var(--dim2)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tags li{
    padding:5px 13px;border-radius:99px;font-size:12px;color:var(--dim);
    border:1px solid var(--line);
    transition:color .4s var(--ease),border-color .4s;
}
.tags li:hover{color:var(--text);border-color:var(--line2)}

/* ---------------- 影像 ---------------- */
.stage-grid{display:grid;grid-template-columns:1fr 316px;gap:34px;align-items:start}
.stage-shell{
    padding:8px;border-radius:18px;background:var(--panel);border:1px solid var(--line);
}
.stage-core{position:relative;border-radius:12px;overflow:hidden;background:#000}
.stage-core video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#000}
.stage-cover{position:absolute;inset:0;cursor:pointer;background:#000}
.stage-cover img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform 1.2s var(--ease),opacity .6s}
.stage-cover:hover img{transform:scale(1.03);opacity:.82}
.play-big{
    position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
    background:rgba(255,255,255,.92);display:grid;place-items:center;
    transition:transform .5s var(--spring),background .4s;
}
.play-big i{width:0;height:0;border-left:15px solid #141416;border-top:9px solid transparent;
    border-bottom:9px solid transparent;margin-left:5px}
.play-big:hover{transform:scale(1.07);background:#fff}
.stage-name{margin:16px 2px 0;font-size:12.5px;color:var(--dim2);letter-spacing:.1em}
.stage-name b{margin-left:10px;font-weight:400;color:#cfcfd5;letter-spacing:.04em}

.playlist{display:flex;flex-direction:column;gap:6px;max-height:460px;overflow:auto;padding-right:4px}
.pl-item{
    display:flex;align-items:center;gap:13px;padding:9px 12px;border-radius:10px;cursor:pointer;
    border:1px solid transparent;transition:background .4s var(--ease),border-color .4s;
}
.pl-item:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.pl-item.on{background:rgba(255,255,255,.05);border-color:var(--line2)}
.pl-thumb{width:62px;height:39px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.05);flex:none}
.pl-thumb img{width:100%;height:100%;object-fit:cover}
.pl-title{flex:1;font-size:13.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-item.on .pl-title{color:#e7e7ec}
.pl-play{width:0;height:0;border-left:8px solid var(--dim2);border-top:5px solid transparent;
    border-bottom:5px solid transparent;opacity:0;transition:opacity .4s}
.pl-item:hover .pl-play,.pl-item.on .pl-play{opacity:1;border-left-color:var(--accent)}

/* ---------------- 联系 ---------------- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.way{
    display:flex;align-items:center;gap:17px;padding:22px 24px;border-radius:14px;
    background:var(--panel);
    border:1px solid var(--line);
    transition:transform .6s var(--spring),border-color .5s,background .5s;
}
.way:hover{transform:translateY(-3px);border-color:var(--line2);background:var(--panel2)}

/* 整张卡能点：微信点开二维码，QQ 点开跳去加好友页 */
.way-act{cursor:pointer}
.way-act:focus-visible{outline:2px solid rgba(200,169,126,.5);outline-offset:3px;border-radius:14px}
.way-go{font-style:normal;font-size:11px;color:var(--dim2);
    transition:transform .5s var(--spring),color .4s var(--ease)}
.way-act:hover .way-go{color:var(--accent);transform:translate(2px,-2px)}
.way-face{width:52px;height:52px;border-radius:13px;overflow:hidden;flex:none;
    background:#1a1a1c;
    box-shadow:0 0 0 1px var(--line2)}
.way-face img{width:100%;height:100%;object-fit:cover}
.way-info{flex:1;min-width:0}
.way-info b{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;letter-spacing:.06em}
.way-no{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--dim);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.way-ops{display:flex;flex-direction:column;gap:7px}
.mini{
    padding:6px 13px;border-radius:99px;font-size:12px;color:var(--text);
    background:rgba(255,255,255,.06);border:1px solid var(--line);
    transition:background .4s var(--ease),border-color .4s,color .4s;white-space:nowrap;
}
.mini:hover{background:rgba(255,255,255,.11);border-color:var(--line2)}
.mini.ghost{background:transparent;color:var(--dim)}
.mini.ghost:hover{color:var(--text);border-color:var(--line2)}

/* ---------------- 留言板 ---------------- */
.board{
    position:relative;margin-top:56px;padding:40px;border-radius:18px;
    background:var(--panel);
    border:1px solid var(--line);
    display:grid;grid-template-columns:344px 1fr;gap:46px;align-items:start;
}
.say{display:flex;flex-direction:column;gap:14px;position:sticky;top:112px}
.say-top{display:flex;align-items:center;gap:12px}
.say-top input{
    flex:1;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.04);
    border:1px solid var(--line);outline:none;font-size:13.5px;
    transition:border-color .4s,background .4s;
}
.say-tip{font-size:11.5px;color:var(--dim2);white-space:nowrap}
.say-tip b{color:var(--text);font-weight:600}
.say textarea{
    min-height:132px;resize:vertical;padding:14px 16px;border-radius:10px;line-height:2;
    background:rgba(255,255,255,.04);border:1px solid var(--line);outline:none;font-size:14px;
    transition:border-color .4s,background .4s;
}
.say-top input:focus,.say textarea:focus{border-color:var(--line2);background:rgba(255,255,255,.06)}
.say-top input::placeholder,.say textarea::placeholder{color:var(--dim2)}
.say-bot{display:flex;align-items:center;justify-content:space-between}
.counter{font-size:11.5px;color:var(--dim2);letter-spacing:.06em}
.counter b{color:var(--dim)}
.send{
    display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:99px;
    background:var(--accent);color:var(--on-accent);
    font-size:13.5px;letter-spacing:.1em;
    transition:transform .45s var(--spring),background .4s,opacity .4s;
}
.send em{font-style:normal;font-size:11px;transition:transform .45s var(--spring)}
.send:hover{background:var(--accent2)}
.send:hover em{transform:translate(3px,-3px)}
.send:active{transform:scale(.98)}
.send[disabled]{opacity:.5;pointer-events:none}

.say-list{display:flex;flex-direction:column}
.say-item{position:relative;padding:19px 0 21px 22px;border-left:1px solid var(--line)}
.say-item::before{
    content:"";position:absolute;left:-3px;top:28px;width:5px;height:5px;border-radius:50%;
    background:var(--dim2);
}
.say-item.new::before{background:var(--accent)}
.say-item.new{animation:fadein .8s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.say-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.say-head .who{font-size:14px;font-weight:600;letter-spacing:.04em;color:#e9e9ee}
.say-head .where{font-size:11px;letter-spacing:.08em;color:var(--dim2);
    border:1px solid var(--line);padding:1px 9px;border-radius:99px}
.say-head time{font-size:11px;color:var(--dim2);margin-left:auto}
.say-text{margin:9px 0 0;font-size:14px;line-height:2.05;color:#c1c1c7;word-break:break-word}
.say-reply{
    margin-top:12px;padding:11px 15px;border-radius:8px;font-size:13px;line-height:1.95;
    background:rgba(255,255,255,.035);border-left:2px solid var(--line2);color:#b9b9bf;
}
.say-reply b{color:var(--dim)}
.say-none{padding:34px 0;color:var(--dim2);font-size:13.5px;text-align:center}
.more{
    grid-column:1/-1;justify-self:center;margin-top:6px;padding:9px 26px;border-radius:99px;
    font-size:12.5px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);
    transition:color .4s var(--ease),border-color .4s;
}
.more:hover{color:var(--text);border-color:var(--line2)}

/* ---------------- 足迹 / 地球 ---------------- */
.map-grid{display:grid;grid-template-columns:1fr 344px;gap:40px;align-items:center}
.globe-card{
    position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/.86;
    background:rgba(255,255,255,.02);
    border:1px solid var(--line);
}
/* touch-action 是给手机写的，别删。不写这个，手指在球上拖动会被浏览器
   当成翻页手势接走，canvas 收不到 pointermove，球就怎么拖都不动 */
.globe-card canvas{
    width:100%;height:100%;display:block;
    touch-action:none;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
}
.globe-hint{position:absolute;left:18px;bottom:15px;font-size:11px;letter-spacing:.14em;color:var(--dim2)}
.map-side{display:flex;flex-direction:column;gap:22px}
.bignum{display:flex;flex-direction:column}
.bignum b{font-family:var(--serif);font-size:58px;line-height:1;letter-spacing:.02em;color:#f2f2f4}
.bignum span{font-size:13px;letter-spacing:.14em;color:var(--dim);margin-top:8px}
.bignum em{font-style:normal;font-size:11.5px;color:var(--dim2);margin-top:3px}
.bignum em i{font-style:normal;color:var(--dim)}
.today-line{font-size:12.5px;color:var(--dim2);padding-bottom:16px;border-bottom:1px dashed var(--line)}
.today-line b{color:var(--text);font-size:15px;margin:0 3px}

.region-list{display:flex;flex-direction:column;gap:11px}
.region-list li{display:flex;align-items:center;gap:11px;font-size:12.5px}
.rg-name{width:62px;color:var(--dim);flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.rg-bar i{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.3);
    transform-origin:left;animation:grow 1.4s var(--spring) both}
@keyframes grow{from{transform:scaleX(0)}}
.rg-num{width:26px;text-align:right;color:var(--dim2);font-size:11.5px}
.rg-none{color:var(--dim2);font-size:12.5px}

.recent{display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:1px dashed var(--line)}
.recent li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim)}
.recent li i{width:4px;height:4px;border-radius:50%;background:var(--dim2);flex:none}
.recent li em{font-style:normal;margin-left:auto;color:var(--dim2);font-size:11px}

/* ---------------- 页脚 ---------------- */
.foot{position:relative;z-index:2;margin-top:146px;padding:76px 28px 116px;text-align:center;
    border-top:1px solid var(--line)}
.sign{font-family:var(--serif);font-size:29px;letter-spacing:.3em;color:#ebebef;margin:0;text-indent:.3em}
/* 这底下原来还有一行「页脚那句」，删了。名字下面直接跟日期这行，
   间距就从 9 放开到 20，不然大字下面挤着一行小字，看着像没写完 */
.foot-meta{margin:20px 0 0;font-size:11.5px;color:var(--dim2);letter-spacing:.1em}

/* ---------------- 弹层 ---------------- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(6,6,8,.76);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadein .5s var(--ease)}
.modal-card{
    position:relative;width:316px;max-width:100%;padding:34px 30px 28px;border-radius:18px;text-align:center;
    background:var(--ink2);border:1px solid var(--line2);
    animation:pop .5s var(--spring);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-kind{font-size:11px;letter-spacing:.28em;color:var(--dim);text-indent:.28em}
.qr-box{margin:20px auto 0;width:206px;height:206px;border-radius:12px;overflow:hidden;background:#fff;
    display:grid;place-items:center}
.qr-box img{width:100%;height:100%;object-fit:contain}
.qr-box.none{background:rgba(255,255,255,.05);border:1px dashed var(--line2)}
.qr-none{display:none;margin:18px 0 0;font-size:12.5px;color:var(--dim2)}
.qr-no{margin:15px 0 16px;font-size:15px;letter-spacing:.06em;color:#e8e8ee}
.modal-x{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:50%;font-size:17px;
    color:var(--dim2);transition:background .4s,color .4s}
.modal-x:hover{background:rgba(255,255,255,.07);color:#fff}

.tip{
    position:fixed;left:50%;bottom:38px;z-index:95;transform:translate(-50%,26px);
    padding:11px 24px;border-radius:99px;font-size:13px;letter-spacing:.06em;
    background:#1a1a1d;border:1px solid var(--line2);color:#e8e8ee;
    opacity:0;visibility:hidden;transition:opacity .5s var(--spring),transform .5s var(--spring),visibility .5s;
}
.tip.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tip.bad{border-color:rgba(217,138,138,.5);color:#f0c4c4}

/* ---------------- 点击 / 拖动的画布 ---------------- */
#spark{position:fixed;inset:0;z-index:75;pointer-events:none}

/* ---------------- 窄屏 ---------------- */
@media (max-width:1000px){
    .hero{grid-template-columns:1fr;gap:52px;padding-top:132px;text-align:left}
    .hero-face{justify-self:start;width:246px}
    .about-grid,.stage-grid,.map-grid{grid-template-columns:1fr;gap:30px}
    .board{grid-template-columns:1fr;gap:34px;padding:30px 26px}
    .say{position:static}
    .playlist{max-height:none}
}
@media (max-width:720px){
    .sec{padding:88px 20px 0}
    .hero{padding:118px 20px 70px}
    .navlinks,.navcta{display:none}
    .burger{display:block}
    .ways{grid-template-columns:1fr}
    .hero-facts{gap:26px}
    .hero-facts b{font-size:21px}
    .card{padding:28px 24px}
    .pet{left:-12px;top:-10px;width:136px}
    .foot{padding:60px 20px 96px;margin-top:100px}
    .say-head time{margin-left:0;width:100%}
    .sec-head h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001s !important;transition-duration:.001s !important}
    html{scroll-behavior:auto}
}