:root {
  --term-bg: #050807;
  --term-panel: #07110d;
  --term-panel-2: #0b1711;
  --term-border: #1f3b2c;
  --term-green: #9cffc7;
  --term-green-soft: #6fffb0;
  --term-amber: #ffd479;
  --term-muted: #7ea88c;
}

html,
body {
  background:
    linear-gradient(rgba(156, 255, 199, 0.035) 50%, rgba(0, 0, 0, 0.02) 50%) 0 0 / 100% 4px,
    radial-gradient(circle at 50% 0%, rgba(111, 255, 176, 0.08), transparent 42%),
    var(--term-bg) !important;
}

body {
  text-shadow: 0 0 9px rgba(111, 255, 176, 0.14);
}

a,
.markdown-body a {
  text-decoration: none !important;
}

a:hover,
.markdown-body a:hover {
  color: var(--term-amber) !important;
}

.navbar {
  border-bottom: 1px solid var(--term-border);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

.navbar-brand,
.navbar .nav-link {
  text-transform: lowercase;
}

.navbar-brand::before {
  content: "> ";
  color: var(--term-amber);
}

.banner,
.page-header {
  background:
    linear-gradient(180deg, rgba(5, 8, 7, 0.18), rgba(5, 8, 7, 0.96)),
    repeating-linear-gradient(0deg, rgba(156, 255, 199, 0.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(156, 255, 199, 0.05) 0 1px, transparent 1px 24px),
    #06100d !important;
  border-bottom: 1px solid var(--term-border);
}

.banner .h1,
.banner .h2,
.banner h1,
.banner h2 {
  color: var(--term-green) !important;
  letter-spacing: 0;
}

.banner .h1::before,
.banner h1::before {
  content: "$ ";
  color: var(--term-amber);
}

.subtitle,
.typing,
.typed-cursor {
  color: var(--term-green-soft) !important;
}

.subtitle::before {
  content: "stdout: ";
  color: var(--term-muted);
}

#board,
.board,
.post,
.archive,
.category-list,
.tagcloud {
  border: 1px solid var(--term-border);
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(11, 23, 17, 0.96), rgba(7, 17, 13, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(156, 255, 199, 0.05),
    0 18px 48px rgba(0, 0, 0, 0.38);
}

.markdown-body {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#board,
.board {
  overflow: hidden;
  position: relative;
}

#board:has(article.index-info):not(:has(.post-content)) {
  overflow: visible;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#board:has(.about-terminal) {
  overflow: visible;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#board:has(.about-terminal) .container {
  padding-right: 0;
  padding-left: 0;
}

#board:has(.post-content) {
  padding-top: 0 !important;
}

#board:has(.post-content)::before {
  content: "";
  display: block;
  min-height: 2.65rem;
  margin: 0 0 1.15rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--term-border);
  background:
    radial-gradient(circle at 1.2rem 50%, #ff5f56 0 0.23rem, transparent 0.25rem),
    radial-gradient(circle at 2.05rem 50%, #ffbd2e 0 0.23rem, transparent 0.25rem),
    radial-gradient(circle at 2.9rem 50%, #27c93f 0 0.23rem, transparent 0.25rem),
    linear-gradient(180deg, rgba(11, 23, 17, 0.98), rgba(4, 10, 7, 0.98));
  border-radius: 8px 8px 0 0;
}

#board:has(.post-content)::after {
  content: "~/Blog/source/_posts/boot-sequence.md";
  position: absolute;
  top: 0;
  left: 5.7rem;
  right: 1rem;
  height: 2.65rem;
  display: flex;
  align-items: center;
  color: var(--term-muted);
  font-size: 0.78rem;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

article.index-info,
.index-post {
  display: block;
  margin: 0 0 1rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(111, 255, 176, 0.22) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(6, 17, 12, 0.88), rgba(4, 10, 7, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(156, 255, 199, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.index-info + .index-info,
.index-post + .index-post {
  margin-top: 0;
}

.index-info .index-header {
  margin-bottom: 0.75rem;
}

.index-info .index-header a {
  color: var(--term-green) !important;
}

.index-info .index-header a::before,
.index-post .post-title a::before {
  content: "cat ";
  color: var(--term-amber);
  font-weight: 500;
}

.index-info .index-excerpt {
  color: var(--term-muted) !important;
  border-left: 1px solid rgba(111, 255, 176, 0.18);
  padding-left: 1rem;
}

.index-info .index-excerpt:hover {
  background: transparent !important;
}

.index-info .index-btm,
.post-meta,
.post-meta a,
.index-post .post-meta {
  color: var(--term-muted) !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  border-bottom-color: var(--term-border) !important;
}

.markdown-body h2::before {
  content: "## ";
  color: var(--term-amber);
}

.markdown-body code {
  color: var(--term-green);
  background: #0d1d14 !important;
  border: 1px solid var(--term-border);
  border-radius: 4px;
}

.markdown-body figure.highlight {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(111, 255, 176, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 17, 13, 0.94), rgba(3, 8, 5, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(156, 255, 199, 0.08);
}

.markdown-body figure.highlight table,
.markdown-body figure.highlight tbody,
.markdown-body figure.highlight tr {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}

.markdown-body figure.highlight tr {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
}

.markdown-body figure.highlight .gutter,
.markdown-body figure.highlight .code {
  display: block;
  border: 0 !important;
  background: transparent !important;
}

.markdown-body figure.highlight .gutter {
  color: rgba(156, 255, 199, 0.38) !important;
  border-right: 1px solid rgba(111, 255, 176, 0.16) !important;
  user-select: none;
}

.markdown-body figure.highlight .code {
  min-width: 0;
}

.markdown-body figure.highlight pre {
  margin: 0 !important;
  padding: 1rem 0.85rem !important;
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--term-green) !important;
  line-height: 1.65;
}

.markdown-body figure.highlight .gutter pre {
  text-align: right;
}

.markdown-body figure.highlight code,
.markdown-body figure.highlight .hljs {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--term-green) !important;
  line-height: inherit;
}

.markdown-body figure.highlight .hljs-built_in,
.markdown-body figure.highlight .hljs-keyword,
.markdown-body figure.highlight .hljs-title,
.markdown-body figure.highlight .hljs-name {
  color: var(--term-amber) !important;
}

.markdown-body figure.highlight .code-widget {
  top: 0.45rem !important;
  right: 0.55rem !important;
  height: auto !important;
  padding: 0.15rem 0.45rem !important;
  border: 1px solid rgba(111, 255, 176, 0.18);
  border-radius: 999px;
  background: rgba(5, 8, 7, 0.82) !important;
  color: var(--term-muted) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  line-height: 1.4 !important;
}

.markdown-body figure.highlight .code-widget i {
  margin-right: 0.25rem;
  color: var(--term-green-soft);
}

.mermaid-zoom-frame {
  position: relative;
  margin: 1.65rem 0 1.5rem;
}

.mermaid-zoom-frame pre:has(> code.mermaid) {
  margin: 0 !important;
}

.markdown-body pre:has(> code.mermaid) {
  position: relative;
  margin: 1.25rem 0 1.5rem !important;
  padding: 1rem !important;
  overflow: auto;
  max-height: 30rem;
  border: 1px solid rgba(111, 255, 176, 0.22) !important;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 17, 13, 0.94), rgba(3, 8, 5, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(156, 255, 199, 0.08);
}

.markdown-body code.mermaid {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.markdown-body code.mermaid svg {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: none;
  height: auto;
  background: transparent !important;
}

.mermaid-zoom-shell {
  display: block;
  width: max-content;
  max-width: 100%;
  min-width: max-content;
  margin: 0 auto;
  transform-origin: top left;
}

.mermaid-zoom-toolbar {
  position: absolute;
  top: 0;
  right: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-45%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mermaid-zoom-frame:hover .mermaid-zoom-toolbar,
.mermaid-zoom-frame:focus-within .mermaid-zoom-toolbar {
  opacity: 1;
  transform: translateY(-55%);
}

.mermaid-zoom-toolbar button {
  min-width: 2rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border: 1px solid rgba(111, 255, 176, 0.24);
  border-radius: 6px;
  background: rgba(5, 8, 7, 0.86);
  color: var(--term-green);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

.mermaid-zoom-toolbar button:hover {
  border-color: rgba(255, 212, 121, 0.6);
  color: var(--term-amber);
}

.plotly-terminal-demo,
.plotly-terminal-chart {
  min-height: 320px;
  margin: 1.25rem 0 1.5rem;
  padding: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(111, 255, 176, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 17, 13, 0.94), rgba(3, 8, 5, 0.98));
  box-shadow: inset 0 1px 0 rgba(156, 255, 199, 0.08);
  color: var(--term-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.plotly-terminal-demo .modebar,
.plotly-terminal-chart .modebar {
  right: 0.35rem !important;
}

.plotly-terminal-demo .modebar-btn path,
.plotly-terminal-chart .modebar-btn path {
  fill: var(--term-muted) !important;
}

.plotly-terminal-demo .modebar-btn:hover path,
.plotly-terminal-chart .modebar-btn:hover path {
  fill: var(--term-amber) !important;
}

.markdown-body blockquote {
  color: var(--term-muted);
  border-left-color: var(--term-green-soft);
  background: rgba(111, 255, 176, 0.04);
}

.about-avatar,
.about-info {
  display: none !important;
}

.about-content.page-content {
  margin-top: 0 !important;
}

.about-terminal {
  display: grid;
  gap: 1rem;
  color: #c8facc;
  font-size: 0.98rem;
  line-height: 1.72;
}

.about-terminal * {
  letter-spacing: 0;
}

.about-hero {
  padding: 1.25rem;
  border: 1px solid rgba(111, 255, 176, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 17, 12, 0.92), rgba(3, 8, 5, 0.96));
  box-shadow: inset 0 1px 0 rgba(156, 255, 199, 0.08);
}

.about-prompt,
.about-label {
  color: var(--term-amber);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.about-prompt {
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.about-hero h2 {
  margin: 0 0 0.65rem !important;
  border: 0 !important;
  color: var(--term-green) !important;
  font-size: 1.55rem;
  line-height: 1.35;
}

.about-hero h2::before {
  content: "";
}

.about-hero p,
.about-card p {
  margin: 0;
  color: #c8facc;
  font-size: 0.98rem;
  line-height: 1.75;
}

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

.about-card,
.about-flow {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(111, 255, 176, 0.18);
  border-radius: 8px;
  background: rgba(4, 12, 8, 0.72);
}

.about-label {
  display: inline-flex;
  margin-bottom: 0.65rem;
  color: var(--term-amber);
  font-size: 0.88rem;
  line-height: 1.45;
  text-transform: lowercase;
}

.about-label::before {
  content: "./";
  color: var(--term-muted);
}

.about-profile {
  display: grid;
  gap: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.about-profile span {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: 0.75rem;
  color: var(--term-green);
  font-size: 0.96rem;
  line-height: 1.65;
}

.about-profile b {
  color: var(--term-muted);
  font-weight: 500;
}

.about-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-card li {
  position: relative;
  padding-left: 1.1rem;
  color: #c8facc;
  font-size: 0.96rem;
  line-height: 1.75;
}

.about-card li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--term-green-soft);
}

.about-card a,
.about-profile a {
  color: var(--term-green) !important;
  border-bottom: 1px dotted rgba(111, 255, 176, 0.45);
}

.about-card a::after,
.about-profile a::after {
  content: "↗";
  margin-left: 0.18rem;
  color: var(--term-muted);
  font-size: 0.78em;
}

.about-card a[href^="/"]::after {
  content: "";
}

.about-card a:hover,
.about-profile a:hover {
  color: var(--term-amber) !important;
  border-bottom-color: rgba(255, 212, 121, 0.65);
}

.about-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.about-flow-steps span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(111, 255, 176, 0.18);
  border-radius: 6px;
  background: rgba(111, 255, 176, 0.06);
  color: var(--term-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.about-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(111, 255, 176, 0.22);
  border-radius: 6px;
  background: rgba(111, 255, 176, 0.06);
  color: var(--term-green) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.35;
}

.about-links a:hover {
  border-color: rgba(255, 212, 121, 0.55);
  background: rgba(255, 212, 121, 0.08);
  color: var(--term-amber) !important;
}

.scroll-down-bar i,
.scroll-top-arrow {
  color: var(--term-green-soft) !important;
}

.footer-inner {
  color: var(--term-muted);
}

#toc {
  color: var(--term-muted);
  font-size: 0.84rem;
}

#toc .toc-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  color: var(--term-muted);
  font-size: 0.84rem !important;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
}

#toc .toc-header::before {
  content: "$ ls -R";
  color: var(--term-amber);
  font-size: 0.84rem;
  font-weight: 500;
}

#toc .toc-header > i {
  display: none;
}

#toc .toc-header > span {
  color: transparent;
  font-size: 0;
}

#toc .toc-header > span::after {
  content: "./toc";
  color: var(--term-green-soft);
  font-size: 0.84rem;
}

#toc .toc-body {
  padding: 0;
  border: 0;
  background: transparent;
}

#toc .toc-list-item {
  display: block !important;
  position: relative;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
  transition: opacity 0.18s ease;
}

#toc .tocbot-list,
#toc .tocbot-list ol {
  padding-left: 0;
}

