@charset "UTF-8";
/* ============================================================
   XIUYAO · 秀出自己
   极简黑白个人主页 / 深浅双主题 / 全设备自适应
   ============================================================ */

/* ---------- 1. 主题变量 ---------- */
:root{
  color-scheme: light;
  --bg:#FFFFFF;
  --bg-2:#F4F4F3;
  --fg:#0A0A0A;
  --fg-2:#565656;
  --fg-3:#9B9B9B;
  --line:rgba(10,10,10,.14);
  --line-2:rgba(10,10,10,.28);
  --inv-bg:#0A0A0A;
  --inv-fg:#FFFFFF;
  --inv-fg-2:rgba(255,255,255,.62);
  --hero-fg:#FFFFFF;
  --hero-fg-2:rgba(255,255,255,.70);
  --hero-line:rgba(255,255,255,.26);
  --hero-scrim:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.86) 100%);
  --grain-opacity:.30;
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 18px 40px -28px rgba(10,10,10,.30);

  --sans:"Archivo","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --serif:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.75,.28,1);
  --step:clamp(56px, 7vw, 96px);
  /* 栏目内容与栏目标题（序号）左对齐 */
  --sec-indent:0;
}

/* 深色：手动切换优先 */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0A0A0A;
  --bg-2:#141414;
  --fg:#F2F2F0;
  --fg-2:#A6A6A2;
  --fg-3:#6E6E6A;
  --line:rgba(242,242,240,.15);
  --line-2:rgba(242,242,240,.30);
  --inv-bg:#F2F2F0;
  --inv-fg:#0A0A0A;
  --inv-fg-2:rgba(10,10,10,.62);
  --hero-scrim:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.66) 46%, rgba(0,0,0,.92) 100%);
  --grain-opacity:.22;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -28px rgba(0,0,0,.9);
}

/* 深色：跟随系统（未手动指定时生效） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0A0A0A;
    --bg-2:#141414;
    --fg:#F2F2F0;
    --fg-2:#A6A6A2;
    --fg-3:#6E6E6A;
    --line:rgba(242,242,240,.15);
    --line-2:rgba(242,242,240,.30);
    --inv-bg:#F2F2F0;
    --inv-fg:#0A0A0A;
    --inv-fg-2:rgba(10,10,10,.62);
    --hero-scrim:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.66) 46%, rgba(0,0,0,.92) 100%);
    --grain-opacity:.22;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -28px rgba(0,0,0,.9);
  }
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0;}
li{list-style:none;}

h1,h2,h3,p{margin:0;}

::selection{background:var(--fg);color:var(--bg);}

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

.mono{
  font-family:var(--mono);
  font-size:.72em;
  letter-spacing:.16em;
  font-weight:400;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:16px;top:-60px;
  z-index:200;
  padding:10px 16px;
  background:var(--fg);
  color:var(--bg);
  font-size:.85rem;
  transition:top .3s var(--ease);
}
.skip-link:focus{top:16px;}

/* 颗粒质感 */
.grain{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .grain{mix-blend-mode:screen;}
}

/* ---------- 3. 布局容器 ---------- */
.container{
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 60px);
  padding-left:max(clamp(20px, 5vw, 60px), env(safe-area-inset-left));
  padding-right:max(clamp(20px, 5vw, 60px), env(safe-area-inset-right));
}

.section{
  padding-block:var(--step);
  border-top:1px solid var(--line);
  scroll-margin-top:70px;
}
.section-alt{background:var(--bg-2);}

/* ---------- 4. 顶栏 ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
  }
  :root[data-theme="dark"] .topbar{background:rgba(10,10,10,.76);}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .topbar{background:rgba(10,10,10,.76);}
  }
}

.topbar-inner{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:58px;
  padding-block:8px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
}
.brand-logo{
  width:28px;height:28px;
  flex:0 0 auto;
  object-fit:contain;
  transition:transform .45s var(--ease);
}
.brand:hover .brand-logo{transform:translateX(3px);}
.brand-name{
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.18em;
}

.topnav{
  display:flex;
  align-items:center;
  gap:clamp(12px, 2.4vw, 26px);
  margin-left:auto;
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--fg-2);
}
.topnav a{
  position:relative;
  padding-block:4px;
  transition:color .28s;
}
.topnav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--fg);
  transition:width .32s var(--ease);
}
.topnav a:hover{color:var(--fg);}
.topnav a:hover::after{width:100%;}

.theme-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border:1px solid var(--line-2);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--fg-2);
  white-space:nowrap;
  transition:background-color .3s, color .3s, border-color .3s;
}
.theme-btn:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg);}
.theme-ico{font-size:.9rem;line-height:1;}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:82vh;
  padding-block:120px clamp(56px, 9vh, 92px);
  overflow:hidden;
  background:var(--fg);
  color:var(--hero-fg);
  isolation:isolate;
}
@supports (min-height:100dvh){
  .hero{min-height:82dvh;}
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero-fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, #3a3a3a 0%, #1a1a1a 48%, #0a0a0a 100%);
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.82);
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero-img.is-loaded{opacity:1;}

.hero-scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--hero-scrim);
}

.hero-inner{
  position:relative;
  width:100%;
}

/* 天气 / 时钟 / 今日宜忌 */
.widgets{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(22px, 3.6vw, 58px);
}

