/* ==========================================================================
   site.css — 尊龙人生主页 · 共享外壳
   书脊轨道 / 纸纹 / 矿物色盘 / 等宽索引
   ========================================================================== */

:root{
  --paper:#FBF8F0;
  --sand:#F4EFE4;
  --rock:#3F4648;
  --ink:#252B2C;
  --gold:#C9A86A;
  --goji:#A64B3C;
  --goji-deep:#8C3D30;
  --river:#4F7C78;
  --celadon:#DCE8E2;
  --clay:#B8795A;
  --line:#D9D4C8;

  --rail-w:288px;
  --maxw:1360px;

  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; }
[hidden]{ display:none !important; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 页面底色与中文排版 ---------- */
body{
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.75;
  color:var(--rock);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(63,70,72,.028) 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 92% -8%, rgba(201,168,106,.14), transparent 62%),
    radial-gradient(90% 62% at -6% 108%, rgba(79,124,120,.10), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media (min-width:1024px){
  body{ padding-left:var(--rail-w); }
}

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

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

/* ---------- 跳至主要内容 ---------- */
.skip-link{
  position:fixed;
  top:.7rem; left:.7rem;
  z-index:220;
  padding:.6rem 1.05rem;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.12em;
  text-decoration:none;
  border-radius:6px;
  transform:translateY(-180%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ==========================================================================
   头部 · 书脊轨道
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--sand);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(37,43,44,.05);
}

.rail{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:.8rem 1.1rem;
}

/* --- 品牌 --- */
.brand{
  display:block;
  text-decoration:none;
  color:var(--ink);
  min-width:0;
}
.brand-name{
  display:block;
  font-family:var(--font-serif);
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.3;
  color:var(--ink);
}
.brand-tag{
  display:block;
  margin-top:.2rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.16em;
  line-height:1.5;
  color:rgba(63,70,72,.68);
}

/* --- 顶部工具行 --- */
.rail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.rail-tools{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex:none;
}

.icon-btn,
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.42rem .78rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--rock);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.icon-btn:hover,
.nav-toggle:hover{
  background:var(--celadon);
  border-color:var(--river);
  color:var(--ink);
}

.icon-btn-glyph{
  position:relative;
  flex:none;
  width:.7rem; height:.7rem;
  border:1.6px solid currentColor;
  border-radius:50%;
}
.icon-btn-glyph::after{
  content:"";
  position:absolute;
  right:-.3rem; bottom:-.22rem;
  width:.44rem; height:1.6px;
  background:currentColor;
  transform:rotate(45deg);
}
.icon-btn-text{ display:inline; }

.nav-toggle-icon{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  width:.9rem;
  flex:none;
}
.nav-toggle-icon span{
  display:block;
  height:1.5px;
  background:currentColor;
  border-radius:1px;
  transition:transform .22s var(--ease),opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }
.nav-toggle-text{ display:inline; }

/* --- 章节导航（移动端抽屉）--- */
.site-nav{
  position:absolute;
  left:0; right:0; top:100%;
  z-index:5;
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  background:var(--sand);
  border-bottom:1px solid var(--line);
  padding:0 1.1rem;
  transition:max-height .28s var(--ease),opacity .2s var(--ease),padding .28s var(--ease),visibility 0s linear .28s;
}
.site-nav[data-open]{
  max-height:78vh;
  overflow-y:auto;
  opacity:1;
  visibility:visible;
  padding:.9rem 1.1rem 1.4rem;
  box-shadow:0 22px 34px rgba(37,43,44,.10);
  transition:max-height .28s var(--ease),opacity .2s var(--ease),padding .28s var(--ease);
}

.rail-caption{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.2em;
  color:rgba(63,70,72,.58);
  margin-bottom:.55rem;
}
.rail-list{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.rail-item{ min-width:0; }

.rail-link{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  align-items:baseline;
  gap:.55rem;
  padding:.55rem .7rem .55rem .8rem;
  border-left:2px solid transparent;
  border-radius:0 11px 11px 0;
  text-decoration:none;
  color:var(--rock);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.rail-link:hover{
  background:rgba(220,232,226,.7);
  border-left-color:var(--gold);
  color:var(--ink);
  transform:translateX(2px);
}
.rail-link[aria-current="page"]{
  background:var(--celadon);
  border-left-color:var(--river);
  color:var(--ink);
  font-weight:600;
}
.rail-link[aria-current="page"] .rail-num{ color:var(--goji); }

.rail-num{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:rgba(63,70,72,.52);
  transition:color .2s var(--ease);
}
.rail-label{
  font-size:.95rem;
  letter-spacing:.03em;
  line-height:1.5;
}

/* --- 轨道底部行动区 --- */
.rail-foot{
  display:none;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.rail-note{
  font-size:.76rem;
  line-height:1.65;
  color:rgba(63,70,72,.7);
}
.rail-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:.7rem;
  padding:.62rem 1rem;
  background:var(--ink);
  color:var(--paper);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:3px 13px 3px 3px;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.rail-cta:hover{
  background:var(--goji);
  transform:translateY(-1px);
}

/* ---------- 阅读进度线 ---------- */
.scroll-gauge{
  position:fixed;
  left:0; right:0; top:0;
  height:2px;
  z-index:130;
  background:transparent;
  pointer-events:none;
}
.scroll-gauge-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--gold),var(--clay) 60%,var(--goji));
}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:120;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .85rem;
  background:var(--sand);
  color:var(--rock);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  box-shadow:0 8px 20px rgba(37,43,44,.08);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
.to-top[data-visible]{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.to-top:hover{
  background:var(--celadon);
  border-color:var(--river);
}
.to-top-arrow{ font-size:.85rem; line-height:1; color:var(--goji); }
.to-top-text{ line-height:1; }

/* ---------- 站内检索浮层 ---------- */
.search-panel{
  position:fixed;
  inset:0;
  z-index:150;
  visibility:hidden;
  pointer-events:none;
}
.search-panel[data-open]{
  visibility:visible;
  pointer-events:auto;
}
.search-scrim{
  position:absolute;
  inset:0;
  background:rgba(37,43,44,.46);
  opacity:0;
  transition:opacity .24s var(--ease);
}
.search-panel[data-open] .search-scrim{ opacity:1; }

.search-shell{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(430px,100%);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1.6rem 1.35rem 2rem;
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:-20px 0 44px rgba(37,43,44,.12);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .28s var(--ease);
}
.search-panel[data-open] .search-shell{ transform:translateX(0); }

.search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
  margin-bottom:.3rem;
}
.search-title{
  font-family:var(--font-serif);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
}
.search-close{
  padding:.28rem .78rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--rock);
  border:1px solid var(--line);
  border-radius:999px;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.search-close:hover{
  background:var(--celadon);
  border-color:var(--river);
  color:var(--ink);
}

.search-label{
  font-size:.82rem;
  color:rgba(63,70,72,.76);
}
.search-input{
  width:100%;
  padding:.68rem .9rem;
  font-family:var(--font-sans);
  font-size:.95rem;
  color:var(--ink);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:10px;
}
.search-input::placeholder{ color:rgba(63,70,72,.5); }

.search-hint{
  margin-top:.3rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:rgba(63,70,72,.55);
}
.chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.chip{
  padding:.24rem .72rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--rock);
  border:1px solid var(--line);
  border-radius:999px;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover{
  background:var(--celadon);
  border-color:var(--river);
  color:var(--ink);
}

.search-results{
  display:flex;
  flex-direction:column;
  margin-top:.4rem;
}
.search-item{ min-width:0; }
.search-link{
  display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);
  grid-template-areas:
    "code name"
    "code desc";
  gap:0 .6rem;
  padding:.6rem .35rem;
  text-decoration:none;
  border-bottom:1px dashed var(--line);
  transition:background-color .18s var(--ease),padding-left .18s var(--ease);
}
.search-link:hover{
  background:rgba(220,232,226,.6);
  padding-left:.6rem;
}
.search-code{
  grid-area:code;
  padding-top:.12rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--clay);
}
.search-name{
  grid-area:name;
  font-size:.94rem;
  font-weight:500;
  color:var(--ink);
}
.search-desc{
  grid-area:desc;
  font-size:.76rem;
  line-height:1.55;
  color:rgba(63,70,72,.64);
}
.search-empty{
  padding:.9rem 0;
  font-size:.86rem;
  line-height:1.7;
  color:rgba(63,70,72,.72);
}

