/* ==========================================================
   易云雪 · AI 学习笔记 — 全站样式
   ========================================================== */

:root{
  /* 纸面 */
  --paper:#FBFAF6;
  --paper-2:#F3F1EA;
  --surface:#FFFFFF;
  --surface-2:#FCFCFA;

  /* 墨色 */
  --ink:#161D19;
  --ink-2:#4B5851;
  --ink-3:#85908A;
  --ink-4:#B7BEB9;

  /* 界线 */
  --line:rgba(22,29,25,.10);
  --line-2:rgba(22,29,25,.055);

  /* 彩色 */
  --green:#0D6750;
  --green-mid:#12886A;
  --green-bright:#17A67F;
  --green-soft:#E6F3ED;
  --amber:#A9762E;
  --amber-soft:#F7EFE0;

  /* 阴影 */
  --sh-1:0 1px 2px rgba(22,29,25,.045);
  --sh-2:0 2px 4px rgba(22,29,25,.04),0 14px 30px -16px rgba(22,29,25,.16);
  --sh-3:0 4px 10px rgba(22,29,25,.05),0 26px 52px -24px rgba(22,29,25,.22);

  --w:940px;
  --w-read:704px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --r-card:16px;
  --r-btn:11px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:96px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  font-kerning:normal;
}

img,svg{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--w);margin:0 auto;padding:0 26px}
.wrap.read{max-width:760px}

/* ============ 顶栏 ============ */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,246,.78);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  backdrop-filter:saturate(170%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.nav.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(22,29,25,.02),0 8px 24px -20px rgba(22,29,25,.4);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,#12886A,#0B5643);
  color:#fff;font-size:15px;font-weight:600;
  display:grid;place-items:center;
  box-shadow:0 2px 6px -1px rgba(13,103,80,.4),inset 0 1px 0 rgba(255,255,255,.24);
  letter-spacing:0;
}
.brand .who{display:flex;flex-direction:column;line-height:1.15}
.brand .who b{font-size:14.5px;font-weight:600;letter-spacing:.01em}
.brand .who i{font-style:normal;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}

.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{
  position:relative;display:inline-block;
  font-size:14px;color:var(--ink-2);text-decoration:none;
  padding:7px 12px;border-radius:8px;
  transition:color .18s,background .18s;
}
.nav nav a:hover{color:var(--green);background:rgba(13,103,80,.06)}
.nav nav a.is-here{color:var(--ink);font-weight:600}
.nav nav a.is-here::after{
  content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;
  border-radius:2px;background:var(--green-bright);
}

/* ============ 首屏 ============ */

.hero{position:relative;padding:74px 0 56px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1120px 440px at 6% -12%,rgba(23,166,127,.145),transparent 62%),
    radial-gradient(880px 400px at 96% -6%,rgba(169,118,46,.085),transparent 58%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(22,29,25,.115) 1px,transparent 0);
  background-size:25px 25px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 42%,transparent 82%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 42%,transparent 82%);
}
.hero .wrap{position:relative;z-index:1}

.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;letter-spacing:.045em;color:var(--ink-2);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 14px 5px 10px;
  margin-bottom:26px;
  box-shadow:var(--sh-1);
}
.kicker .dot{
  width:6px;height:6px;border-radius:50%;background:var(--green-bright);
  box-shadow:0 0 0 3px rgba(23,166,127,.16);
}