.widget{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding-left:clamp(16px, 2vw, 26px);
  border-left:1px solid var(--hero-line);
}
.widget:first-child{
  padding-left:0;
  border-left:0;
}

.widget-label{
  font-size:clamp(.62rem, 1vw, .7rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--hero-fg-2);
}

.widget-main{
  font-size:clamp(1.35rem, 2.9vw, 2.05rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--hero-fg);
}

.widget-sub{
  max-width:26ch;
  font-size:clamp(.76rem, 1.3vw, .86rem);
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--hero-fg-2);
}

.hero-credit{
  margin-top:clamp(20px, 3vw, 30px);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.5);
}

.hero-scroll{
  position:absolute;
  right:clamp(20px, 5vw, 60px);
  bottom:clamp(56px, 9vh, 92px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:.62rem;
  letter-spacing:.24em;
  color:var(--hero-fg-2);
}
.hero-scroll-line{
  width:1px;
  height:52px;
  background:var(--hero-line);
  position:relative;
  overflow:hidden;
}
.hero-scroll-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-fg);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-100%);}
  60%,100%{transform:translateY(100%);}
}

/* ---------- 6. 区块标题 ---------- */
.sec-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
}
.sec-index{
  color:var(--fg-3);
  font-size:.74rem;
}
.sec-title{
  font-size:clamp(1.5rem, 3.6vw, 2.2rem);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
}
.sec-rule{
  flex:1 1 40px;
  height:1px;
  min-width:24px;
  background:var(--line-2);
}
.sec-en{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.sec-note{
  margin-top:clamp(20px, 2.6vw, 28px);
  padding-left:var(--sec-indent);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--fg-3);
}

/* ---------- 7. 关于我 ---------- */
.about{
  margin-top:clamp(34px, 5vw, 58px);
  padding-left:var(--sec-indent);
  display:grid;
  grid-template-columns:minmax(0, 300px) minmax(0, 1fr);
  gap:clamp(32px, 6vw, 84px);
  align-items:start;
}

.avatar-img{
  width:clamp(96px, 22vw, 148px);
  height:clamp(96px, 22vw, 148px);
  object-fit:cover;
  border:1px solid var(--line-2);
  border-radius:50%;
  margin:0 auto 30px;
  filter:grayscale(1);
  background:var(--inv-bg);
}

.facts{border-top:1px solid var(--line);}
.fact{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:.86rem;
}
.fact dt{
  flex:0 0 58px;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--fg-3);
  font-family:var(--mono);
}
.fact dd{color:var(--fg);}

.dot-live{
  display:inline-block;
  width:7px;height:7px;
  margin-right:8px;
  border-radius:50%;
  background:var(--fg);
  vertical-align:middle;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.35;transform:scale(.78);}
}

.about-right{
  max-width:64ch;
  font-size:clamp(.95rem, 1.6vw, 1.02rem);
  line-height:2;
  color:var(--fg-2);
}
.about-lead{
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight:700;
  line-height:1.7;
  color:var(--fg);
  margin-bottom:18px;
}
.about-right p + p{margin-top:16px;}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.tags li{
  padding:5px 13px;
  border:1px solid var(--line);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--fg-2);
  transition:background-color .3s, color .3s, border-color .3s;
}
.tags li:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg);}

/* 触摸设备不保留 hover 残留 */
@media (hover: none){
  .tags li:hover{background:none;color:var(--fg-2);border-color:var(--line);}
}