/* ---------- 桌面端：书脊固定 ---------- */
@media (min-width:1024px){
  .site-header{
    position:fixed;
    top:0; left:0; bottom:0;
    width:var(--rail-w);
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--line);
    border-bottom:0;
    box-shadow:none;
  }
  .site-header::after{
    content:"";
    position:absolute;
    top:0; right:-1px;
    width:3px; height:100%;
    background:linear-gradient(180deg,var(--gold),rgba(201,168,106,0) 58%);
    opacity:.55;
    pointer-events:none;
  }
  .rail{
    flex:1;
    min-height:0;
    padding:1.9rem 1.35rem 1.5rem;
    gap:1.55rem;
  }
  .rail-top{
    flex-direction:column;
    align-items:stretch;
    gap:1.3rem;
  }
  .brand-name{ font-size:1.34rem; }
  .rail-tools{ justify-content:flex-start; }
  .site-nav,
  .site-nav[data-open]{
    position:static;
    flex:1;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    opacity:1;
    visibility:visible;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    transition:none;
  }
  .rail-foot{ display:block; margin-top:auto; }
  .scroll-gauge{ left:var(--rail-w); }
  .to-top{ right:2rem; bottom:2rem; }
  .nav-toggle{ display:none; }
}

@media (max-width:380px){
  .icon-btn-text{ display:none; }
  .nav-toggle-text{ display:none; }
}

/* ==========================================================================
   页脚 · 书末版权页
   ========================================================================== */
