/* High-contrast technology skin for Hexo Stellar.
   Readability is the first priority: no text reveal/hiding and no text bloom. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: dark !important;
  --background: #070b14 !important;
  --card: #101a2b !important;
  --block: #152238 !important;
  --block-border: #29435f !important;
  --theme-block: #152238 !important;
  --theme-border: #29435f !important;
  --theme-codeblock: #080f1b !important;
  --text: #ffffff !important;
  --text-p0: #ffffff !important;
  --text-p1: #eef4fc !important;
  --text-p2: #d8e2ee !important;
  --text-p3: #b7c5d6 !important;
  --text-p4: #96a8bc !important;
  --text-meta: #b7c5d6 !important;
  --text-code: #b9efff !important;
  --link: #73dcff !important;
  --link-a20: rgba(115, 220, 255, .20) !important;
  --bg-a20: rgba(7, 11, 20, .20) !important;
  --bg-a50: rgba(7, 11, 20, .50) !important;
  --bg-a60: rgba(7, 11, 20, .60) !important;
  --bg-a75: rgba(7, 11, 20, .75) !important;
  --bg-a100: #070b14 !important;
  --tech-cyan: #45dcff;
  --tech-blue: #68a6ff;
  --tech-violet: #ae91ff;
  --tech-green: #61e5ad;
  --tech-border: #29435f;
  --tech-shadow: 0 14px 38px rgba(0, 0, 0, .30);
}

html { background: #070b14 !important; }
body {
  color: #eef4fc !important;
  font-family: Inter, "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 10% 5%, rgba(24, 134, 190, .12), transparent 30rem),
    radial-gradient(circle at 88% 10%, rgba(94, 70, 180, .09), transparent 30rem),
    #070b14 !important;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(84, 185, 226, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 185, 226, .045) 1px, transparent 1px);
  background-size: 48px 48px;
}
.l_body, .site-footer { position: relative; z-index: 1; }

#tech-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .40;
}
#cyber-progress {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tech-blue), var(--tech-cyan));
}

/* Never let the custom skin or a failed observer hide page content. */
.cyber-reveal,
.cyber-reveal.cyber-visible,
.l_main > article,
.l_main article.md-text,
.md-text,
.md-text.content {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Main article: explicit opaque surface and explicit text colors. */
.l_main article.md-text,
.l_main > article .md-text,
.md-text.content {
  color: #eef4fc !important;
}
.md-text,
.md-text p,
.md-text li,
.md-text dd,
.md-text dt,
.md-text summary,
.md-text figcaption,
.md-text label,
.md-text blockquote,
.md-text table,
.md-text td,
.md-text th {
  color: #e7eef8 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.md-text p, .md-text li { line-height: 1.82; }
.md-text strong, .md-text b {
  color: #ffffff !important;
  font-weight: 700;
}
.md-text h1, .md-text h2, .md-text h3,
.md-text h4, .md-text h5, .md-text h6 {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 750;
  text-shadow: none !important;
}
.md-text h2::before, .md-text h3::before {
  color: var(--tech-cyan) !important;
  text-shadow: none !important;
}
.md-text a:not(.tag-plugin):not(.headerlink) {
  color: #79e1ff !important;
  text-decoration-color: rgba(121, 225, 255, .55) !important;
}
.md-text code:not(pre code) {
  color: #b9efff !important;
  background: #10283a !important;
  border: 1px solid #28536c;
}

/* Inline colors in the 408 notes were designed for white pages and become
   unreadable on dark pages. Map those exact legacy colors to bright variants. */
.md-text span[style*="#1677c8"], .md-text span[style*="rgb(22, 119, 200)"] { color: #71c7ff !important; }
.md-text span[style*="#258a4b"], .md-text span[style*="rgb(37, 138, 75)"] { color: #79e6a6 !important; }
.md-text span[style*="#22a06b"] { color: #76e3b0 !important; }

/* 408 custom callouts: their embedded <style> uses pale backgrounds and wins
   by source order. Higher-specificity rules keep both background and text dark-safe. */
.md-text .k408-user,
.md-text .k408-extra,
.md-text .k408-warn,
.md-text .k408-source {
  color: #f4f8ff !important;
  background: #142238 !important;
  border-top: 1px solid #304863 !important;
  border-right: 1px solid #304863 !important;
  border-bottom: 1px solid #304863 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.md-text .k408-user { background: #10263d !important; border-left-color: #5caeff !important; }
.md-text .k408-extra { background: #102b23 !important; border-left-color: #55d99a !important; }
.md-text .k408-warn { background: #302713 !important; border-left-color: #f0bd4f !important; }
.md-text .k408-source { background: #251d3b !important; border-left-color: #a98cff !important; }
.md-text .k408-user *, .md-text .k408-extra *,
.md-text .k408-warn *, .md-text .k408-source * {
  color: #f4f8ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.md-text .k408-tag {
  color: #eaf2fb !important;
  background: #1a2a3d !important;
  border: 1px solid #35506a;
}

/* Stellar note plug-in, including all direct title/body descendants. */
.md-text .tag-plugin.note,
.md-text .tag-plugin.note[color] {
  color: #eef4fc !important;
  background: #142238 !important;
  border: 1px solid #304863 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.md-text .tag-plugin.note > .title,
.md-text .tag-plugin.note > .body,
.md-text .tag-plugin.note > .body p,
.md-text .tag-plugin.note li,
.md-text .tag-plugin.note span,
.md-text .tag-plugin.note strong {
  color: #f4f8ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.md-text .tag-plugin.note[color="blue"], .md-text .tag-plugin.note.blue { background: #10263d !important; border-left: 5px solid #5caeff !important; }
.md-text .tag-plugin.note[color="cyan"], .md-text .tag-plugin.note.cyan { background: #0e2932 !important; border-left: 5px solid #45dcff !important; }
.md-text .tag-plugin.note[color="green"], .md-text .tag-plugin.note.green { background: #102b23 !important; border-left: 5px solid #55d99a !important; }
.md-text .tag-plugin.note[color="yellow"], .md-text .tag-plugin.note.yellow { background: #302713 !important; border-left: 5px solid #f0bd4f !important; }
.md-text .tag-plugin.note[color="orange"], .md-text .tag-plugin.note.orange { background: #332014 !important; border-left: 5px solid #ff9e5f !important; }
.md-text .tag-plugin.note[color="red"], .md-text .tag-plugin.note.red { background: #32191f !important; border-left: 5px solid #ff7887 !important; }
.md-text .tag-plugin.note[color="purple"], .md-text .tag-plugin.note.purple { background: #251d3b !important; border-left: 5px solid #a98cff !important; }

/* Article banner: image backgrounds need a permanent dark scrim for metadata. */
.article.banner { background: #132034 !important; }
.article.banner .bg { opacity: .72 !important; }
.article.banner .bg + .content {
  background: linear-gradient(180deg, rgba(3, 8, 16, .72) 0%, rgba(3, 8, 16, .20) 42%, rgba(3, 8, 16, .80) 100%) !important;
}
.article.banner .content,
.article.banner .content .top,
.article.banner .content .bottom,
.article.banner .content .title,
.article.banner .content h1,
.article.banner .content a,
.article.banner .content span,
.article.banner .content .meta {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .95) !important;
}
.article.banner:not(:has(.bg)) .content,
.article.banner:not(:has(.bg)) .content * { text-shadow: none !important; }

/* Top in-content navbar: remove the white bloom shown in the screenshot. */
.md-text .tag-plugin.navbar,
.tag-plugin.navbar {
  color: #eaf2fb !important;
  background: #111d30 !important;
  border: 1px solid #35506a !important;
  box-shadow: none !important;
  filter: none !important;
}
.md-text .tag-plugin.navbar a,
.tag-plugin.navbar a {
  color: #eaf2fb !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.md-text .tag-plugin.navbar a.active,
.md-text .tag-plugin.navbar a:hover,
.tag-plugin.navbar a.active,
.tag-plugin.navbar a:hover {
  color: #ffffff !important;
  background: #24415e !important;
}

/* Sidebar and list cards. */
.l_left .sidebg { background: rgba(7, 12, 22, .96) !important; }
.l_left .leftbar-container {
  color: #eaf2fb !important;
  border: 1px solid #29435f !important;
  background: linear-gradient(145deg, #0e1b2e, #091423) !important;
  box-shadow: var(--tech-shadow);
}
.logo-wrap .title, .logo-wrap .title a {
  color: #ffffff !important;
  text-shadow: none !important;
}
.logo-wrap .subtitle { color: #cfdae7 !important; opacity: 1 !important; }
.nav-area .menu .nav-item {
  color: #e4edf7 !important;
  border: 1px solid #29435f;
  background: #122137 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.nav-area .menu .nav-item span,
.nav-area .menu .nav-item a { color: inherit !important; text-shadow: none !important; }
.nav-area .menu .nav-item:hover,
.nav-area .menu .nav-item.active {
  color: #ffffff !important;
  border-color: #4ca9d1 !important;
  background: #18314c !important;
}
.widget-wrapper .widget-header,
.widget-wrapper .widget-header > span { color: #9fe8fa !important; opacity: 1 !important; }
.widget-wrapper .widget-header > span::before { content: "// "; color: var(--tech-cyan); }
.widget-wrapper .widget-body,
.widget-wrapper .widget-body a,
.widget-wrapper .widget-body span {
  color: #d9e4ef !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.widget-wrapper .widget-body a:hover,
.widget-wrapper .widget-body a.active { color: #8ceaff !important; }
.widget-wrapper .widget-body a.active { background: #102b43 !important; }
.search-wrapper, .search-wrapper input, .search-input {
  color: #eaf2fb !important;
  opacity: 1 !important;
}
.search-wrapper input::placeholder, .search-input::placeholder { color: #aebdd0 !important; opacity: 1; }

.post-list .post-card {
  color: #e7eef8 !important;
  background: #101b2c !important;
  border-color: #29435f !important;
  box-shadow: var(--tech-shadow);
}
.post-list .post-title { color: #ffffff !important; text-shadow: none !important; }
.post-list .post-card .meta,
.post-list .post-card .excerpt { color: #c9d6e4 !important; opacity: 1 !important; }

.md-text blockquote {
  color: #e8f1fb !important;
  background: #102438 !important;
  border-color: #3e9fc4 !important;
}
figure.highlight, .highlight, pre:not([class]):has(> code) {
  color: #e7eef8 !important;
  background: #080f1b !important;
  border: 1px solid #29435f !important;
  box-shadow: none !important;
}
figure.highlight::before {
  content: "●  ●  ●";
  display: block;
  height: 24px;
  padding: 0 12px;
  color: #66bfd4;
  font-size: 9px;
  line-height: 24px;
  letter-spacing: 4px;
  background: #101b2b;
  border-bottom: 1px solid #29435f;
}

input, textarea, .search-input, button, .button { border-color: #35506a !important; }
::selection { color: #061017; background: #7be5ff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #080d17; }
::-webkit-scrollbar-thumb { border: 2px solid #080d17; border-radius: 10px; background: #66869b; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #tech-particles { display: none; }
}
@media screen and (max-width: 768px) {
  body { background-attachment: scroll !important; }
  body::before { opacity: .18; background-size: 36px 36px; }
  #tech-particles { opacity: .25; }
  .l_left .leftbar-container { border-radius: 0; border-left: 0; backdrop-filter: none; }
}


/* v4 corrective layer -------------------------------------------------------
   These selectors target Stellar's REAL sticky navbar (.navbar-blur), rather
   than only the unrelated tag-plugin navbar. */
.navbar,
.navbar-blur,
.navbar-container,
.navbar nav,
.navbar nav p {
  text-shadow: none !important;
  filter: none !important;
}
.navbar-blur {
  background: #111a2a !important;
  border: 1px solid #465a75 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.navbar-blur::before,
.navbar-blur::after,
.navbar-container::before,
.navbar-container::after {
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.navbar nav a,
.navbar nav a:link,
.navbar nav a:visited {
  color: #dbe7f5 !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.navbar nav a.active,
.navbar nav a:hover {
  color: #ffffff !important;
  background: #263b58 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Keep the original 408 text verbatim, but use dark opaque surfaces so the
   inherited high-contrast text can never become white-on-pastel. */
body .l_main .md-text div.k408-user,
body .l_main article div.k408-user { background-color: #102d4a !important; border-color: #58b3ff !important; color: #f7fbff !important; }
body .l_main .md-text div.k408-extra,
body .l_main article div.k408-extra { background-color: #12372b !important; border-color: #54d99a !important; color: #f7fbff !important; }
body .l_main .md-text div.k408-warn,
body .l_main article div.k408-warn { background-color: #403313 !important; border-color: #f2bd46 !important; color: #fffdf5 !important; }
body .l_main .md-text div.k408-source,
body .l_main article div.k408-source { background-color: #30234d !important; border-color: #ae8cff !important; color: #fbf8ff !important; }
body .l_main div:is(.k408-user,.k408-extra,.k408-warn,.k408-source) :is(p,strong,b,span,a,br) {
  color: inherit !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Motion is decorative only: content starts and remains visible. */
@keyframes tech-grid-drift { to { background-position: 48px 48px, 48px 48px; } }
@keyframes tech-border-pulse {
  0%, 100% { border-color: #29435f; }
  50% { border-color: #3f6b8d; }
}
body::before { animation: tech-grid-drift 28s linear infinite; }
.post-list .post-card,
.md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source),
.tag-plugin.note {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .post-list .post-card:hover,
  .md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source):hover,
  .tag-plugin.note:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .20) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* v6 visible motion layer -------------------------------------------------
   Deliberately visible, still composited and non-interactive. */
#tech-particles {
  z-index: 2 !important;
  opacity: .72 !important;
  mix-blend-mode: screen;
}

#tech-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(24, 165, 224, .24), transparent 18rem),
    rgba(3, 8, 18, .96);
  transition: opacity .42s ease, visibility .42s step-end;
}
#tech-loader::before {
  content: "";
  position: absolute;
  inset: -100% 0;
  background: linear-gradient(transparent 47%, rgba(69, 220, 255, .14) 50%, transparent 53%);
  animation: tech-loader-scan 1.15s linear infinite;
}
#tech-loader::after {
  content: "INITIALIZING  //  FENG LAB";
  position: absolute;
  left: 50%;
  top: calc(50% + 66px);
  transform: translateX(-50%);
  color: #b9efff;
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .18em;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(69, 220, 255, .75);
}
#tech-loader.is-done { opacity: 0; visibility: hidden; }
.tech-loader-core {
  position: relative;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(100, 220, 255, .48);
  border-radius: 50%;
  box-shadow: 0 0 38px rgba(69, 220, 255, .20), inset 0 0 25px rgba(69, 220, 255, .12);
}
.tech-loader-core::before,
.tech-loader-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.tech-loader-core::before {
  inset: 8px;
  border: 3px solid transparent;
  border-top-color: #45dcff;
  border-right-color: #68a6ff;
  border-bottom-color: rgba(174, 145, 255, .55);
  filter: drop-shadow(0 0 7px #45dcff);
  animation: tech-loader-spin .72s linear infinite;
}
.tech-loader-core::after {
  inset: 31px;
  background: #d8f8ff;
  box-shadow: 0 0 8px #fff, 0 0 24px #45dcff, 0 0 42px rgba(69, 220, 255, .8);
  animation: tech-loader-beat .55s ease-in-out infinite alternate;
}
.tech-loader-label { display: none; }
@keyframes tech-loader-spin { to { transform: rotate(360deg); } }
@keyframes tech-loader-beat { to { transform: scale(.58); opacity: .45; } }
@keyframes tech-loader-scan { to { transform: translateY(50%); } }

/* Bright pointer halo plus a precise center reticle. */
#tech-pointer-aura {
  position: fixed;
  z-index: 2147482990;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  background: radial-gradient(circle, rgba(125, 235, 255, .22) 0, rgba(69, 220, 255, .10) 30%, rgba(104, 166, 255, .04) 52%, transparent 72%);
  transition: opacity .14s ease;
}
#tech-pointer-aura::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(125, 235, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(69, 220, 255, .72), inset 0 0 8px rgba(69, 220, 255, .30);
}
#tech-pointer-aura::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d9fbff;
  box-shadow: 0 0 10px #45dcff;
}
#tech-pointer-aura.is-active { opacity: 1; }
.tech-click-ripple {
  position: fixed;
  z-index: 2147482991;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(141, 237, 255, .95);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(69, 220, 255, .75);
  animation: tech-ripple .45s cubic-bezier(.16,.7,.2,1) forwards;
}
@keyframes tech-ripple {
  to { opacity: 0; transform: scale(8); border-width: 0; }
}

/* Unmistakable page entrance after the loader. */
.tech-page-ready .l_body {
  animation: tech-page-in .62s cubic-bezier(.2,.75,.2,1) both;
}
.tech-page-ready .post-card,
.tech-page-ready article.md-text,
.tech-page-ready .widgets > * {
  animation: tech-panel-in .7s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes tech-page-in {
  from { opacity: .35; transform: translateY(18px) scale(.992); filter: saturate(.55); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes tech-panel-in {
  from { opacity: .15; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
  #tech-pointer-aura, .tech-click-ripple { display: none !important; }
  #tech-loader { background: rgba(3, 8, 18, .95); }
  #tech-particles { opacity: .48 !important; }
}
@media (prefers-reduced-motion: reduce) {
  #tech-loader, #tech-pointer-aura, .tech-click-ripple { display: none !important; }
  .tech-page-ready .l_body,
  .tech-page-ready .post-card,
  .tech-page-ready article.md-text,
  .tech-page-ready .widgets > * { animation: none !important; }
}


/* v7 lightweight cyber effects ------------------------------------------ */
#cyber-progress {
  height: 3px;
  background: linear-gradient(90deg, #68a6ff, #45dcff 58%, #d8fbff);
  box-shadow: 0 0 8px rgba(69,220,255,.85), 0 0 16px rgba(69,220,255,.38);
  transition: width .08s linear;
}
#cyber-progress::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8fdff;
  box-shadow: 0 0 10px #45dcff, 0 0 20px #45dcff;
}

/* Sparse cursor ion trail: short-lived DOM nodes, capped by JS. */
.tech-cursor-ion {
  position: fixed;
  z-index: 2147482989;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  pointer-events: none;
  background: #bff8ff;
  box-shadow: 0 0 6px #45dcff, 0 0 11px rgba(104,166,255,.75);
  animation: tech-ion-fade .42s ease-out forwards;
}
@keyframes tech-ion-fade {
  to { opacity: 0; transform: translate3d(var(--ion-x, 0), var(--ion-y, 9px), 0) scale(.15); }
}

/* Card scanner: one composited highlight, no extra JavaScript. */
.post-list .post-card,
.md-text .tag-plugin.note,
.md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.post-list .post-card::after,
.md-text .tag-plugin.note::after,
.md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source)::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -60% auto -60% -35%;
  width: 18%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(118,230,255,.18), rgba(220,251,255,.28), transparent);
  filter: blur(1px);
}
@media (hover: hover) and (pointer: fine) {
  .post-list .post-card:hover::after,
  .md-text .tag-plugin.note:hover::after,
  .md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source):hover::after {
    opacity: 1;
    animation: tech-card-scan .72s cubic-bezier(.2,.65,.25,1) forwards;
  }
}
@keyframes tech-card-scan { to { transform: skewX(-18deg) translateX(900%); } }

/* Fixed corner HUD adds depth without covering page content. */
#tech-hud-frame {
  position: fixed;
  z-index: 3;
  inset: 14px;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(#45dcff,#45dcff) left top/44px 1px no-repeat,
    linear-gradient(#45dcff,#45dcff) left top/1px 44px no-repeat,
    linear-gradient(#45dcff,#45dcff) right top/44px 1px no-repeat,
    linear-gradient(#45dcff,#45dcff) right top/1px 44px no-repeat,
    linear-gradient(#68a6ff,#68a6ff) left bottom/32px 1px no-repeat,
    linear-gradient(#68a6ff,#68a6ff) left bottom/1px 32px no-repeat,
    linear-gradient(#68a6ff,#68a6ff) right bottom/32px 1px no-repeat,
    linear-gradient(#68a6ff,#68a6ff) right bottom/1px 32px no-repeat;
  filter: drop-shadow(0 0 4px rgba(69,220,255,.45));
}
#tech-hud-frame::before,
#tech-hud-frame::after {
  position: absolute;
  top: 7px;
  color: rgba(159,235,255,.78);
  font: 600 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .18em;
}
#tech-hud-frame::before { content: "SYS // ONLINE"; left: 10px; }
#tech-hud-frame::after { content: "408 // NODE"; right: 10px; }

/* Subtle heading signal line. */
.md-text h2 {
  position: relative;
}
.md-text h2::after {
  content: "";
  display: inline-block;
  width: 38px;
  height: 1px;
  margin: 0 0 .28em .65em;
  background: linear-gradient(90deg, rgba(69,220,255,.75), transparent);
  box-shadow: 0 0 5px rgba(69,220,255,.45);
  animation: tech-signal 2.8s ease-in-out infinite;
}
@keyframes tech-signal { 50% { width: 58px; opacity: .45; } }

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  #tech-hud-frame { inset: 8px; opacity: .24; }
  #tech-hud-frame::before, #tech-hud-frame::after { display: none; }
  .tech-cursor-ion { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-cursor-ion { display: none !important; }
  .post-list .post-card::after,
  .md-text .tag-plugin.note::after,
  .md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source)::after { animation: none !important; display: none; }
  .md-text h2::after { animation: none !important; }
  #cyber-progress { transition: none; }
}


/* v8 exact lightweight effects */
/* 4. Rare, brief RGB title fault; the original title remains fully readable. */
.md-text h1,
.article-title,
h1.post-title,
.post-title {
  position: relative;
}
.tech-title-glitch::before,
.tech-title-glitch::after {
  content: attr(data-tech-title);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  overflow: hidden;
  white-space: inherit;
}
.tech-title-glitch::before {
  color: #45dcff;
  transform: translateX(1.5px);
  clip-path: inset(18% 0 56% 0);
  animation: tech-title-fault-a .34s steps(2, end) both;
}
.tech-title-glitch::after {
  color: #ff5ca8;
  transform: translateX(-1.5px);
  clip-path: inset(62% 0 16% 0);
  animation: tech-title-fault-b .34s steps(2, end) both;
}
@keyframes tech-title-fault-a {
  35% { transform: translateX(-2px); opacity: .52; }
  70% { transform: translateX(1px); opacity: .22; }
  to { opacity: 0; }
}
@keyframes tech-title-fault-b {
  30% { transform: translateX(2px); opacity: .45; }
  65% { transform: translateX(-1px); opacity: .18; }
  to { opacity: 0; }
}

/* 5. Circuit nodes travel around the viewport edge without covering content. */
#tech-hud-frame .tech-circuit-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bff8ff;
  box-shadow: 0 0 5px #45dcff, 0 0 10px rgba(69,220,255,.65);
  opacity: .62;
  will-change: transform;
}
#tech-hud-frame .n1 { left: 0; top: 0; animation: tech-circuit-x 9s linear infinite; }
#tech-hud-frame .n2 { right: 0; top: 0; animation: tech-circuit-y 11s linear infinite; }
#tech-hud-frame .n3 { right: 0; bottom: 0; animation: tech-circuit-x-rev 13s linear infinite; }
#tech-hud-frame .n4 { left: 0; bottom: 0; animation: tech-circuit-y-rev 10s linear infinite; }
@keyframes tech-circuit-x { to { transform: translateX(calc(100vw - 32px)); } }
@keyframes tech-circuit-y { to { transform: translateY(calc(100vh - 32px)); } }
@keyframes tech-circuit-x-rev { to { transform: translateX(calc(-100vw + 32px)); } }
@keyframes tech-circuit-y-rev { to { transform: translateY(calc(-100vh + 32px)); } }

/* 7. Link/button energy feedback; JS adds a tiny independent magnetic translate. */
a:not(.md-text a),
button,
.btn,
.tag-plugin.button,
.post-card {
  transition: translate .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  a:not(.md-text a):hover,
  button:hover,
  .btn:hover,
  .tag-plugin.button:hover {
    border-color: rgba(103,224,255,.72) !important;
    box-shadow: 0 0 0 1px rgba(69,220,255,.12), 0 5px 15px rgba(17,112,170,.20) !important;
  }
}

/* Broaden card scan support across Stellar card variants. */
.post-card,
article.post,
.post-list .post-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.post-card::after,
article.post::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -60% auto -60% -35%;
  width: 18%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(118,230,255,.16), rgba(220,251,255,.25), transparent);
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover::after,
  article.post:hover::after {
    opacity: 1;
    animation: tech-card-scan .72s cubic-bezier(.2,.65,.25,1) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tech-title-glitch::before,
  .tech-title-glitch::after,
  #tech-hud-frame .tech-circuit-node { display: none !important; animation: none !important; }
  a, button, .btn, .tag-plugin.button, .post-card { translate: none !important; }
}


/* v8.1: pointer-following cyan ring/reticle removed. */
#tech-pointer-aura { display: none !important; }


/* v8.2 performance pass ---------------------------------------------------
   Keep the visual identity while avoiding continuous paint/layout work. */
body::before { animation: none !important; }
#tech-hud-frame { filter: none; }
#tech-hud-frame .n3,
#tech-hud-frame .n4 { display: none; animation: none; }
.md-text h2::after { animation: none; }
.tech-page-ready .post-card,
.tech-page-ready article.md-text,
.tech-page-ready .widgets > * { animation: none !important; }
.tech-click-ripple { box-shadow: 0 0 9px rgba(69,220,255,.55); will-change: transform, opacity; }
#cyber-progress { transition: none; box-shadow: 0 0 6px rgba(69,220,255,.58); contain: strict; }
#tech-particles { contain: strict; }
#tech-loader::before { animation-duration: 1.6s; }
.tech-loader-core::before { filter: none; }
.tech-loader-core { box-shadow: 0 0 22px rgba(69,220,255,.16); }
.tech-loader-core::after { box-shadow: 0 0 8px #fff, 0 0 20px rgba(69,220,255,.72); }

/* Data-saver / low-memory / low-core fallback set by tech.js. */
.tech-low-power #tech-particles,
.tech-low-power #tech-hud-frame .tech-circuit-node { display: none !important; }
.tech-low-power #tech-hud-frame { opacity: .28; }
.tech-low-power #tech-loader::before,
.tech-low-power .tech-loader-core::before,
.tech-low-power .tech-loader-core::after { animation: none !important; }
.tech-low-power .post-card::after,
.tech-low-power article.post::after,
.tech-low-power .md-text .tag-plugin.note::after,
.tech-low-power .md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source)::after { display: none !important; }

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  #tech-hud-frame .tech-circuit-node { display: none !important; animation: none !important; }
  #tech-particles { opacity: .30 !important; }
  .post-card::after, article.post::after,
  .md-text .tag-plugin.note::after,
  .md-text div:is(.k408-user,.k408-extra,.k408-warn,.k408-source)::after { display: none !important; }
}


/* v8.2.2: real automatic/light theme support for study-tools theme switcher. */
:root[data-theme="light"] {
  color-scheme: light !important;
  --background:#edf4f8 !important;--card:#ffffff !important;--block:#f4f8fb !important;
  --block-border:#c8d9e3 !important;--theme-block:#f4f8fb !important;--theme-border:#c8d9e3 !important;
  --theme-codeblock:#eef4f7 !important;--text:#14283b !important;--text-p0:#102334 !important;
  --text-p1:#20384b !important;--text-p2:#40586a !important;--text-p3:#607789 !important;
  --text-p4:#788d9c !important;--text-meta:#607789 !important;--text-code:#096c89 !important;
  --link:#087fa8 !important;--bg-a100:#edf4f8 !important;
}
:root[data-theme="light"],:root[data-theme="light"] body { background:#edf4f8 !important; }
:root[data-theme="light"] body { color:#20384b !important;background-image:radial-gradient(circle at 10% 5%,rgba(31,153,200,.09),transparent 30rem),radial-gradient(circle at 88% 10%,rgba(104,92,190,.06),transparent 30rem)!important; }
:root[data-theme="light"] body::before { opacity:.16; }
:root[data-theme="light"] .l_left .sidebg { background:rgba(237,244,248,.96)!important; }
:root[data-theme="light"] .l_left .leftbar-container,
:root[data-theme="light"] .post-list .post-card,
:root[data-theme="light"] .navbar-blur { color:#20384b!important;background:#fff!important;border-color:#c8d9e3!important;box-shadow:0 10px 28px rgba(31,68,89,.10)!important; }
:root[data-theme="light"] .logo-wrap .title,:root[data-theme="light"] .logo-wrap .title a,
:root[data-theme="light"] .post-list .post-title,:root[data-theme="light"] .md-text h1,:root[data-theme="light"] .md-text h2,
:root[data-theme="light"] .md-text h3,:root[data-theme="light"] .md-text h4,:root[data-theme="light"] .md-text h5,:root[data-theme="light"] .md-text h6 { color:#102334!important; }
:root[data-theme="light"] .logo-wrap .subtitle,:root[data-theme="light"] .post-list .post-card .meta,
:root[data-theme="light"] .post-list .post-card .excerpt,:root[data-theme="light"] .widget-wrapper .widget-body,
:root[data-theme="light"] .widget-wrapper .widget-body a,:root[data-theme="light"] .widget-wrapper .widget-body span { color:#50697a!important; }
:root[data-theme="light"] .nav-area .menu .nav-item { color:#294357!important;background:#f5f9fb!important;border-color:#c8d9e3!important; }
:root[data-theme="light"] .nav-area .menu .nav-item:hover,:root[data-theme="light"] .nav-area .menu .nav-item.active { color:#102334!important;background:#e4f3f8!important; }
:root[data-theme="light"] .navbar nav a,:root[data-theme="light"] .navbar nav a:link,:root[data-theme="light"] .navbar nav a:visited { color:#294357!important; }
:root[data-theme="light"] .navbar nav a.active,:root[data-theme="light"] .navbar nav a:hover { color:#102334!important;background:#e3f1f7!important; }
:root[data-theme="light"] .md-text,:root[data-theme="light"] .md-text p,:root[data-theme="light"] .md-text li,
:root[data-theme="light"] .md-text dd,:root[data-theme="light"] .md-text dt,:root[data-theme="light"] .md-text summary,
:root[data-theme="light"] .md-text figcaption,:root[data-theme="light"] .md-text label,:root[data-theme="light"] .md-text table,
:root[data-theme="light"] .md-text td,:root[data-theme="light"] .md-text th { color:#263f52!important; }
:root[data-theme="light"] .md-text strong,:root[data-theme="light"] .md-text b { color:#102334!important; }
:root[data-theme="light"] .md-text a:not(.tag-plugin):not(.headerlink) { color:#087fa8!important; }
:root[data-theme="light"] .md-text code:not(pre code) { color:#096c89!important;background:#e5f1f5!important;border-color:#bfd6e0!important; }
:root[data-theme="light"] .md-text blockquote { color:#294357!important;background:#edf7fa!important;border-color:#3c9fc0!important; }
:root[data-theme="light"] figure.highlight,:root[data-theme="light"] .highlight,:root[data-theme="light"] pre:not([class]):has(> code) { color:#233b4d!important;background:#eef4f7!important;border-color:#c8d9e3!important; }
:root[data-theme="light"] figure.highlight::before { color:#347e96;background:#e1ebf0;border-color:#c8d9e3; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background:#eaf1f5; }:root[data-theme="light"] ::-webkit-scrollbar-thumb { border-color:#eaf1f5;background:#91aeba; }


/* v8.3 runtime performance safeguards. */
#tech-hud-frame,#tech-particles,.tech-click-ripple{pointer-events:none}
#tech-hud-frame{contain:layout paint style}
.post-list .post-card{content-visibility:auto;contain-intrinsic-size:auto 280px}
.tech-low-power body{background-attachment:scroll!important}
.tech-low-power .k408-fixed-countdown,
.tech-low-power .feng-backdrop,
.tech-low-power .k408-dialog-backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media(max-width:768px){.post-list .post-card{contain-intrinsic-size:auto 240px}}


/* v8.4 shared document transition ---------------------------------------- */
body > .l_body, body > .site-footer {
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.72,.2,1), filter .22s ease;
}
body.tech-page-entering > .l_body,
body.tech-page-entering > .site-footer {
  opacity: 0;
  transform: translate3d(0,12px,0) scale(.996);
  filter: saturate(.72);
}
body.tech-page-leaving > .l_body,
body.tech-page-leaving > .site-footer {
  opacity: 0;
  transform: translate3d(0,-8px,0) scale(.998);
  filter: saturate(.72);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body > .l_body, body > .site-footer { transition: none !important; }
  body.tech-page-entering > .l_body, body.tech-page-entering > .site-footer,
  body.tech-page-leaving > .l_body, body.tech-page-leaving > .site-footer {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}