:root{
  --blue:#012ea7;
  --yellow:#fbd83b;
  --wine:#900021;
  --orange:#F37021;
  --charcoal:#323232;
  --mint:#7cc9bf;
  --navy:#043253;

  --paper:#f3f1ec;
  --card:#ffffff;
  --text:#1c1c1a;
  --muted:#6b6a64;
  --line:#e6e4de;
}
html[data-theme="dark"]{
  --paper:#121212;
  --card:#1b1b1b;
  --text:#f1efea;
  --muted:#9b9a94;
  --line:#2c2c2c;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s,color .3s;
}

/* 顶部八色带 */
.stripe{
  height:6px;width:100%;
  background:linear-gradient(90deg,
    var(--blue) 0 12.5%,
    var(--yellow) 12.5% 25%,
    var(--wine) 25% 37.5%,
    var(--orange) 37.5% 50%,
    var(--mint) 50% 62.5%,
    var(--navy) 62.5% 75%,
    var(--charcoal) 75% 87.5%,
    var(--blue) 87.5% 100%);
}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px 64px}

/* ---------- 顶栏 ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:20px}
.mark{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--yellow);color:var(--charcoal);
  font-size:19px;font-weight:700;line-height:1;
  user-select:none;
}
.iconbtn{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s,transform .2s;
}
.iconbtn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.iconbtn svg{width:17px;height:17px;display:block}
.iconbtn .i-sun{display:none}
html[data-theme="dark"] .iconbtn .i-sun{display:block}
html[data-theme="dark"] .iconbtn .i-moon{display:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:20px;padding:28px 22px 26px;
  border-radius:18px;
  background:var(--charcoal);
  color:#fff;
}
html[data-theme="dark"] .hero{background:#242424;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.hero-bg{position:absolute;inset:0;z-index:0;display:block}
.hero-bg img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;
  opacity:1;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(18,18,18,.4) 0%,rgba(18,18,18,.56) 46%,rgba(18,18,18,.77) 100%);
}
.hero .lead,.hero .status,.hero .hero-en,.hero .hero-tag{
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.hero-top,.hero-body{position:relative;z-index:2}
@media (max-width:899px){
  .hero-bg img{object-position:50% 100%}
  .hero::after{
    background:linear-gradient(180deg,rgba(18,18,18,.34) 0%,rgba(18,18,18,.63) 48%,rgba(18,18,18,.82) 100%);
  }
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-tag{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint);font-weight:500;
}
.hero-yr{
  font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.42);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.hero h1{
  font-size:clamp(3rem,11vw,4.6rem);
  font-weight:700;line-height:1.02;letter-spacing:-.035em;
  margin-top:20px;
}
.hero-en{
  margin-top:12px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.lead{
  margin-top:26px;font-size:1rem;
  color:rgba(255,255,255,.82);max-width:30em;
  line-height:1.85;
  text-wrap:balance;
}
.lead em{
  font-style:normal;color:var(--yellow);
  box-shadow:inset 0 -.5em 0 rgba(251,216,59,.18);
}
.hero-foot{
  margin-top:26px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.62)}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(124,201,191,.55)}
  70%{box-shadow:0 0 0 8px rgba(124,201,191,0)}
  100%{box-shadow:0 0 0 0 rgba(124,201,191,0)}
}
.swatches{display:flex;gap:5px}
.swatches i{width:9px;height:9px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* ---------- 布局网格 ---------- */
.layout{display:grid;gap:38px;margin-top:38px}