#toc .toc-list-item {
  padding: 0 !important;
}

#toc .tocbot-list ol {
  margin-left: 0.62rem;
  padding-left: 0.78rem;
  border-left: 1px solid rgba(126, 168, 140, 0.18);
}

#toc .tocbot-link {
  display: inline-block;
  max-width: calc(100% - 1.6rem);
  padding: 0.05rem 0 0.08rem;
  border-radius: 0;
  color: rgba(126, 168, 140, 0.72) !important;
  font-size: 0.8rem !important;
  font-weight: 450;
  line-height: 1.45;
  text-shadow: none;
  transition:
    color 0.22s ease,
    text-shadow 0.22s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#toc .tocbot-link::before {
  content: "|-- ";
  color: rgba(126, 168, 140, 0.48);
}

#toc .toc-list-item:last-child > .tocbot-link::before {
  content: "`-- ";
}

#toc .tocbot-link:hover {
  color: rgba(216, 251, 217, 0.94) !important;
  transform: translateX(0.1rem);
}

#toc .tocbot-active-link,
#toc .toc-list-item.is-active-li > .tocbot-link {
  color: #f4fff8 !important;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(156, 255, 199, 0.34);
}

#toc .tocbot-active-link::after,
#toc .toc-list-item.is-active-li > .tocbot-link::after {
  content: " *";
  color: var(--term-amber);
}

