/* 只有夜晚：深蓝夜空，浅色星光是唯一的强调色。 */
:root{
 --paper:#0b1024;
 --ink:#dfe5f7;
 --ink-soft:#a9b3d6;
 --line:rgba(223,229,247,.18);
 --card:#141a33;
 --field:#10162d;
 --danger:#ffb4a8;
 --shadow:0 18px 40px -18px rgba(0,0,0,.75);
 --radius:6px;
 --ease:cubic-bezier(.16,1,.3,1);
 --display:'ZCOOL KuaiLe','PingFang SC','Hiragino Sans GB','Noto Sans SC',sans-serif;
 --body:'Outfit','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
 min-height:100dvh;background:var(--paper);color:var(--ink);
 font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body[data-sky="corner"] #sky{opacity:.7}

.skip-link{position:absolute;left:16px;top:-60px;padding:8px 12px;background:var(--ink);color:var(--paper);border-radius:var(--radius);z-index:30}
.skip-link:focus{top:12px}

/* ---------- 加载动画：页面超过 1 秒还没加载完才会出现 ---------- */
#loader{display:none}
html.is-loading #loader,html.is-loaded #loader{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--paper)}
html.is-loading #loader{opacity:0;animation:loader-in .2s ease 1s forwards}
html.is-loaded #loader{opacity:1;transition:opacity .3s ease;pointer-events:none}
html.is-loaded.is-gone #loader{opacity:0}
.loader-box{display:flex;flex-direction:column;gap:10px;width:min(240px,70vw)}
.loader-label{font:15px/1 var(--mono);letter-spacing:.04em}
.loader-track{height:22px;padding:3px;border:2px solid var(--ink)}
.loader-bar{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 13px);animation:loader-fill 4s steps(18,end) forwards}
html.is-loaded .loader-bar{width:100%;animation:none}
@keyframes loader-in{to{opacity:1}}
@keyframes loader-fill{0%{width:0}60%{width:70%}100%{width:90%}}

/* ---------- 页面骨架 ---------- */
.shell{
 position:relative;z-index:1;min-height:100dvh;
 display:grid;grid-template-rows:auto 1fr auto;
 padding:24px clamp(20px,5vw,64px) 22px;
 pointer-events:none;
}
.shell a,.shell button,.shell main,.shell input,.shell textarea{pointer-events:auto}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.mark{font:400 1.15rem/1 var(--display);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.mark span{display:inline-block;transition:transform .6s var(--ease)}
.mark:hover span{transform:rotate(180deg) scale(1.2)}

.nav{display:flex;gap:clamp(16px,2.6vw,30px)}
.nav a{
 position:relative;text-decoration:none;font-size:.98rem;color:var(--ink-soft);padding:4px 0;
 transition:color .25s ease;
}
.nav a::after{
 content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:currentColor;
 transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.text-button,.email-link{
 font-size:.92rem;color:var(--ink);text-decoration:none;white-space:nowrap;
 background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
 transition:background-size .35s var(--ease);padding-bottom:2px;
}
.text-button:hover,.email-link:hover{background-size:100% 1px}

.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:40px}
.foot-controls{display:flex;gap:22px}
.music-control .music-note{display:inline-block;margin-right:4px}
.music-control[aria-pressed="true"] .music-note{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-8deg)}}

/* ---------- 首页 ---------- */
.home main{
 align-self:center;width:min(100%,420px);
 margin-left:clamp(0px,6vw,96px);position:relative;padding:4vh 0;
}
h1{font:400 clamp(2.5rem,4.6vw,3.5rem)/1.15 var(--display);margin:0 0 .45em;letter-spacing:.01em}
.bio{margin:0 0 28px;font-size:1.06rem;line-height:1.85;color:var(--ink-soft);max-width:26em}

.featured{display:block;width:min(100%,300px);text-decoration:none;margin-bottom:28px}
.featured figure{margin:0}
.cover{
 position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);
 border:1.5px solid var(--ink);background:var(--paper);
 transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cover img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .5s ease}
/* 星光色双色调：暗部保持夜色，亮部变成星光色。悬停时还原真实颜色。 */
.cover::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:darken;transition:opacity .5s ease}
.featured:hover .cover,.featured:focus-visible .cover{transform:translateY(-3px) rotate(-.6deg);box-shadow:var(--shadow)}
.featured:hover .cover img,.featured:focus-visible .cover img{filter:none}
.featured:hover .cover::after,.featured:focus-visible .cover::after{opacity:0}
.featured:active .cover{transform:scale(.98)}
.featured figcaption{margin-top:10px;font-size:.92rem}

.socials{display:flex;flex-wrap:wrap;gap:10px 24px}
.socials a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:4px 0;transition:transform .3s var(--ease)}
.socials a:hover,.socials a[aria-expanded="true"]{transform:translateY(-2px)}
.socials a:active{transform:scale(.97)}