/* ---------- 区块标题 ---------- */
.sec{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase;
  margin-bottom:14px;padding-left:2px;
}
.sec .num{
  display:inline-grid;place-items:center;
  min-width:26px;height:20px;padding:0 6px;border-radius:5px;
  background:var(--c);color:var(--tc,#fff);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- 通用卡片 ---------- */
.card{
  position:relative;overflow:hidden;
  background-color:var(--card);
  /* 顶部色条画成背景层，随 border-radius / corner-shape 一起弯，
     不会在圆角处露出直角色块的断面 */
  background-image:linear-gradient(var(--c,var(--line)),var(--c,var(--line)));
  background-size:100% 5px;
  background-position:0 0;
  background-repeat:no-repeat;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 1px 2px rgba(28,28,26,.035),0 10px 24px -22px rgba(28,28,26,.5);
  transition:border-color .25s,transform .25s,box-shadow .25s,background-color .3s;
}

/* ================= 精选轮播 ================= */
.carousel{
  --dur:6000ms;
  position:relative;isolation:isolate;
  overflow:hidden;
  height:clamp(420px,64vw,480px);
  border-radius:18px;
  background:#141414;
  box-shadow:0 0 0 1px rgba(28,28,26,.05),0 20px 46px -34px rgba(0,0,0,.62);
  outline:none;
}
html[data-theme="dark"] .carousel{
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 46px -34px #000;
}
.carousel:focus-visible{box-shadow:0 0 0 3px var(--orange),0 20px 46px -34px rgba(0,0,0,.62)}
.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility .8s;
}
.slide.is-active{opacity:1;visibility:visible;z-index:2}
.slide picture{position:absolute;inset:0;display:block}
.slide img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:62% 50%;
  transform:scale(1.02);
  transition:transform 8s linear;
}
.slide.is-active img{transform:scale(1.1)}
.slide::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(6,6,6,.42),rgba(6,6,6,0) 30%),
    linear-gradient(0deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.74) 32%,rgba(6,6,6,.14) 66%,rgba(6,6,6,0) 100%);
}
.slide-body{
  position:relative;z-index:3;
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 20px 72px;
  color:#fff;
}
.slide-idx{
  display:flex;align-items:center;gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.slide-idx::before{
  content:"";width:20px;height:2px;flex:none;
  background:color-mix(in srgb,var(--a) 58%,#fff);
}
.slide h3{
  margin-top:13px;
  font-size:clamp(1.4rem,5.6vw,1.95rem);
  font-weight:700;line-height:1.2;letter-spacing:-.02em;
  text-wrap:balance;
}
.slide p{
  margin-top:10px;font-size:13.5px;line-height:1.75;
  color:rgba(255,255,255,.76);max-width:30em;
}
.slide-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.slide-tags span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.04em;
  padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.88);
}

/* 底部控制条：圆点 · 暂停 · 上下张 · 计数 */
.cnav{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:0 20px 14px;
}
.cctrl{margin-left:auto;display:flex;align-items:center;gap:7px}
.cbtn{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  transition:background .2s,border-color .2s,transform .15s;
}
.cbtn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.cbtn:active{transform:scale(.94)}
.cbtn svg{width:13px;height:13px;display:block}
.cdots{display:flex;align-items:center;gap:2px}
.cdot{
  width:28px;height:22px;padding:9px 0;
  border:0;background:none;cursor:pointer;display:block;
  -webkit-tap-highlight-color:transparent;
}
.cdot i{
  display:block;height:4px;width:22px;border-radius:2px;
  background:rgba(255,255,255,.26);
  position:relative;overflow:hidden;
  transition:width .35s cubic-bezier(.4,0,.2,1),background .3s;
}
.cdot:hover i{background:rgba(255,255,255,.5)}
.cdot.is-on i{width:42px;background:rgba(255,255,255,.46)}
.cdot b{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.cdot.is-on b{animation:cfill var(--dur) linear forwards}
@keyframes cfill{from{width:0}to{width:100%}}

.cpause{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  transition:background .2s,border-color .2s;
}
.cpause:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.cpause svg{width:11px;height:11px;display:block}
.cpause .i-play{display:none}
.carousel.is-paused .cpause .i-pause{display:none}
.carousel.is-paused .cpause .i-play{display:block}

.ccount{
  margin-left:2px;
  display:flex;align-items:baseline;gap:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);
}
.ccount .cur{color:#fff;font-weight:700;font-size:12px}

/* 极窄屏（≤359px）：控制条收紧 */
@media (max-width:359px){
  .cdot{width:24px}
  .cdot i{width:18px}
  .cdot.is-on i{width:32px}
  .ccount{display:none}
}

/* ---------- 关于 ---------- */
.about p{color:var(--text);max-width:42em}
.about p+p{margin-top:14px}
.about .dim{color:var(--muted)}

/* ---------- 方向 ---------- */
.tags{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tag{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border-radius:10px;
  background:var(--c);color:var(--tc,#fff);
  font-size:13px;font-weight:500;line-height:1.35;
  text-align:center;
  transition:transform .2s,filter .2s;
  cursor:default;
}
.tag:hover{transform:translateY(-2px);filter:brightness(1.08)}
.tag i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}

/* ---------- 项目 ---------- */
.items{display:grid;gap:14px}
.item{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  --ct:var(--c);
}
html[data-theme="dark"] .item{--ct:color-mix(in srgb,var(--c) 42%,#fff)}
.item:hover{border-color:var(--c);transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(28,28,26,.5)}
.item .idx{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ct);opacity:.78;
}
.item h3{
  font-size:17px;font-weight:700;letter-spacing:-.015em;
  margin-top:6px;color:var(--text);
  display:flex;align-items:baseline;gap:9px;
}
.item h3 .arrow{font-size:14px;color:var(--ct);transition:transform .22s}
.item:hover h3 .arrow{transform:translate(3px,-3px)}
.item p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.7}
.meta{
  margin-top:auto;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:var(--ct);
}
.meta span{
  padding:3px 9px;border-radius:6px;
  background:color-mix(in srgb,var(--c) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
  font-weight:500;
}
html[data-theme="dark"] .meta span{
  background:color-mix(in srgb,var(--c) 26%,transparent);
  border-color:color-mix(in srgb,var(--c) 48%,transparent);
}

/* ---------- 联系 ---------- */
.links{display:grid;gap:12px}
.link{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--text);
  transition:border-color .22s,transform .22s,box-shadow .22s;
}
.link:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(28,28,26,.5)}
.link .k{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-width:52px;flex:none;
}
.link .v{flex:1;word-break:break-all;font-size:13.5px}
.link .go{color:var(--muted);font-size:13px;flex:none;transition:transform .22s,color .22s}
.link:hover .go{transform:translateX(3px);color:var(--c)}

/* ---------- 页脚 ---------- */
footer{
  margin-top:40px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12px;color:var(--muted);
}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--orange);border-color:var(--orange)}

