/* ==========================================================================
   LTHY · Components: nav, buttons, glass cards, post cards, palette, chrome
   ========================================================================== */

/* --- Glass surface ---------------------------------------------------- */

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: .75rem;
  transition: padding var(--dur) var(--ease-out);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .6rem .55rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.nav.is-stuck { padding-block: .45rem; }

.nav.is-stuck .nav__inner {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-color: var(--border);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .9);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-weight: 680;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.brand__mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--grad-brand);
  color: var(--on-brand);
  font-size: .95rem;
  font-weight: 800;
  box-shadow: 0 8px 26px -8px color-mix(in oklab, var(--accent) 80%, transparent);
  transition: transform var(--dur) var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

.brand__text { font-size: .98rem; }
.brand__text em { color: var(--ink-faint); font-style: normal; margin-inline: .3rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-left: auto;
}

.nav__links a {
  position: relative;
  padding: .5rem .85rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav__links a:hover { color: var(--ink); background: var(--surface-hi); }

.nav__links a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-hi);
}
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 16px; height: 2px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--grad-brand);
}

.nav__actions { display: flex; align-items: center; gap: .3rem; }

/* --- Icon button ------------------------------------------------------ */
.icon-btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  color: var(--ink-dim);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.icon-btn:hover {
  color: var(--ink);
  background: var(--surface-hi);
  border-color: var(--border);
  transform: translateY(-1px);
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nav__burger { display: none; }

.kbd {
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .16rem .42rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hi);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur), border-color var(--dur), background var(--dur);
}
.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  color: var(--on-brand);
  background: var(--grad-brand);
  background-size: 180% 100%;
  box-shadow: 0 16px 40px -18px color-mix(in oklab, var(--c-red) 85%, transparent);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 22px 52px -18px color-mix(in oklab, var(--c-red) 95%, transparent);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 45%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(130%); }

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--border-hi);
  background: var(--surface);
}
.btn--ghost:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 26px -6px color-mix(in oklab, var(--accent) 55%, transparent);
}

.btn--sm { padding: .55rem 1rem; font-size: var(--fs-xs); }

/* ==========================================================================
   Chips, badges, meta
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
  --tone: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .26rem .68rem;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--tone) 78%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--tone) 34%, transparent);
  background: color-mix(in oklab, var(--tone) 12%, transparent);
}

/* --- 真实截图封面 ---------------------------------------------------- */
.post-card__cover.cover--image { height: 190px; background: none; }
.post-card__cover.cover--image::after { display: none; }

.post-card__cover.cover--image img,
.post-head__cover.cover--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

button.chip { transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
button.chip:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--tone) 22%, transparent); }
button.chip[aria-pressed="true"] {
  background: var(--tone);
  color: var(--tone-ink, #06090f);
  border-color: transparent;
  box-shadow: 0 10px 30px -12px var(--tone);
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

.flag {
  display: inline-flex;
  align-items: center;
  margin-left: .15rem;
  padding: .08rem .45rem;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: #06090f;
  background: var(--grad-brand);
}

/* ==========================================================================
   Post cards
   ========================================================================== */

.posts-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .posts-grid { grid-template-columns: 1fr; }
}

.post-card { overflow: hidden; transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); }

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop), 0 0 50px -22px color-mix(in oklab, var(--accent) 90%, transparent);
}

.post-card__link { display: flex; flex-direction: column; height: 100%; }

.post-card__cover {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.post-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .5) 1px, transparent 0);
  background-size: 14px 14px;
  opacity: .22;
  mix-blend-mode: overlay;
}

.post-card__cover-inner {
  position: absolute;
  inset: -30%;
  background: var(--cover);
  filter: blur(24px) saturate(140%);
  transform: scale(1.05);
  transition: transform var(--dur-slow) var(--ease-out);
}
.post-card:hover .post-card__cover-inner { transform: scale(1.16) rotate(3deg); }