#toc .toc-toggle {
  width: 1.34rem;
  margin-right: 0.15rem;
  color: var(--term-green-soft);
  opacity: 0.68;
  font-size: 0;
  transform: none !important;
  transition: color 0.22s ease, opacity 0.22s ease;
}

#toc .toc-toggle::before {
  color: rgba(111, 255, 176, 0.72);
  font-size: 0.72rem;
}

#toc .toc-toggle-expanded::before {
  content: "[-]";
}

#toc .toc-toggle-collapsed::before {
  content: "[+]";
}

#toc .toc-toggle-placeholder::before {
  content: "   ";
}

#toc .toc-toggle:hover {
  color: #f4fff8;
  opacity: 1;
}

#toc .tocbot-is-collapsible {
  overflow: hidden !important;
  transition:
    max-height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.24s ease,
    transform 0.24s ease;
}

#toc .tocbot-is-collapsed {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-0.16rem);
}

#toc .toc-list-item::before {
  display: none !important;
}

#toc .toc-list-item.is-active-li::before {
  display: none !important;
}

#toc .tocbot-link.toc-link-clicked {
  animation: toc-link-nudge 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#toc .toc-list-item.toc-item-pulse > .tocbot-link {
  color: var(--term-amber) !important;
}

@keyframes toc-link-nudge {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(0.28rem);
  }
  100% {
    transform: translateX(0);
  }
}

::selection {
  color: #031006;
  background: var(--term-green);
}

@media (max-width: 767px) {
  .banner,
  .page-header {
    min-height: 62vh;
  }

  #board:has(.post-content)::before {
    min-height: 2.35rem;
    padding: 0 0.8rem;
    font-size: 0.75rem;
  }

  #board:has(.post-content)::after {
    content: "boot-sequence.md";
    left: 4.35rem;
    height: 2.35rem;
    font-size: 0.72rem;
  }

  .about-grid,
  .about-flow-steps {
    grid-template-columns: 1fr;
  }

  .about-hero h2 {
    font-size: 1.35rem;
  }

  .mermaid-zoom-shell {
    min-width: 100%;
  }
}

@media (hover: none) {
  .mermaid-zoom-toolbar {
    opacity: 0.78;
    transform: translateY(-55%);
  }
}