/* ---------- 入场 ----------
   用 animation 而不是 transition：.card / .item / .link 各自有一份 transition 简写，
   transition 是单一属性、后写会整条覆盖，reveal 若也用 transition 会把 hover 过渡冲掉。
   translate / scale 是独立属性，同样不和卡片的 transform 抢层叠。

   透明度与位移走两条时间线：淡入只占位移时长的 30%，卡片先"显形"再"落位"。
   手机滚动约 1300px/s，比动画快，两者共用一个时长的话卡片滚到屏幕中央时
   还只有七八成不透明，看起来发虚。 */
.js .reveal{opacity:0;--rise:28px;--rs:.972;--rdur:.62s;--rd:0ms}
.js .reveal.in{
  animation:
    fadeIn calc(var(--rdur) * .3) ease-out var(--rd) both,
    riseIn var(--rdur) cubic-bezier(.2,.85,.3,1) var(--rd) both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{
  from{translate:0 var(--rise);scale:var(--rs)}
  to{translate:0 0;scale:1}
}
/* 手机：卡片窄、滚动快，位移加长、缩放加深，才看得出"从下往上浮" */
@media (max-width:899px){
  .js .reveal{--rise:40px;--rs:.952;--rdur:.66s}
}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1!important;translate:none!important;scale:none!important}
  *{transition:none!important;animation:none!important}
  .slide img,.slide.is-active img{transform:none}
  .cpause{display:none}
}

