:root{
  --bg:#fbfaf8; --panel:#ffffff; --panel-2:#fdfcfa;
  --ink:#1c1b19; --ink-2:#55524d; --ink-3:#8a857e;
  --line:#e7e3dd; --line-2:#d8d2c9;
  --accent:#b1553a; --accent-2:#c98a52; --accent-soft:#f3ece8;
  --glow-a:rgba(177,85,58,.24); --glow-b:rgba(201,138,82,.20); --glow-c:rgba(112,132,150,.18);
  --shadow:0 1px 2px rgba(28,27,25,.04), 0 8px 24px -12px rgba(28,27,25,.10);
  --shadow-lift:0 2px 4px rgba(28,27,25,.05), 0 18px 40px -18px rgba(28,27,25,.22);
  --spot:rgba(177,85,58,.10);
  --code-bg:#f6f3ef; --code-ink:#3d3a36;
  --ease:cubic-bezier(0.32,0.72,0,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0e0d; --panel:#191817; --panel-2:#151413;
    --ink:#f0ede8; --ink-2:#a9a49c; --ink-3:#6f6a63;
    --line:#282624; --line-2:#35322e;
    --accent:#e08258; --accent-2:#d9a66a; --accent-soft:#241c18;
    --glow-a:rgba(224,130,88,.20); --glow-b:rgba(217,166,106,.14); --glow-c:rgba(96,124,150,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 20px 44px -18px rgba(0,0,0,.75);
    --spot:rgba(224,130,88,.14);
    --code-bg:#151413; --code-ink:#cfc9c1;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  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;
  overflow-x:hidden;
}

/* ── 背景氛围层 ─────────────────────────────── */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(72px); will-change:transform}
.orb-a{width:44vmax; height:44vmax; left:-14vmax; top:-16vmax;
  background:radial-gradient(circle at 50% 50%, var(--glow-a), transparent 68%);
  animation:driftA 26s ease-in-out infinite alternate}
.orb-b{width:38vmax; height:38vmax; right:-12vmax; top:12vmax;
  background:radial-gradient(circle at 50% 50%, var(--glow-b), transparent 68%);
  animation:driftB 32s ease-in-out infinite alternate}
.orb-c{width:40vmax; height:40vmax; left:18vmax; bottom:-20vmax;
  background:radial-gradient(circle at 50% 50%, var(--glow-c), transparent 68%);
  animation:driftC 38s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate3d(8vmax,6vmax,0) scale(1.15)}}
@keyframes driftB{to{transform:translate3d(-9vmax,10vmax,0) scale(1.1)}}
@keyframes driftC{to{transform:translate3d(6vmax,-8vmax,0) scale(1.18)}}
.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%);
}

.wrap{max-width:720px; margin:0 auto; padding:0 24px; position:relative}

/* ── 入场 ─────────────────────────────── */
.rise{opacity:0; transform:translateY(18px)}
.ready .rise{animation:rise .8s var(--ease) forwards; animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1; transform:none}}
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1; transform:none}

/* ── 头部 ─────────────────────────────── */
header{padding:96px 0 52px}
.mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:15px;
  background:var(--accent-soft); color:var(--accent);
  font-size:22px; margin-bottom:26px;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .3s ease;
}
.mark span{display:block; animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){
  .mark:hover{transform:translateY(-3px) scale(1.06); box-shadow:var(--shadow-lift)}
}
h1{
  font-size:clamp(32px,7vw,42px); line-height:1.2; margin:0 0 14px;
  font-weight:650; letter-spacing:-0.02em;
  background:linear-gradient(100deg, var(--ink) 20%, var(--accent) 45%, var(--accent-2) 58%, var(--ink) 82%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{to{background-position:-260% 0}}
.tagline{color:var(--ink-2); margin:0; font-size:17px; max-width:34em}
.cursor{
  display:inline-block; width:2px; height:1em; vertical-align:-2px;
  margin-left:3px; background:var(--accent); animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ── 区块 ─────────────────────────────── */
section{border-top:1px solid var(--line); padding:44px 0}
h2{
  font-size:12px; font-weight:650; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 20px; display:flex; align-items:center; gap:10px;
}
h2::after{content:""; flex:1; height:1px; background:linear-gradient(to right, var(--line), transparent)}
p{margin:0 0 14px; color:var(--ink-2)}
p:last-child{margin-bottom:0}
strong{color:var(--ink); font-weight:600}

/* ── 卡片 ─────────────────────────────── */
.cards{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  position:relative; isolation:isolate;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 70%);
  transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-2)}
  .card:hover::before{opacity:1}
  .card:hover .dot{transform:scale(1.5); background:var(--accent)}
}
.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ink-3); margin-right:9px; vertical-align:2px;
  transition:transform .35s var(--ease), background .35s ease;
}
.card h3{margin:0 0 7px; font-size:15px; font-weight:600; color:var(--ink)}
.card p{margin:0; font-size:14px; line-height:1.65}