/* ---------- 8.1 旗下站点：整行列表 ---------- */
.sites{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:clamp(28px, 4vw, 48px);
  padding-left:var(--sec-indent);
}
.site-row{
  border:1px solid var(--line);
  background:var(--bg);
}
.section-alt .site-row{background:var(--bg-2);}
.site-row + .site-row{border-top:0;}
.site-link{
  position:relative;
  display:grid;
  grid-template-columns:3.6rem minmax(0, 1fr) minmax(0, 1.15fr) 7rem 2rem;
  align-items:center;
  gap:1rem;
  padding:clamp(17px, 2.2vw, 26px) clamp(16px, 2.4vw, 24px);
  isolation:isolate;
  transition:color .45s var(--ease);
}
.site-link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--inv-bg);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.site-link:hover,
.site-link:focus-visible{color:var(--inv-fg);}
.site-link:hover::before,
.site-link:focus-visible::before{transform:scaleY(1);}
.s-idx{
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--fg-3);
  transition:color .45s;
}
.site-link:hover .s-idx,
.site-link:focus-visible .s-idx{color:var(--inv-fg-2);}
.s-name{
  font-size:clamp(1.1rem, 1.85vw, 1.45rem);
  font-weight:600;
  letter-spacing:.05em;
}
.s-desc{
  font-size:.86rem;
  letter-spacing:.02em;
  color:var(--fg-3);
  transition:color .45s;
}
.site-link:hover .s-desc,
.site-link:focus-visible .s-desc{color:var(--inv-fg-2);}
.s-tag{
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-3);
  text-align:right;
  transition:color .45s;
}
.site-link:hover .s-tag,
.site-link:focus-visible .s-tag{color:var(--inv-fg-2);}
.s-arrow{
  font-size:1rem;
  text-align:right;
  transition:transform .45s var(--ease);
}
.site-link:hover .s-arrow,
.site-link:focus-visible .s-arrow{transform:translate(.2rem, -.2rem);}

/* ---------- 9. 联系方式：单卡片 ---------- */
.contact-solo{
  margin-top:clamp(28px, 4vw, 52px);
  padding-left:var(--sec-indent);
  padding-block:clamp(18px, 2.6vw, 28px) clamp(22px, 3.4vw, 34px);
}
/* 联系方式与页脚之间只保留一层留白，避免区块底部叠加过大间距 */
#contact{padding-bottom:clamp(30px, 4.5vw, 56px);}
#contact .contact-solo{padding-bottom:0;}
.cs-body{
  margin-top:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 26rem);
  justify-content:space-between;
  gap:clamp(28px, 5vw, 64px);
  align-items:start;
}
.cs-mail-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.cs-label{
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.cs-mail{
  display:inline-flex;
  align-items:center;
  gap:clamp(6px, 1.2vw, 13px);
  margin-top:9px;
  font-family:var(--mono);
  font-size:clamp(1.25rem, 2.6vw, 2.1rem);
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--fg);
  overflow-wrap:anywhere;
}
.cs-mail-ic{
  width:.82em;height:.82em;
  flex:0 0 auto;
  color:var(--fg-3);
  transition:color .35s;
}
.cs-mail:hover .cs-mail-ic{color:var(--fg);}
.cs-mail-text{position:relative;}
.cs-mail-text::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.04em;
  height:2px;
  background:var(--fg);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease);
}
.cs-mail:hover .cs-mail-text::after{transform:scaleX(1);}
.cs-mail-arw{
  font-size:.55em;
  line-height:1;
  color:var(--fg-3);
  transition:transform .5s var(--ease);
}
.cs-mail:hover .cs-mail-arw{transform:translate(.16em, -.16em);}
.cs-rows{
  display:flex;
  flex-direction:column;
  gap:0;
}
.cs-row{
  display:grid;
  grid-template-columns:1.05rem clamp(4rem, 7vw, 5rem) minmax(0, 1fr) auto;
  align-items:center;
  column-gap:.7rem;
  width:100%;
  padding:.85rem clamp(14px, 2vw, 18px);
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
}
.cs-row + .cs-row{border-top:0;}
.cs-ic{
  width:1rem;height:1rem;
  color:var(--fg-3);
}
.cs-k{
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.cs-v{
  font-size:.94rem;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  text-align:left;
}
.cs-copy{
  justify-self:end;
  padding:.3rem .62rem;
  border:1px solid var(--line-2);
  background:transparent;
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--fg-2);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background-color .28s, color .28s, border-color .28s;
}
.cs-copy:hover,
.cs-copy:focus-visible{
  background:var(--inv-bg);
  color:var(--inv-fg);
  border-color:var(--inv-bg);
  outline:none;
}
.cs-foot{
  margin-top:clamp(14px, 2.2vw, 22px);
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--fg-3);
}

/* 复制提示 */
.toast{
  position:fixed;
  left:50%;
  bottom:clamp(22px, 4vw, 42px);
  z-index:120;
  padding:.6rem 1.1rem;
  background:var(--inv-bg);
  color:var(--inv-fg);
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.08em;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%, 10px);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%, 0);}