/* ================= PC：宽屏专用排版 ================= */
@media (min-width:900px){
  .wrap{padding:0 24px 80px}

  .layout{
    grid-template-columns:repeat(12,1fr);
    gap:30px 20px;
    margin-top:34px;
  }
  .col-a{grid-column:span 7}
  .col-b{grid-column:span 5}
  .grid-full{grid-column:1 / -1}

  /* 两栏卡片底部对齐成一条线 */
  .col-a,.col-b{display:flex;flex-direction:column}
  .col-a .card,.col-b .card{flex:1}
  .col-a .card{display:flex;flex-direction:column;justify-content:center}

  /* hero 左右分栏 */
  .hero{margin-top:24px;padding:40px 44px 36px;border-radius:22px}
  .hero-body{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:56px;
    align-items:center;
    margin-top:10px;
  }
  .hero h1{font-size:5.2rem;margin-top:14px}
  .hero-en{margin-top:16px}
  .lead{margin-top:0;font-size:1.08rem;max-width:none}
  .hero-foot{margin-top:24px}

  /* 卡片内边距放大 */
  .card{padding:28px 28px;border-radius:18px}
  .about p{max-width:none}

  /* 轮播：更宽的比例 + 左侧竖排文字块 */
  .carousel{height:clamp(440px,39vw,520px);border-radius:22px}
  .slide::after{
    background:
      linear-gradient(180deg,rgba(6,6,6,.34),rgba(6,6,6,0) 34%),
      linear-gradient(90deg,rgba(6,6,6,.9) 0%,rgba(6,6,6,.7) 38%,rgba(6,6,6,.22) 68%,rgba(6,6,6,.04) 100%);
  }
  .slide img{object-position:50% 50%}
  .slide-body{justify-content:center;max-width:620px;padding:0 44px}
  .slide h3{margin-top:16px;font-size:clamp(1.7rem,2.5vw,2.15rem)}
  .slide p{margin-top:12px;font-size:14.5px;max-width:26em}
  .slide-tags{margin-top:20px;gap:7px}
  .slide-tags span{font-size:11px;padding:5px 10px}
  .cnav{padding:0 44px 22px}

  /* 方向标签：窄栏里 2 列 */
  .col-b .tags{grid-template-columns:repeat(2,1fr);gap:9px}
  .col-b .tag{font-size:13.5px;padding:11px 10px}

  /* 项目三列 */
  .items{grid-template-columns:repeat(3,1fr);gap:16px}
  .item h3{font-size:17.5px}
  .item p{font-size:14.5px}

  /* 联系三列 */
  .links{grid-template-columns:repeat(3,1fr);gap:14px}
  .link{flex-direction:column;align-items:flex-start;gap:10px;padding:24px;position:relative}
  .link .k{min-width:0}
  .link .v{font-size:14px}
  .link .go{position:absolute;top:20px;right:20px}
}

@media (min-width:1180px){
  .hero{padding:46px 52px 40px}
  .hero h1{font-size:5.8rem}
  .layout{gap:34px 22px}
  .item h3{font-size:18px}
}

/* ================= 连续曲率圆角（squircle） =================
   corner-shape 把圆角从「四分之一圆弧」换成超椭圆：曲线在中途
   的曲率是渐变的，切点处不会突然转折，收口更顺。
   实测：squircle 在 border-radius:24px 时，角部水平只占 12.5px（普通圆弧占 24px），
   同数值观感反而更小更方。所以这里数值是刻意放大到约 1.9 倍。
   想更大/更小只改这组数字，曲率不要动。
   不支持的浏览器整段忽略，仍用上面的普通 border-radius。 */
@supports (corner-shape: squircle){
  .mark,
  .iconbtn{corner-shape:squircle;border-radius:15px}     /* 11 → 15 */
  .hero,
  .carousel{corner-shape:squircle;border-radius:30px}    /* 18 → 30 */
  .card{corner-shape:squircle;border-radius:28px}        /* 16 → 28 */
  .tag{corner-shape:squircle;border-radius:13px}         /* 10 → 13 */
  .sec .num{corner-shape:squircle}

  @media (min-width:900px){
    .hero,
    .carousel{border-radius:38px}                        /* 22 → 38 */
    .card{border-radius:34px}                            /* 18 → 34 */
  }
}


/* ================= 子页面：文章 / 项目详情 =================
   复用上面全部变量、圆角、主题规则，只补长文排版。
   页面根节点用 style="--c:#xxx" 指定该篇的强调色。 */

.brand{display:flex;align-items:center;gap:14px}
a.mark{text-decoration:none}
a.mark:hover{filter:brightness(1.05)}

.crumb{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--muted);text-decoration:none;
  padding:6px 2px;transition:color .2s;
}
.crumb:hover{color:var(--text)}
.crumb svg{width:14px;height:14px;transition:transform .2s}
.crumb:hover svg{transform:translateX(-3px)}