.icon{
 width:17px;height:17px;flex:none;background:currentColor;
 -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;
}
.icon[data-icon="xiaohongshu"]{--icon:url(assets/icons/xiaohongshu.svg)}
.icon[data-icon="x"]{--icon:url(assets/icons/x.svg)}
.icon[data-icon="douyin"]{--icon:url(assets/icons/douyin.svg)}

.account-card{
 position:absolute;z-index:3;width:250px;padding:16px 16px 14px;
 background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
 animation:card-in .28s var(--ease);
}
.account-card[hidden]{display:none}
.account-card::after{
 content:"";position:absolute;left:var(--tip-left,40px);bottom:-7px;width:12px;height:12px;
 background:var(--card);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);
}
.account-card.below::after{bottom:auto;top:-7px;transform:rotate(225deg)}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}}
.account-close{position:absolute;top:6px;right:10px;font-size:1.2rem;line-height:1;padding:4px;color:var(--ink-soft)}
.account-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.account-icon{width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;background:var(--ink);color:var(--card)}
.account-icon .icon{width:19px;height:19px}
.account-icon .icon[data-icon="xiaohongshu"]{width:30px;height:30px}
.account-platform{display:block;font-weight:500}
.account-handle{display:block;font-size:.86rem;color:var(--ink-soft)}
.account-count{margin:0 0 10px;font-size:.9rem;color:var(--ink-soft)}
.account-count strong{font:400 1.5rem/1 var(--display);color:var(--ink);margin-right:2px}
.account-count[hidden],.account-description[hidden]{display:none}
.account-description{margin:0 0 12px;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.account-link{font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.account-link:hover{border-color:var(--ink)}

.sky-hint{
 position:fixed;z-index:1;margin:0;transform:translate(-50%,0);
 font-size:.82rem;letter-spacing:.08em;color:var(--ink-soft);pointer-events:none;transition:opacity 1s ease;
}
.sky-hint.gone{opacity:0}

/* ---------- 子页面通用 ---------- */
.content main{
 width:min(100%,780px);margin:0 0 0 clamp(0px,6vw,96px);
 padding:clamp(40px,8vh,88px) 0 72px;
}
.content h1{font-size:clamp(2.2rem,4vw,3.1rem)}
.lead{margin:0;font-size:1.06rem;line-height:1.8;color:var(--ink-soft);max-width:34em}
.block{margin-top:64px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.block-head h2{margin:0;font:500 1.08rem/1.4 var(--body)}
.block-head span{font-size:.85rem;color:var(--ink-soft)}

.button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
 min-height:42px;padding:0 20px;border-radius:var(--radius);
 background:var(--ink);color:var(--paper);font-weight:500;text-decoration:none;
 transition:transform .2s var(--ease),box-shadow .3s var(--ease);
}
.button:hover{box-shadow:0 10px 26px -12px rgba(223,229,247,.55);transform:translateY(-1px)}
.button:active{transform:scale(.98)}
.button.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
.button.ghost:hover{border-color:var(--ink);box-shadow:none}

.field{display:grid;gap:8px}
.field label{font-size:.92rem;font-weight:500}
.input{
 width:100%;padding:11px 14px;border-radius:var(--radius);
 background:var(--field);color:var(--ink);border:1.5px solid var(--line);font:inherit;
 transition:border-color .2s ease;
}
.input::placeholder{color:var(--ink-soft);opacity:.8}
.input:focus{outline:none;border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--danger)}
textarea.input{resize:vertical;min-height:110px;line-height:1.7}
.field-error{margin:0;font-size:.85rem;color:var(--danger);min-height:0}
.field-error:empty{display:none}
.status{margin:12px 0 0;font-size:.92rem;min-height:1.5em}
.status.error{color:var(--danger)}

/* ---------- 作品页 ---------- */
.tabbed{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.tab-list{position:relative;display:flex;flex-direction:column;gap:2px}
.tab-list button{
 position:relative;z-index:1;display:flex;align-items:baseline;gap:10px;text-align:left;
 padding:10px 12px;border-radius:var(--radius);color:var(--ink-soft);transition:color .25s ease;
}
.tab-list button:hover,.tab-list button[aria-selected="true"]{color:var(--ink)}
.tab-star{font:700 .8rem/1 var(--mono);display:inline-block;transition:transform .5s var(--ease)}
.tab-list button[aria-selected="true"] .tab-star{transform:rotate(90deg) scale(1.25)}
.tab-kind{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.tab-glider{
 position:absolute;z-index:0;left:0;top:0;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--card);
 transition:left .2s var(--ease),top .2s var(--ease),width .2s var(--ease),height .2s var(--ease);pointer-events:none;
}
.tab-view>*{animation:fade-up .45s var(--ease)}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}}