h1.display{
  font-size:clamp(32px,4.9vw,50px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.032em;
  margin-bottom:24px;
  max-width:16em;
}
h1.display em{
  font-style:normal;
  color:var(--green);
  white-space:nowrap;
  background-image:linear-gradient(180deg,transparent 63%,rgba(23,166,127,.19) 63%,rgba(23,166,127,.19) 95%,transparent 95%);
  background-repeat:no-repeat;
}

.lede{
  font-size:16.5px;line-height:1.86;color:var(--ink-2);
  max-width:56ch;
}
.lede strong{color:var(--ink);font-weight:600}

.cta{display:flex;gap:11px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 22px;border-radius:var(--r-btn);
  font-size:15px;font-weight:500;text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;
}
.btn svg{flex:none}
.btn-solid{
  background:linear-gradient(160deg,#12886A,#0B5A47);
  color:#fff;
  box-shadow:0 2px 5px -1px rgba(13,103,80,.3),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(13,103,80,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-line{
  border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.6);
}
.btn-line:hover{border-color:rgba(13,103,80,.36);color:var(--green);background:#fff}

/* 数据条 */
.stats{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
}
.stat{padding-right:34px;margin-right:34px;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0;margin-right:0;padding-right:0}
.stat b{
  display:block;
  font-size:23px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.25;
}
.stat b i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.stat span{font-size:12.5px;color:var(--ink-3);letter-spacing:.03em}

/* ============ 区块通用 ============ */

section{padding:26px 0 62px;scroll-margin-top:92px}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-bottom:15px;margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.sec-head .left{display:flex;align-items:baseline;gap:12px}
.sec-head h2{
  font-size:20px;font-weight:600;letter-spacing:-.018em;
}
.sec-head .idx{
  font-family:var(--mono);font-size:11.5px;color:var(--green);
  letter-spacing:.1em;padding-top:2px;
}
.sec-head .note-sm{font-size:13px;color:var(--ink-3)}

/* ============ 在做的事 ============ */

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{
  position:relative;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:24px 24px 26px;
  box-shadow:var(--sh-1);
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(13,103,80,.24);box-shadow:var(--sh-2)}
.card .ic{
  width:36px;height:36px;border-radius:10px;
  background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;margin-bottom:16px;
}
.card h3{font-size:15.5px;font-weight:600;letter-spacing:-.012em;margin-bottom:8px}
.card p{font-size:14px;line-height:1.78;color:var(--ink-2)}
.card .accent-line{
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,var(--green-bright),rgba(23,166,127,0));
  opacity:0;transition:opacity .22s;
}
.card:hover .accent-line{opacity:1}

/* ============ 笔记列表 ============ */

.notes{display:flex;flex-direction:column;gap:12px}

.note-card{
  position:relative;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:22px 24px 23px;
  text-decoration:none;
  box-shadow:var(--sh-1);
  transition:transform .22s,border-color .22s,box-shadow .22s,background .22s;
}
.note-card:hover{
  transform:translateY(-2px);
  border-color:rgba(13,103,80,.26);
  box-shadow:var(--sh-2);
}
.note-card .num{
  font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.05em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  transition:color .22s;
}
.note-card:hover .num{color:var(--amber)}

.note-card .meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);
  margin-bottom:9px;letter-spacing:.015em;
  font-variant-numeric:tabular-nums;
}
.note-card .meta .sp{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:none}

.note-card h3{
  font-size:18px;font-weight:600;line-height:1.5;
  letter-spacing:-.018em;
  margin-bottom:9px;
  transition:color .22s;
}
.note-card:hover h3{color:var(--green)}

.note-card .excerpt{
  font-size:14.5px;line-height:1.82;color:var(--ink-2);
  max-width:none;
}
.note-card .excerpt code{
  font-family:var(--mono);font-size:.88em;
  background:rgba(22,29,25,.055);
  color:#33403A;
  padding:1px 5px;border-radius:4px;
}

.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tag{
  font-size:11.5px;line-height:1.7;padding:2px 9px;border-radius:999px;
  background:var(--green-soft);color:var(--green);
  letter-spacing:.015em;
  border:1px solid rgba(13,103,80,.08);
}

.note-card .go{
  align-self:center;
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  color:var(--ink-2);
  border:1px solid rgba(22,29,25,.13);
  background:var(--surface-2);
  transition:transform .24s,color .22s,border-color .22s,background .22s;
}
.note-card:hover .go{
  color:#fff;border-color:transparent;
  background:linear-gradient(150deg,#12886A,#0B5A47);
  transform:translateX(3px);
}

.list-foot{
  margin-top:22px;text-align:center;
  font-size:13px;color:var(--ink-3);letter-spacing:.03em;
}

/* ============ 页脚 ============ */

footer{
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(243,241,234,.5),rgba(243,241,234,.9));
  padding:44px 0 60px;
}
.foot-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding-bottom:26px;margin-bottom:22px;
  border-bottom:1px solid var(--line-2);
}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand .mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(145deg,#12886A,#0B5643);
  color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center;
}
.foot-brand .txt b{display:block;font-size:14px;font-weight:600;line-height:1.4}
.foot-brand .txt span{font-size:12.5px;color:var(--ink-3)}
.foot-tag{
  font-size:13.5px;color:var(--ink-2);line-height:1.7;max-width:34ch;
}
.foot-meta{font-size:12.5px;color:var(--ink-3);line-height:2.1}
.foot-meta a{
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.foot-meta a:hover{color:var(--green);border-bottom-color:var(--green)}

/* ============ 文章页 ============ */

.progress{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:60;
  background:transparent;pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--green-bright),var(--green));
  transition:width .08s linear;
}