.cover--aurora { --cover: conic-gradient(from 200deg at 30% 40%, #d92b2b, #f0b429, #8f1420, #d92b2b); }
.cover--neon   { --cover: conic-gradient(from 40deg at 60% 50%, #e2762f, #f0b429, #d92b2b, #e2762f); }
.cover--sunset { --cover: conic-gradient(from 120deg at 40% 60%, #ffb347, #e2453f, #8f1420, #ffb347); }
.cover--ocean  { --cover: conic-gradient(from 300deg at 50% 40%, #8f1420, #d92b2b, #f0b429, #8f1420); }
.cover--forest { --cover: conic-gradient(from 80deg at 40% 50%, #b0161f, #8f1420, #ffb347, #b0161f); }
.cover--mono   { --cover: conic-gradient(from 180deg at 50% 50%, #6b3a2a, #f0b429, #3d0e18, #6b3a2a); }


.post-card__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1;
}

.post-card__title {
  font-size: 1.16rem;
  line-height: 1.4;
  transition: color var(--dur-fast);
}
.post-card:hover .post-card__title { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); }

.post-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__foot {
  margin-top: auto;
  padding-top: .35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  transition: color var(--dur-fast), gap var(--dur-fast);
}
.post-card:hover .post-card__more { color: var(--accent); gap: .6rem; }

/* --- Featured card: a full-width editorial row ------------------------ */
.post-card--featured { grid-column: 1 / -1; }
.post-card--featured .post-card__title { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.post-card--featured .post-card__excerpt { -webkit-line-clamp: 4; font-size: .95rem; }
.post-card--featured .post-card__cover { height: 172px; }

@media (min-width: 880px) {
  .post-card--featured .post-card__link { flex-direction: row; }

  .post-card--featured .post-card__cover {
    width: 44%;
    height: auto;
    min-height: 250px;
    flex: 0 0 44%;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }

  .post-card--featured .post-card__body { padding: 1.9rem 2.1rem; }
  .post-card--featured .post-card__excerpt { -webkit-line-clamp: 3; }
}

/* ==========================================================================
   Code blocks
   ========================================================================== */

.code {
  position: relative;
  margin-block: 1.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-soft) 90%, var(--c-gold) 5%);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .7rem .5rem .95rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.code__lang {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.code__copy {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: .22rem .6rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--ink-dim);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.code__copy:hover { color: var(--ink); border-color: var(--border-hi); background: var(--surface-hi); }
.code__copy.is-done { color: var(--c-gold); border-color: color-mix(in oklab, var(--c-gold) 50%, transparent); }

.code pre {
  margin: 0;
  padding: 1.05rem 1.15rem;
  overflow-x: auto;
}
.code code {
  font-family: var(--font-mono);
  font-size: .845rem;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--ink);
  tab-size: 2;
}

.tok-com { color: var(--ink-faint); font-style: italic; }
/* 代码高亮不再用青紫绿那套霓虹色。改成暖色系，只留一点橄榄绿给字符串，
   否则整块代码全是红的会读不出层次。 */
.tok-str { color: #a8b56f; }
.tok-kw  { color: #dd7a6a; }
.tok-num { color: #e0a33c; }
.tok-fn  { color: #e8c37a; }
.tok-type { color: #c9b8a4; }
.tok-tag { color: #d98a9e; }
.tok-attr { color: #d9a05e; }

[data-theme="light"] .tok-com { color: #9a7a6f; }
[data-theme="light"] .tok-kw { color: #b0161f; }
[data-theme="light"] .tok-str { color: #5f7233; }
[data-theme="light"] .tok-num { color: #9a6a10; }
[data-theme="light"] .tok-fn { color: #8a5a12; }
[data-theme="light"] .tok-type { color: #6b4a42; }
[data-theme="light"] .tok-tag { color: #a8285a; }

/* ==========================================================================
   Command palette
   ========================================================================== */

.palette { position: fixed; inset: 0; z-index: 200; display: grid; align-items: start; justify-items: center; padding: min(14vh, 8rem) 1rem 1rem; }
.palette[hidden] { display: none; }

.palette__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 62%, transparent);
  animation: fade-in var(--dur) var(--ease-out);
}

@keyframes fade-in { from { opacity: 0; } }

.palette__panel {
  position: relative;
  width: min(100%, 620px);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: pop-in var(--dur) var(--ease-spring);
}

@keyframes pop-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }

.palette__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.palette__head svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.palette__head input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 1rem;
}
.palette__head input::placeholder { color: var(--ink-faint); }

.palette__list {
  list-style: none;
  padding: .5rem;
  margin: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.palette__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .7rem .8rem;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--dur-fast);
}
.palette__item[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.palette__item:hover { background: var(--surface-hi); }

.palette__item-icon {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--cover, var(--grad-brand));
  filter: saturate(140%);
}
.palette__item-icon span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 12px rgba(255, 255, 255, .9); }

.palette__item-main { min-width: 0; flex: 1; }
.palette__item-title { display: block; font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-sub { display: block; font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-go { color: var(--ink-faint); font-size: var(--fs-xs); }

.palette__empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); }

.palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* ==========================================================================
   Page chrome: progress bar, to-top, toast
   ========================================================================== */

.progress-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .1s linear;
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--border-hi);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--ink-dim);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur), color var(--dur);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent); box-shadow: 0 0 30px -8px var(--accent); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 300;
  translate: -50% 0;
  padding: .7rem 1.2rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-hi);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  font-size: var(--fs-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.toast.is-on { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 6%, transparent));
}

.footer__inner {
  display: grid;
  gap: 1.6rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: start;
}

.footer__brand { display: flex; align-items: center; gap: .7rem; font-weight: 680; }
.footer__brand p { font-size: var(--fs-sm); color: var(--ink-faint); font-weight: 400; margin-top: .5rem; max-width: 42ch; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__nav a { font-size: var(--fs-sm); color: var(--ink-dim); transition: color var(--dur-fast); }
.footer__nav a:hover { color: var(--accent); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive navigation
   ========================================================================== */

@media (max-width: 780px) {
  .nav__burger { display: grid; }

  .nav__links {
    position: fixed;
    inset: calc(var(--nav-h) + .5rem) var(--gutter) auto var(--gutter);
    display: grid;
    gap: .25rem;
    padding: .75rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
    margin-left: 0;
  }

  .nav[data-open="true"] .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: .8rem 1rem; font-size: .95rem; }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__links a[aria-current="page"] { background: color-mix(in oklab, var(--accent) 16%, transparent); }
}

/* ==========================================================================
   革命红金 · revolutionary motifs
   ========================================================================== */

/* 红星：正红填充 + 金边。paint-order 让金边压在填充之下，星形不会被撑胖。 */
.star {
  display: inline-block;
  width: .95em;
  height: .95em;
  flex: none;
  fill: var(--c-star);
  stroke: var(--c-gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke fill;
  vertical-align: -.1em;
}


/* --- Slogan pill ---------------------------------------------------------- */
.slogan {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem .42rem .8rem;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--c-gold) 42%, transparent);
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--c-red) 30%, transparent), transparent 72%),
    var(--surface);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: color-mix(in oklab, var(--c-gold) 58%, var(--ink));
  box-shadow: inset 0 0 22px -10px color-mix(in oklab, var(--c-red) 90%, transparent);
}

.slogan .star { flex: none; }

/* --- 毛主席语录（页脚轮播）--------------------------------------------- */
/* 语录接替原来那行说明文字：同一位置、同样用正文字体，只是内容换成
   毛主席语录，并在末尾加了换一条的按钮。 */
.quote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
  max-width: 100%;
  margin-top: .6rem;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.quote.is-swapping { opacity: 0; transform: translateY(5px); }

.quote__text {
  font-size: clamp(1.02rem, .92rem + .5vw, 1.22rem);
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--ink);
  min-width: 0;
}

.quote__source {
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.quote__next {
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--ink-faint);
  background: transparent;
  transition: transform var(--dur) var(--ease-spring), color var(--dur-fast), border-color var(--dur-fast);
}

.quote__next:hover {
  transform: rotate(90deg);
  color: var(--c-gold);
  border-color: color-mix(in oklab, var(--c-gold) 55%, transparent);
}

.credit {
  margin-top: 1.2rem;
  font-size: .7rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

.credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.credit a:hover { color: var(--accent); }

.quote__next svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* ==========================================================================
   液态玻璃 · Liquid Glass（全站）
   --------------------------------------------------------------------------
   两条经验，都是踩出来的：

   1) 折射要放在模糊**前面**（var(--lg-filter) 在 blur() 之前）。反过来的话，先把背景
      糊成一片再去位移，位移的是糊掉的东西，等于没位移 —— 看起来就只剩高斯模糊。
   2) 玻璃底色要**薄**。backdrop-filter 位移的是「照片 + 一层底色」的合成，底色越接近
      纯色，位移越看不出来。底色一厚，折射就被自己盖掉了。

   整块均匀磨砂，不做边缘环 —— 边缘环那版反而把折射挤没了。
   折射贴图由 assets/js/liquid.js 按尺寸和圆角生成（圆角矩形 SDF）。

   变量都带兜底值：万一 HTML 与 CSS 版本被缓存搞错配，也只是退回普通半透明，不会塌。
   ========================================================================== */

/* 整块换材质的面 */
.glass,
.lg,
.social a,
.search-field,
.to-top,
.toast,
.palette__panel,
.nav .nav__inner,
.nav.is-stuck .nav__inner {
  position: relative;
  background: var(--glass-tint, rgba(14, 8, 11, .24));
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, .22));
  /* 第一行是没有折射时的兜底 */
  -webkit-backdrop-filter: blur(var(--lg-blur, 6px)) saturate(150%);
  backdrop-filter: blur(var(--lg-blur, 6px)) saturate(150%);
  -webkit-backdrop-filter: var(--lg-filter, ) blur(var(--lg-blur, 6px)) saturate(150%);
  backdrop-filter: var(--lg-filter, ) blur(var(--lg-blur, 6px)) saturate(150%);
  box-shadow:
    inset 0 1.5px 0 0 var(--glass-specular, rgba(255, 255, 255, .85)),
    inset 0 -1px 0 0 var(--glass-bounce, rgba(255, 255, 255, .14)),
    var(--glass-lift, 0 10px 30px rgba(0, 0, 0, .42));
}

/* 卡片本来就有自己的圆角，别丢 */
.glass { border-radius: var(--r-lg); }

/* 有自己配色的面：保留颜色，只补材质与浮起 */
.chip,
.code,
.toolbar,
.toc,
.stance,
.btn--ghost {
  -webkit-backdrop-filter: blur(var(--lg-blur, 6px)) saturate(150%);
  backdrop-filter: blur(var(--lg-blur, 6px)) saturate(150%);
  -webkit-backdrop-filter: var(--lg-filter, ) blur(var(--lg-blur, 6px)) saturate(150%);
  backdrop-filter: var(--lg-filter, ) blur(var(--lg-blur, 6px)) saturate(150%);
  box-shadow:
    inset 0 1.5px 0 0 var(--glass-specular, rgba(255, 255, 255, .85)),
    inset 0 -1px 0 0 var(--glass-bounce, rgba(255, 255, 255, .14)),
    var(--glass-lift, 0 10px 30px rgba(0, 0, 0, .42));
}

/* 只有指针反光还用伪元素 */
.glass::after,
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), var(--glass-sheen, rgba(255,255,255,.16)), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.glass:hover::after,
.lg:hover::after { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .glass::after, .lg::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .lg, .social a, .search-field, .to-top, .toast, .palette__panel,
  .chip, .code, .toolbar, .toc, .stance, .btn--ghost,
  .nav .nav__inner, .nav.is-stuck .nav__inner {
    background: var(--glass-opaque, #1c1014);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}