/* ---------- 10. 页脚 ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(34px, 6vw, 62px) clamp(28px, 4.4vw, 42px);
  background:var(--bg);
}
.foot-top{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px, 4vw, 48px);
  flex-wrap:wrap;
}
/* 一言下方的线：贯穿整行，避免回到顶部处断开 */
.foot-top::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--line);
}
.foot-quote{
  flex:1 1 420px;
  padding-bottom:clamp(26px, 4vw, 40px);
}
.foot-quote-text{
  max-width:46ch;
  font-family:var(--serif);
  font-size:clamp(1.15rem, 2.8vw, 1.75rem);
  line-height:1.85;
  letter-spacing:.04em;
  color:var(--fg);
  text-wrap:pretty;
  transition:opacity .5s var(--ease);
}
.foot-quote-from{
  display:block;
  margin-top:clamp(12px, 1.8vw, 18px);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--fg-3);
  transition:opacity .5s var(--ease);
}
.is-fading .foot-quote-text,
.is-fading .foot-quote-from{opacity:0;}

.to-top{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;
  font-size:.66rem;
  letter-spacing:.18em;
  color:var(--fg-2);
  transition:color .3s;
}
.to-top:hover{color:var(--fg);}
/* 与「— 作者」那行平齐：抵消一言下方的留白 */
.to-top{margin-bottom:clamp(26px, 4vw, 40px);}
@media (max-width:640px){
  /* 一言换行后，「回到顶部」脱离换行，与「— 作者」那行对齐在右侧 */
  .foot-quote{padding-bottom:20px;}
  .to-top{
    position:absolute;
    right:0;
    bottom:20px;
    margin:0;
  }
}

.foot-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-top:clamp(20px, 2.6vw, 28px);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--fg-2);
}
.foot-item{transition:color .28s;}
a.foot-item{
  position:relative;
  border-bottom:1px solid transparent;
}
a.foot-item:hover{color:var(--fg);border-bottom-color:var(--line-2);}
.foot-sep{color:var(--fg-3);}

.foot-uptime{
  margin-top:10px;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--fg-3);
  /* 等宽数字：秒数跳动时宽度不抖 */
  font-variant-numeric:tabular-nums;
}
.foot-built{
  margin-top:22px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--fg-3);
}

/* ---------- 11. 载入与滚动动画 ---------- */
.reveal-load{
  opacity:0;
  transform:translateY(24px);
  animation:riseIn .9s var(--ease) forwards;
}
.widgets{animation-delay:.10s;}
.hero-credit{animation-delay:.30s;}

@keyframes riseIn{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

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

/* ---------- 12. 响应式 ---------- */
@media (max-width:900px){
  /* SCROLL 收进底部留白，避开小组件 */
  .hero-scroll{
    right:clamp(16px, 4vw, 28px);
    bottom:8px;
    gap:6px;
  }
  .hero-scroll-line{height:28px;}
  .site-link{
    grid-template-columns:2.4rem minmax(0, 1fr) 2rem;
    grid-template-areas:
      "idx name arrow"
      ". desc desc";
    row-gap:.35rem;
  }
  .s-idx{grid-area:idx;}
  .s-name{grid-area:name;}
  .s-desc{grid-area:desc;}
  .s-tag{display:none;}
  .s-arrow{grid-area:arrow;}
  .cs-body{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(22px, 4vw, 32px);
  }
}

@media (max-width:860px){
  .about{grid-template-columns:minmax(0, 1fr);gap:34px;}
  .avatar-img{margin-bottom:22px;}
  .facts{max-width:none;}
}

@media (max-width:720px){
  .topnav{display:none;}
  .theme-btn{margin-left:auto;}
  .hero{padding-top:104px;}
  /* 三个信息块改纵向堆叠：左侧竖线换成顶部横线 */
  .widgets{flex-direction:column;gap:0;}
  .widget{width:100%;padding-left:0;padding-block:16px;border-left:0;border-top:1px solid var(--hero-line);}
  .widget:first-child{padding-top:0;border-top:0;}
}

@media (max-width:520px){
  body{font-size:15px;}
  .container{padding-inline:20px;}
  .foot-row{gap:6px 10px;font-size:.74rem;}
  .foot-sep{display:none;}
  .foot-row .foot-item{flex:0 0 100%;}
  .theme-txt{display:none;}
}

/* 横屏矮屏：避免 hero 过高 */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:92px 56px;}
}

/* ---------- 13. 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal-load,.reveal{opacity:1;transform:none;}
  .hero-scroll-line::after{display:none;}
}

/* ---------- 14. 打印 ---------- */
@media print{
  .topbar,.hero-scroll,.grain{display:none;}
  .hero{min-height:auto;background:#fff;color:#000;}
  .hero-scrim,.hero-media{display:none;}
  .foot-quote-text,.foot-quote-from,.foot-row,.foot-uptime,.foot-built,
  .hero-credit,.widget-label,.widget-main,.widget-sub{color:#000;}
  .foot-quote,.widget{border-color:#000;}
  .reveal,.reveal-load{opacity:1;transform:none;}
}