.post{max-width:768px;margin:28px auto 0}
.post-head{padding-bottom:26px;border-bottom:1px solid var(--line)}
.post-kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.post-kicker i{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}
.post h1{
  margin-top:14px;
  font-size:clamp(24px,5vw,37px);line-height:1.28;letter-spacing:-.022em;
  text-wrap:balance;
}
.post-lead{margin-top:15px;font-size:16px;line-height:1.82;color:var(--muted)}
.post-tags{margin-top:19px;display:flex;flex-wrap:wrap;gap:7px}
.post-tags span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;padding:4px 10px;border-radius:6px;
  color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent);
}

.post-body{margin-top:32px;font-size:16px;line-height:1.85;color:var(--text)}
.post-body > * + *{margin-top:20px}
.post-body h2{
  font-size:21px;line-height:1.42;letter-spacing:-.012em;
  margin-top:42px;display:flex;align-items:center;gap:11px;
}
.post-body h2::before{
  content:"";width:4px;height:17px;flex:none;
  background:var(--c);border-radius:2px;
}
.post-body h3{font-size:17px;line-height:1.5;margin-top:30px;font-weight:700}
.post-body strong{font-weight:700}
.post-body em{font-style:normal;color:var(--c);font-weight:500}
.post-body a{
  color:var(--c);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--c) 34%,transparent);
}
.post-body a:hover{border-color:var(--c)}
.post-body ul,.post-body ol{padding-left:1.25em}
.post-body li + li{margin-top:9px}
.post-body li::marker{color:color-mix(in srgb,var(--c) 55%,transparent)}
.post-body blockquote{
  border-left:3px solid color-mix(in srgb,var(--c) 45%,transparent);
  padding:2px 0 2px 17px;color:var(--muted);font-size:15.5px;
}
.post-body hr{border:none;border-top:1px solid var(--line);margin-top:34px}

.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;padding:2px 6px;border-radius:5px;
  background:color-mix(in srgb,var(--text) 8%,transparent);
}
.post-body pre{
  background:#1b1b19;color:#e9e7e0;
  padding:19px 21px;border-radius:16px;overflow-x:auto;
  font-size:12.5px;line-height:1.78;
  -webkit-overflow-scrolling:touch;
}
.post-body pre code{
  background:none;padding:0;font-size:inherit;color:inherit;
  white-space:pre;
}
html[data-theme="dark"] .post-body pre{background:#101010;border:1px solid rgba(255,255,255,.07)}
html[data-theme="dark"] .post-tags span{
  background:color-mix(in srgb,var(--c) 26%,transparent);
  border-color:color-mix(in srgb,var(--c) 48%,transparent);
  color:color-mix(in srgb,var(--c) 55%,#fff);
}

.post-body figure{margin-top:28px}
.post-body figure img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
.post-body figcaption{
  margin-top:11px;font-size:12.5px;color:var(--muted);text-align:center;
}

.post-body table{width:100%;border-collapse:collapse;font-size:14.5px}
.post-body th,.post-body td{
  padding:10px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;
}
.post-body th{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.post-foot{
  margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
}
.post-foot .back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--text);text-decoration:none;
  padding:10px 17px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);
  transition:border-color .22s,transform .22s,color .2s;
}
.post-foot .back:hover{border-color:var(--c);color:var(--c);transform:translateX(-3px)}
.post-foot .ext{font-size:12.5px;color:var(--muted)}
.post-foot .ext a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.post-foot .ext a:hover{color:var(--orange);border-color:var(--orange)}

/* 文章页在手机上：行高再放松一点，代码块收窄内边距 */
@media (max-width:899px){
  .post{margin-top:16px}
  .post-body{font-size:15.5px;line-height:1.9}
  .post-body h2{font-size:19.5px;margin-top:36px}
  .post-body pre{font-size:11.5px;padding:15px 16px;border-radius:14px}
  .post-lead{font-size:15.5px}
  /* 窄屏三列表格会挤成一列字，缩字号和内边距让步，仍比横滑好用 */
  .post-body table{font-size:13px}
  .post-body th,.post-body td{padding:8px 9px}
  .post-body th{font-size:10px;letter-spacing:.06em}
}

@supports (corner-shape: squircle){
  .post-body pre,
  .post-body figure img,
  .post-foot .back{corner-shape:squircle;border-radius:12px}
  .post-body pre{border-radius:15px}
}