.frame{border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--card);display:block;text-decoration:none}
.frame-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;font-size:.78rem;color:var(--ink-soft);border-bottom:1.5px solid var(--ink)}
.frame-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--field)}
.frame-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.frame:hover .frame-art img{transform:scale(1.03)}
.sample-tag{
 display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);
 font-size:.72rem;font-weight:400;color:var(--ink-soft);vertical-align:middle;
}
.project-copy h3{margin:20px 0 6px;font:400 1.7rem/1.25 var(--display)}
.project-copy p{margin:0 0 14px;line-height:1.8;color:var(--ink-soft);max-width:36em}
.links{display:flex;flex-wrap:wrap;gap:8px 20px}
.links a{font-size:.94rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.links a:hover{border-color:var(--ink)}
.links .muted{font-size:.9rem;color:var(--ink-soft)}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;position:relative}
.brand-grid button{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:96px;
 border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink-soft);
 transition:border-color .25s ease,color .25s ease,transform .3s var(--ease);
}
.brand-grid button:hover{color:var(--ink);transform:translateY(-2px)}
.brand-grid button[aria-selected="true"]{border-color:var(--ink);color:var(--ink);background:var(--card)}
.brand-grid .icon{width:26px;height:26px}
.brand-name{font-size:.9rem}
.brand-view{margin-top:18px}
.video-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.video{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:start;text-decoration:none}
.video img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1.5px solid var(--line);transition:border-color .25s ease}
.video:hover img{border-color:var(--ink)}
.video strong{display:block;font-weight:500;margin-bottom:4px}
.video span{display:block;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}

.contact{margin-top:80px}
.contact h2{margin:0 0 10px;font:400 clamp(1.8rem,3.4vw,2.4rem)/1.2 var(--display)}
.contact a{font-size:1.05rem}

/* ---------- 留言簿 ---------- */
.notes{columns:2 260px;column-gap:16px}
.note{
 break-inside:avoid;margin:0 0 16px;padding:16px 18px;border-radius:var(--radius);
 background:var(--card);border:1.5px solid var(--line);
}
.note:nth-child(3n+1){transform:rotate(-.5deg)}
.note:nth-child(3n+2){transform:rotate(.4deg)}
.note.is-new{border-color:var(--ink);animation:fade-up .6s var(--ease)}
.note time{display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.note p{margin:0;line-height:1.75;overflow-wrap:anywhere}
.note-name{font-weight:500}
.empty{color:var(--ink-soft);margin:0 0 12px}
.skeleton{height:84px;border-radius:var(--radius);background:linear-gradient(90deg,var(--card) 0%,#1b2242 50%,var(--card) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;margin-bottom:16px;break-inside:avoid}
@keyframes shimmer{to{background-position:-200% 0}}
.more{margin-top:6px}
.sign{margin-top:36px}
.compose{
 margin-top:4px;padding:22px;border-radius:var(--radius);background:var(--card);border:1.5px solid var(--ink);
 display:grid;gap:18px;max-width:520px;animation:fade-up .4s var(--ease);
}
.compose[hidden]{display:none}
.compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.counter{font:13px var(--mono);color:var(--ink-soft)}
.actions{display:flex;gap:10px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-note{margin:14px 0 0;font-size:.84rem;color:var(--ink-soft);max-width:34em}

/* ---------- 小店 ---------- */
.shop main{align-self:center;padding-top:0}
.shop-form{margin-top:32px;max-width:460px}
.shop-row{display:flex;gap:10px}
.shop-row .input{flex:1}

/* ---------- 入场 ---------- */
/* 内容从后台加载回来之前先藏起来，避免先闪一下默认文字。 */
html[data-pending] main,html[data-pending] .foot{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
 html:not([data-pending]) :is(.top,main>*,.foot){animation:rise .9s var(--ease) both}
 html[data-pending] .top{animation:rise .9s var(--ease) both}
 html:not([data-pending]) main>*:nth-child(1){animation-delay:.08s}
 html:not([data-pending]) main>*:nth-child(2){animation-delay:.16s}
 html:not([data-pending]) main>*:nth-child(3){animation-delay:.24s}
 html:not([data-pending]) main>*:nth-child(4){animation-delay:.32s}
 html:not([data-pending]) main>*:nth-child(n+5){animation-delay:.4s}
 html:not([data-pending]) .foot{animation-delay:.4s}
 html:not([data-pending]) main>.account-card{animation:card-in .28s var(--ease)}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- 手机 ---------- */
@media (max-width:860px){
 .shell{padding:18px 16px 18px}
 .home main{margin:0 auto;text-align:center;align-self:start;padding-top:7vh}
 .home h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
 .bio,.featured{margin-left:auto;margin-right:auto}
 .socials{justify-content:center}
 .account-card{text-align:left}
 .content main{margin:0;padding-top:40px}
 .tabbed{grid-template-columns:1fr;gap:18px}
 .tab-list{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
 .tab-list::-webkit-scrollbar{display:none}
 .tab-list button{flex:none}
 .tab-kind{display:none}
 .video{grid-template-columns:110px 1fr}
 .shop-row{flex-direction:column}
}
@media (max-width:420px){
 .mark{font-size:0}
 .mark span{font-size:1.15rem}
 .nav{gap:16px}
}
@media (hover:none){.sky-hint{display:none}}