/* ============================================================
   Clash中国官网 · 设计系统基座(base.css)
   艺术方向:刚钤完印的立轴——宣纸底 + 1px 墨线直角分栏
   零圆角 / 零投影 / 零渐变 / 零发光;朱砂红只落在印蜕与主按钮
   ============================================================ */

/* ——— 设计令牌(全站颜色唯一出处)——— */
:root{
  /* 纸色三层 */
  --paper:#F6EFD9;
  --paper-panel:#FCF8EC;
  --paper-panel-2:#ECE2C6;
  /* 墨线 */
  --ink:#2A2318;
  --ink-soft:rgba(42,35,24,.45);
  --ink-faint:rgba(42,35,24,.22);
  /* 朱砂 */
  --cinnabar:#D43D1E;
  --cinnabar-dark:#A82C12;
  /* 文字 */
  --text:#1D1810;
  --text-muted:#6E6152;
  /* 点缀与语义 */
  --ochre:#A66A2C;
  --success:#3F6B4F;
  --error:#B02A18;
  /* 印面白文描线 / 遮罩 */
  --seal-line:rgba(246,239,217,.55);
  --veil:rgba(29,24,16,.45);
  /* 字体 */
  --font-display:Georgia,'Songti SC','STSong','Noto Serif CJK SC','SimSun',serif;
  --font-body:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  /* 尺度 */
  --gutter:clamp(16px,4vw,56px);
  --wrap-max:1360px;
  --head-h:64px;
  /* 动效 */
  --ease-stamp:cubic-bezier(.22,.61,.21,1);
}

/* ——— Reset ——— */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.nav-open{overflow:hidden}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  background:var(--paper);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--cinnabar);color:var(--paper)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cinnabar);
  outline-offset:2px;
}

/* ——— 版心与区块节奏(横向 padding 永不归零)——— */
.wrap{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-top:72px;padding-bottom:72px}
.sec-tight{padding-top:48px;padding-bottom:48px}
.sec-demo{border-top:1px solid var(--ink)}
main{position:relative;z-index:1}

/* ——— 基础排版 ——— */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.3;color:var(--text)}
strong{font-weight:700}

/* 正文流(教程/博客/深文档) */
.prose{font-size:15.5px;line-height:1.95;min-width:0}
.prose>p{margin:0 0 1.2em}
.prose h2{font-size:26px;letter-spacing:1px;margin:2.2em 0 .9em;display:flex;align-items:center;gap:12px}
.prose h2::before{content:"";flex:none;width:10px;height:10px;background:var(--cinnabar)}
.prose h3{font-size:19px;letter-spacing:.5px;margin:1.8em 0 .7em}
.prose h4{font-size:16px;margin:1.5em 0 .6em}
.prose ul{margin:0 0 1.2em}
.prose ul>li{position:relative;padding-left:20px;margin-bottom:.5em}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.78em;width:6px;height:6px;background:var(--ochre)}
.prose ol{counter-reset:step;margin:0 0 1.2em}
.prose ol>li{counter-increment:step;position:relative;padding-left:44px;margin-bottom:.8em}
.prose ol>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.18em;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;
  color:var(--paper);background:var(--ink);
}
.prose a{color:var(--cinnabar);border-bottom:1px solid var(--cinnabar)}
.prose a:hover{color:var(--cinnabar-dark);border-bottom-color:var(--cinnabar-dark)}
.prose blockquote{
  border-left:3px solid var(--cinnabar);
  background:var(--paper-panel-2);
  padding:14px 18px;
  margin:0 0 1.4em;
  color:var(--text-muted);
}
.prose hr{border:0;border-top:1px solid var(--ink);margin:2.5em 0}
.prose .table-wrap{margin:0 0 1.4em}

/* 行内代码:超长不可断串必须可折行,防窄屏撑破 */
code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--paper-panel-2);
  padding:2px 6px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  border:1px solid var(--ink);
  background:var(--paper-panel);
  padding:18px 20px;
  margin:0 0 1.4em;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
pre code{
  background:none;
  padding:0;
  font-size:13px;
  line-height:1.8;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
}

/* ——— 按钮 ——— */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:54px;
  padding:0 26px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
  border:1px solid var(--ink);
  max-width:100%;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;display:block;flex:none}
.btn-primary{background:var(--cinnabar);color:var(--paper)}
.btn-primary:hover{background:var(--cinnabar-dark)}
.btn-secondary{background:transparent;color:var(--text)}
.btn-secondary:hover{background:var(--paper-panel-2)}
.btn-sm{height:42px;padding:0 18px;font-size:13px;letter-spacing:1px}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* ——— 胶囊标签 ——— */
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  padding:7px 13px;
  border:1px solid var(--ink);
  background:var(--paper-panel);
  max-width:100%;
  overflow:hidden;
}