.post-head{padding:44px 0 36px;position:relative}
.post-head::before{
  content:"";position:absolute;left:0;right:0;top:0;height:300px;z-index:0;pointer-events:none;
  background:radial-gradient(760px 320px at 22% -34%,rgba(23,166,127,.11),transparent 66%);
}
.post-head > *{position:relative;z-index:1}
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:6px 12px 6px 9px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.65);
  margin-bottom:30px;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.back:hover{color:var(--green);border-color:rgba(13,103,80,.3);background:#fff;transform:translateX(-2px)}

.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);margin-bottom:16px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.post-meta .sp{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}

h1.post-title{
  font-size:clamp(27px,3.7vw,40px);
  line-height:1.28;font-weight:700;letter-spacing:-.03em;
  margin-bottom:18px;
}
.standfirst{
  font-size:16.5px;line-height:1.85;color:var(--ink-2);
  padding-left:16px;
  border-left:2px solid rgba(23,166,127,.4);
  max-width:62ch;
}
.post-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}

/* 正文 */
.prose{
  max-width:var(--w-read);
  font-size:16.5px;line-height:1.95;color:#28332C;
  padding-bottom:20px;
}
.prose > p{margin-bottom:22px}
.prose > p:first-child{font-size:17px;color:var(--ink)}

.prose h2{
  font-size:20px;font-weight:600;letter-spacing:-.018em;line-height:1.5;
  margin:42px 0 16px;
  padding-left:14px;position:relative;
  color:var(--ink);
}
.prose h2::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;
  border-radius:3px;background:linear-gradient(to bottom,var(--green-bright),rgba(23,166,127,.25));
}
.prose h3{
  font-size:16.5px;font-weight:600;margin:30px 0 12px;letter-spacing:-.01em;
}
.prose strong{font-weight:600;color:var(--ink)}

.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--green-bright)}

.prose blockquote{
  margin:26px 0;padding:18px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--green-bright);
  border-radius:0 12px 12px 0;
  font-size:15.5px;line-height:1.85;color:var(--ink-2);
}
.prose blockquote p:last-child{margin-bottom:0}