.site-footer{
  position:relative;
  margin-top:clamp(2rem,6vw,5rem);
  padding:clamp(1.9rem,5vw,3.4rem) clamp(1.1rem,4vw,3.5rem) 1.4rem;
  background:var(--sand);
  border-top:1px solid var(--line);
  color:var(--rock);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--clay) 55%,var(--river));
  opacity:.5;
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
}
.footer-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem 2.2rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--line);
}
.footer-brand{ min-width:0; }
.footer-name{
  font-family:var(--font-serif);
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
  line-height:1.3;
}
.footer-tag{
  margin-top:.3rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  color:rgba(63,70,72,.64);
}
.footer-note{
  max-width:40ch;
  font-size:.84rem;
  line-height:1.75;
  color:rgba(63,70,72,.78);
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.7rem 2rem;
  padding:1.7rem 0;
}
.footer-col{ min-width:0; }
.footer-col-title{
  margin-bottom:.65rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.2em;
  color:rgba(63,70,72,.58);
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:.34rem;
}
.footer-link{
  width:fit-content;
  font-size:.92rem;
  color:var(--rock);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.footer-link:hover{
  color:var(--river);
  border-bottom-color:currentColor;
}
.footer-fact{
  display:flex;
  flex-wrap:wrap;
  gap:.2rem .6rem;
  align-items:baseline;
}
.footer-label{
  flex:none;
  min-width:2.9rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:rgba(63,70,72,.56);
}
.footer-value{
  font-family:var(--font-mono);
  font-size:.8rem;
  line-height:1.7;
  color:var(--ink);
  word-break:break-word;
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem 1.4rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:rgba(63,70,72,.64);
}
.footer-copy,
.footer-icp{ line-height:1.7; }

@media (min-width:640px){
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .footer-grid{ grid-template-columns:1.05fr .75fr 1.35fr; }
}

/* ==========================================================================
   通用排版与组件
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
}

.page-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(1.3rem,4vw,3.6rem) clamp(1.1rem,4vw,3.5rem) clamp(2.4rem,7vw,5rem);
}

.prose{
  max-width:38em;
  font-size:1.02rem;
  line-height:1.8;
}
.prose p + p{ margin-top:1em; }
.prose h2,.prose h3{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  line-height:1.4;
}
.prose h2{ font-size:1.6rem; margin:1.8em 0 .6em; }
.prose h3{ font-size:1.2rem; margin:1.5em 0 .5em; }
.prose a{
  color:var(--river);
  text-decoration:none;
  border-bottom:1px solid rgba(79,124,120,.4);
}
.prose a:hover{ border-bottom-color:var(--river); }

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--clay);
  line-height:1.6;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-bottom:1.4rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:rgba(63,70,72,.66);
}
.breadcrumb-link{
  color:var(--river);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease);
}
.breadcrumb-link:hover{ border-bottom-color:currentColor; }
.breadcrumb-sep{ color:var(--line); }

/* --- 按钮 --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.72rem 1.3rem;
  font-family:var(--font-sans);
  font-size:.94rem;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.4;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:3px 14px 3px 3px;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{
  background:var(--goji);
  color:var(--paper);
}
.btn--primary:hover{ background:var(--goji-deep); }
.btn--ghost{
  background:transparent;
  color:var(--rock);
  border-color:var(--line);
}
.btn--ghost:hover{
  background:var(--celadon);
  border-color:var(--river);
  color:var(--ink);
}
.btn--gold{
  background:var(--gold);
  color:var(--ink);
}
.btn--gold:hover{ background:#BE9A58; }

/* --- 网格 --- */
.grid{
  display:grid;
  gap:clamp(1rem,2.6vw,2rem);
}
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }

@media (max-width:1023px){
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--split{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .grid--2,.grid--3{ grid-template-columns:minmax(0,1fr); }
}

/* --- 页签标签 --- */
.tab-tag{
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  padding:.26rem .78rem .28rem .62rem;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:2px 0 2px 2px;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.6;
  color:var(--rock);
}
.tab-tag--gold{
  background:rgba(201,168,106,.22);
  border-color:rgba(201,168,106,.6);
  color:#6E5326;
}
.tab-tag--river{
  background:rgba(220,232,226,.85);
  border-color:rgba(79,124,120,.45);
  color:#35605C;
}

/* --- 图片容器基础规则 --- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  background-color:var(--sand);
  background-image:linear-gradient(140deg,rgba(201,168,106,.20),rgba(220,232,226,.42));
  border:1px solid var(--line);
  border-radius:16px;
}
.media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media[data-ratio="21x9"]{ aspect-ratio:21/9; }
.media[data-ratio="16x9"]{ aspect-ratio:16/9; }
.media[data-ratio="4x3"]{ aspect-ratio:4/3; }
.media[data-ratio="3x4"]{ aspect-ratio:3/4; }
.media[data-ratio="1x1"]{ aspect-ratio:1/1; }

.media-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  text-align:center;
}
.media-placeholder::after{
  content:attr(data-label);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  line-height:1.7;
  color:rgba(63,70,72,.55);
}

/* ==========================================================================
   动效偏好
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .search-shell{ transform:none; }
  .search-panel .search-scrim{ transition:none; }
  .to-top{ transform:none; }
}