/* ——— 顶部导航(桌面形态:平铺 + 更多下拉)——— */
.site-head{
  position:relative;
  z-index:40;
  height:var(--head-h);
  display:flex;
  align-items:center;
  gap:20px;
  padding-inline:var(--gutter);
  background:var(--paper-panel);
  border-bottom:1px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
.brand-mark{width:30px;height:30px;display:block;flex:none}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-text strong{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1.1;
  white-space:nowrap;
}
.brand-text small{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:1.8px;
  color:var(--text-muted);
  white-space:nowrap;
}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{display:inline-flex;align-items:center;padding:8px 13px;font-size:14px;white-space:nowrap}
.nav-link:hover{background:var(--paper-panel-2)}
.nav-link.is-active{font-weight:700}
.nav-link.is-active::before{content:"";flex:none;width:6px;height:6px;background:var(--cinnabar);margin-right:7px}
.head-tools{display:flex;align-items:center;gap:16px;margin-left:16px;position:relative;z-index:61}
.head-divider{width:1px;height:22px;background:var(--ink-soft);flex:none}

.has-drop{position:relative}
.nav-more-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;font-size:14px;white-space:nowrap}
.nav-more-btn .caret,.lang-btn .caret{font-size:10px;color:var(--text-muted)}
.has-drop:hover .nav-more-btn{background:var(--paper-panel-2)}
.drop-panel{
  position:absolute;
  top:100%;
  left:0;
  min-width:150px;
  background:var(--paper-panel);
  border:1px solid var(--ink);
  padding:5px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:50;
}
.drop-panel::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.drop-panel a{display:block;padding:9px 16px;font-size:13px;white-space:nowrap}
.drop-panel a:hover{background:var(--paper-panel-2)}
.drop-panel a[aria-current="true"],.drop-panel a[aria-current="page"]{font-weight:700}
.drop-panel a[aria-current="true"]::before,.drop-panel a[aria-current="page"]::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  background:var(--cinnabar);
  margin-right:8px;
  vertical-align:2px;
}
.has-drop:hover .drop-panel,
.has-drop:focus-within .drop-panel,
.has-drop.open .drop-panel{opacity:1;visibility:visible;transform:none}
.drop-panel.drop-right{left:auto;right:0}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--ink);
  padding:7px 12px;
  font-size:12.5px;
  letter-spacing:.5px;
  background:transparent;
  white-space:nowrap;
}
.lang-btn:hover{background:var(--paper-panel-2)}

/* ——— 汉堡按钮(窄屏)——— */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  min-width:44px;min-height:44px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ink);
}
.nav-toggle:hover{background:var(--paper-panel-2)}
.nav-toggle .bars{position:relative;display:block;width:18px;height:14px}
.nav-toggle .bars i{
  position:absolute;left:0;
  width:18px;height:2px;
  background:var(--text);
  transition:transform .18s ease,opacity .18s ease;
}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:6px}
.nav-toggle .bars i:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ——— 移动端抽屉(实色、整行可点、锁背景滚动)——— */
.nav-drawer{
  display:none;
  position:fixed;
  top:var(--head-h);
  left:0;right:0;
  z-index:60;
  background:var(--paper-panel);
  border-bottom:1px solid var(--ink);
  max-height:calc(100dvh - var(--head-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav-drawer.open{display:block}
.nav-drawer a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:13px var(--gutter);
  font-size:15px;
  border-top:1px solid var(--ink-faint);
}
.nav-drawer a:active{background:var(--paper-panel-2)}
.nav-drawer a.is-active{font-weight:700}
.nav-drawer a.is-active::before{content:"";flex:none;width:7px;height:7px;background:var(--cinnabar);margin-right:10px}
.drawer-group{border-top:1px solid var(--ink);margin-top:4px}
.drawer-label{
  display:block;
  padding:12px var(--gutter) 4px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:2.5px;
  color:var(--ochre);
}
.nav-veil{display:none;position:fixed;inset:0;z-index:55;background:var(--veil)}
.nav-veil.open{display:block}

/* ——— 页脚 ——— */
.site-foot{position:relative;z-index:1;border-top:1px solid var(--ink);background:var(--paper-panel)}
.foot-main{padding-top:52px;padding-bottom:44px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr .9fr;gap:40px}
.foot-grid>*{min-width:0}
.foot-brand .brand{margin-bottom:16px}
.foot-tag{font-size:13.5px;line-height:1.9;color:var(--text-muted);max-width:320px}
.foot-col h4{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--ochre);
  margin-bottom:16px;
}
.foot-col>a{display:block;padding:5px 0;font-size:13.5px}
.foot-col>a:hover{color:var(--cinnabar)}
.foot-keys{display:flex;flex-wrap:wrap;gap:8px}
.foot-keys a{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.5px;
  padding:6px 11px;
  border:1px solid var(--ink-soft);
  color:var(--text-muted);
  max-width:100%;
  overflow:hidden;
}
.foot-keys a:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
.foot-bar{border-top:1px solid var(--ink)}
.foot-bar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 18px;
  padding-top:16px;
  padding-bottom:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:1px;
  color:var(--text-muted);
}

/* ——— 滚动淡入(reveal.js 驱动,threshold=0)——— */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s var(--ease-stamp)}
.reveal.shown{opacity:1;transform:none}

/* ——— SVG 滤镜与纸纹颗粒层 ——— */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.flood-paper{flood-color:var(--paper)}
.paper-grain{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
  opacity:.55;
}
.grain-rect{fill:var(--ink)}

/* ——— 响应式 ——— */
@media (max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:960px){
  .site-nav{display:none}
  .head-tools{margin-left:auto;gap:12px;flex:none}
  .nav-toggle{display:inline-flex}
  /* 窄屏允许品牌名收缩并省略,长站名不再把头部撑出横向滚动 */
  .brand{flex:0 1 auto;overflow:hidden}
  .brand-text strong,.brand-text small{overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:961px){
  .nav-drawer,.nav-veil{display:none!important}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .head-divider{display:none}
  .foot-bar-in{justify-content:flex-start}
}

/* ——— 减少动态偏好 ——— */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .drop-panel{transition:none}
  .nav-toggle .bars i{transition:none}
}