/* ── 列表 ─────────────────────────────── */
ul.plain{margin:0; padding:0; list-style:none}
ul.plain li{
  position:relative; color:var(--ink-2); padding:12px 12px 12px 14px;
  border-bottom:1px dashed var(--line); border-radius:8px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  transition:transform .3s var(--ease), background .3s ease, color .3s ease;
}
ul.plain li::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleY(0); transition:transform .35s var(--ease);
}
ul.plain li:last-child{border-bottom:0}
ul.plain li span:last-child{color:var(--ink-3); font-size:14px}
@media (hover:hover) and (pointer:fine){
  ul.plain li:hover{transform:translateX(6px); background:var(--panel-2); color:var(--ink)}
  ul.plain li:hover::before{transform:scaleY(1)}
}

/* ── 文章列表 ─────────────────────────────── */
.posts{margin:0; padding:0; list-style:none}
.posts li{border-bottom:1px dashed var(--line)}
.posts li:last-child{border-bottom:0}
.posts a{
  display:block; padding:16px 14px 16px 16px; border-radius:10px;
  position:relative; color:inherit;
  transition:transform .3s var(--ease), background .3s ease;
}
.posts a::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleY(0); transition:transform .35s var(--ease);
}
.posts .t{display:block; font-size:16px; font-weight:600; color:var(--ink); margin-bottom:3px}
.posts .d{display:block; font-size:13.5px; color:var(--ink-3); line-height:1.6}
.posts .m{display:block; font-size:12px; color:var(--ink-3); margin-top:7px; letter-spacing:.03em}
@media (hover:hover) and (pointer:fine){
  .posts a:hover{transform:translateX(6px); background:var(--panel-2)}
  .posts a:hover::before{transform:scaleY(1)}
  .posts a:hover .t{color:var(--accent)}
}

/* ── 链接 / 页脚 ─────────────────────────── */
a{color:var(--accent); text-decoration:none}
.ulink{position:relative}
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.ulink:hover::after{transform:scaleX(1); transform-origin:left}
.back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; color:var(--ink-3); margin-bottom:30px;
  transition:color .25s ease;
}
.back .arw{display:inline-block; transition:transform .3s var(--ease)}
.back:hover{color:var(--accent)}
.back:hover .arw{transform:translateX(-4px)}
footer{
  border-top:1px solid var(--line); padding:34px 0 72px;
  font-size:13px; color:var(--ink-3); line-height:2;
}
footer a{color:var(--ink-3)}
footer a:hover{color:var(--accent)}

/* ── 文章正文 ─────────────────────────────── */
.article-head{padding:72px 0 30px}
.article-head h1{
  font-size:clamp(26px,5.4vw,34px); line-height:1.35; margin:0 0 12px;
  letter-spacing:-0.015em;
  background:none; -webkit-text-fill-color:currentColor; color:var(--ink);
  animation:none;
}
.article-head .meta{font-size:13.5px; color:var(--ink-3); margin:0}
.article{border-top:1px solid var(--line); padding:36px 0 8px}
.article h2{
  display:block; font-size:19px; font-weight:650; letter-spacing:-0.01em;
  text-transform:none; color:var(--ink); margin:38px 0 14px;
}
.article h2::after{display:none}
.article h2:first-child{margin-top:0}
.article h3{font-size:16px; font-weight:600; color:var(--ink); margin:28px 0 10px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 16px; padding-left:22px; color:var(--ink-2)}
.article li{margin:6px 0}
.article li::marker{color:var(--ink-3)}
.article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.875em; background:var(--code-bg); color:var(--code-ink);
  padding:.15em .4em; border-radius:5px; border:1px solid var(--line);
}
.article pre{
  background:var(--code-bg); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; overflow-x:auto; margin:0 0 18px;
  font-size:13.5px; line-height:1.7; color:var(--code-ink);
  -webkit-overflow-scrolling:touch;
}
.article pre code{background:none; border:0; padding:0; font-size:inherit; color:inherit}
.article blockquote{
  margin:0 0 18px; padding:2px 0 2px 16px;
  border-left:2px solid var(--accent); color:var(--ink-2);
}
.article blockquote p:last-child{margin-bottom:0}
.article hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.article table{
  width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px;
  display:block; overflow-x:auto; white-space:nowrap;
}
.article th,.article td{
  padding:9px 14px; border-bottom:1px solid var(--line);
  text-align:left; color:var(--ink-2);
}
.article th{color:var(--ink-3); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.article td:first-child{color:var(--ink); white-space:normal}

/* ── 降级 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rise,.reveal{opacity:1 !important; transform:none !important}
  h1{background:none; -webkit-text-fill-color:currentColor; color:var(--ink)}
  .cursor{display:none}
}