.prose code{
  font-family:var(--mono);
  font-size:.875em;
  background:var(--green-soft);
  color:#0A5140;
  padding:2px 6px;border-radius:5px;
  border:1px solid rgba(13,103,80,.07);
  word-break:break-word;
}
.prose pre{
  margin:26px 0;padding:20px 22px;
  background:#13201A;
  border-radius:13px;
  overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -16px rgba(19,32,26,.6);
}
.prose pre code{
  background:none;border:0;padding:0;color:#CFE3D8;
  font-size:13px;line-height:1.85;
  display:block;white-space:pre;
}
.prose pre code .cm{color:#7E9C8C}
.prose pre code .kw{color:#7FD9B8}
.prose pre code .st{color:#E5C48A}

.prose hr{
  border:0;border-top:1px solid var(--line);
  margin:40px 0;
}

/* 提示块 */
.callout{
  margin:28px 0;padding:17px 20px 18px;
  background:linear-gradient(to bottom right,rgba(247,239,224,.7),rgba(247,239,224,.4));
  border:1px solid rgba(169,118,46,.18);
  border-radius:12px;
  font-size:15px;line-height:1.82;color:#5C4A2E;
}
.callout b{color:#8A5F20;font-weight:600}
.callout .lbl{
  display:block;font-size:11.5px;letter-spacing:.12em;
  color:var(--amber);margin-bottom:7px;font-weight:600;
}

/* 文章尾部导航 */
.post-end{margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
.end-sign{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--ink-3);margin-bottom:26px;
}
.end-sign .bar{height:1px;width:34px;background:var(--line);flex:none}

.post-nav{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap}
.pn{
  flex:1 1 0;min-width:240px;
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:17px 19px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.pn:hover{transform:translateY(-2px);border-color:rgba(13,103,80,.26);box-shadow:var(--sh-2)}
.pn .k{font-size:11.5px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:6px;display:block}
.pn b{font-size:14.5px;font-weight:600;line-height:1.55;display:block;transition:color .2s}
.pn:hover b{color:var(--green)}
.pn.next{text-align:right}
.pn:only-child{text-align:left}

.back-all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:var(--green);text-decoration:none;
  font-weight:500;
}
.back-all:hover{text-decoration:underline;text-underline-offset:4px}

/* ============ 响应式 ============ */

@media (max-width:900px){
  .post-nav{flex-direction:column}
  .pn.next{text-align:left}
}

@media (max-width:700px){
  body{font-size:16px;line-height:1.82}
  .wrap{padding:0 19px}
  .nav .wrap{height:60px}
  .brand .who i{display:none}
  .nav nav{gap:0}
  .nav nav a{padding:7px 9px;font-size:13.5px}

  .hero{padding:48px 0 40px}
  .kicker{font-size:12px;margin-bottom:20px}
  h1.display{letter-spacing:-.028em;margin-bottom:20px}
  .lede{font-size:15.5px}
  .cta{margin-top:28px}
  .btn{height:44px;padding:0 18px;font-size:14.5px}

  .stats{margin-top:38px;padding-top:20px;gap:14px 0}
  .stat{padding-right:22px;margin-right:22px;flex:1 1 auto}
  .stat b{font-size:20px}
  .stat span{font-size:11.5px}

  section{padding:20px 0 46px}
  .sec-head h2{font-size:18px}
  .sec-head .note-sm{display:none}
  .grid{grid-template-columns:1fr;gap:12px}
  .card{padding:20px}
  .card h3{font-size:15px}

  .note-card{grid-template-columns:auto 1fr;gap:14px;padding:19px 18px 20px}
  .note-card .num{font-size:12px;padding-top:4px}
  .note-card h3{font-size:16.5px;margin-bottom:8px}
  .note-card .excerpt{font-size:14px}
  .note-card .go{display:none}
  .tags{margin-top:12px}

  footer{padding:34px 0 48px}
  .foot-top{flex-direction:column;gap:18px}

  .post-head{padding:30px 0 26px}
  .prose{font-size:16px;line-height:1.9}
  .prose > p:first-child{font-size:16px}
  .prose h2{font-size:18.5px;margin:36px 0 14px}
  .prose pre{padding:16px 16px;border-radius:11px;margin:22px 0}
  .prose pre code{font-size:12px}
  .prose blockquote{padding:15px 17px;font-size:15px}
  .standfirst{font-size:15.5px;padding-left:13px}
  .post-end{margin-top:40px;padding-top:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============ 深色模式 ============ */

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F1512;
    --paper-2:#151C18;
    --surface:#18211C;
    --surface-2:#1B2520;
    --ink:#E7EDE9;
    --ink-2:#9FADA6;
    --ink-3:#7C8A83;
    --ink-4:#5E6C65;
    --line:rgba(231,237,233,.10);
    --line-2:rgba(231,237,233,.055);
    --green:#63D3AE;
    --green-mid:#4FC39C;
    --green-bright:#63D3AE;
    --green-soft:rgba(99,211,174,.12);
    --amber:#D8B172;
    --amber-soft:rgba(216,177,114,.12);
    --sh-1:0 1px 2px rgba(0,0,0,.3);
    --sh-2:0 2px 4px rgba(0,0,0,.25),0 14px 30px -16px rgba(0,0,0,.5);
    --sh-3:0 4px 10px rgba(0,0,0,.28),0 26px 52px -24px rgba(0,0,0,.6);
  }
  .nav{background:rgba(15,21,18,.8)}
  .hero::before{
    background:
      radial-gradient(1120px 440px at 6% -12%,rgba(99,211,174,.13),transparent 62%),
      radial-gradient(880px 400px at 96% -6%,rgba(216,177,114,.07),transparent 58%);
  }
  .hero::after{background-image:radial-gradient(circle at 1px 1px,rgba(231,237,233,.11) 1px,transparent 0)}
  .kicker{background:rgba(24,33,28,.7)}
  .btn-solid{background:linear-gradient(160deg,#2FA37F,#1B7A5E);color:#04150F}
  .btn-line{background:rgba(24,33,28,.6)}
  .btn-line:hover{background:var(--surface)}
  h1.display em{color:var(--green)}
  .prose{color:#C3CEC7}
  .prose > p:first-child{color:var(--ink)}
  .prose code{background:rgba(99,211,174,.13);color:#9FE3CC;border-color:rgba(99,211,174,.12)}
  .note-card .excerpt code{background:rgba(231,237,233,.08);color:#B9C7BF}
  .prose pre{background:#0A110E;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px -16px rgba(0,0,0,.8)}
  .callout{
    background:linear-gradient(to bottom right,rgba(216,177,114,.11),rgba(216,177,114,.05));
    border-color:rgba(216,177,114,.18);color:#D7C4A2;
  }
  .callout b{color:#EDD0A0}
  .foot-tag{color:var(--ink-2)}
  footer{background:linear-gradient(to bottom,rgba(21,28,24,.6),rgba(16,22,19,.95))}
  .back{background:rgba(24,33,28,.7)}
  .back:hover{background:var(--surface)}
}