/* Greyscale UI, monospace, single 680px column — after kov.dev. Dark only; code blocks
   are the one place hue appears. */
:root{
  --f:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:680px;
  --l0:#070707;--l1:#0c0c0c;--l2:#131313;--l3:#1a1a1a;--l4:#252525;
  --l5:#333;--l6:#4a4a4a;--l7:#777;--l8:#aaa;--l9:#ccc;--la:#e8e8e8;
}
*{margin:0;padding:0;box-sizing:border-box}
/* .row sets display:block, and an author rule beats the UA stylesheet's [hidden]{display:none}.
   Without !important here the JS filter sets .hidden on rows that then stay visible. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--l0);color:var(--l8);font:13.5px/1.6 var(--f);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* fixed dot grid */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:radial-gradient(circle,var(--l4) .5px,transparent .5px);
  background-size:24px 24px;
}
nav,.hero,.filters,.rows,article,footer{position:relative;z-index:1}
::selection{background:rgba(200,200,200,.15)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--l4)}

a{color:inherit;text-decoration:none}

/* ---- nav ---- */
nav{
  position:sticky;top:0;z-index:20;padding:0 24px;
  background:rgba(7,7,7,.85);backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 1px 0 rgba(255,255,255,.02);
}
.ni{display:flex;justify-content:space-between;align-items:center;height:48px;max-width:var(--w);margin:0 auto}
.logo{font-size:13px;font-weight:500;letter-spacing:-.02em;color:var(--l9)}
.logo .c{display:inline-block;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.nr{display:flex;gap:20px}
.nr a{position:relative;font-size:12px;color:var(--l7)}
.nr a:hover{color:var(--la)}
.nr a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--l8);
  transition:width .3s cubic-bezier(.25,.46,.45,.94);
}
.nr a:hover::after{width:100%}

/* ---- shared blocks ---- */
.hero,.filters,.rows,article,footer{max-width:var(--w);margin:0 auto}
hr{
  border:0;height:1px;max-width:var(--w);margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--l4),transparent);
}

/* ---- hero ---- */
.hero{padding:64px 24px 22px}
.hero h1{
  font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--la);
  text-shadow:0 .5px 0 rgba(255,255,255,.06);
}
.hero-sub{font-size:12.5px;line-height:1.7;color:var(--l7);margin-top:10px}

/* ---- filters ---- */
.filters{padding:18px 24px 8px}
#q{
  width:100%;background:var(--l1);border:1px solid var(--l4);color:var(--la);
  font:12.5px/1.6 var(--f);padding:9px 12px;outline:none;
  transition:border-color .2s,background .2s;
}
#q::placeholder{color:var(--l6)}
#q:focus{border-color:var(--l7);background:var(--l2)}
.fbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fb{
  background:none;border:1px solid var(--l4);color:var(--l7);
  font:11px var(--f);padding:4px 10px;cursor:pointer;transition:all .2s;
}
.fb span{color:var(--l6)}
.fb:hover{color:var(--l9);border-color:var(--l6)}
.fb.on{color:var(--la);border-color:var(--l7);background:var(--l2)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jump a{font-size:10.5px;color:var(--l6)}
.jump a:hover{color:var(--la)}
.cnt{font-size:10.5px;color:var(--l6);margin-top:14px}

/* ---- index rows ---- */
.rows{padding:4px 24px 96px}
.al{
  font-size:10px;color:var(--l6);letter-spacing:.08em;
  padding:18px 0 6px;border-bottom:1px solid var(--l3);margin-bottom:4px;
}
.row{
  display:block;position:relative;padding:11px 14px;
  border-left:2px solid transparent;transition:all .22s cubic-bezier(.22,1,.36,1);
}
.row::after{
  content:'';position:absolute;bottom:0;left:14px;right:0;height:1px;
  background:linear-gradient(90deg,var(--l3),transparent);
}
.row:hover{
  border-left-color:var(--l7);transform:translateX(4px);
  background:linear-gradient(90deg,var(--l2),transparent 70%);
}
.rt{font-size:13.5px;color:var(--l9);letter-spacing:-.01em;transition:color .2s}
.row:hover .rt{color:var(--la)}
.rd{font-size:11.5px;line-height:1.6;color:var(--l7);margin-top:3px}
.rg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:10px;letter-spacing:.02em;color:var(--l6)}
a.tag:hover{color:var(--l9)}

/* ---- article ---- */
article{padding:0 24px 96px}
.bk{display:inline-block;font-size:11px;color:var(--l6);margin-top:28px}
.bk:hover{color:var(--la)}
.ph{padding:20px 0 28px;margin-bottom:32px;position:relative}
.ph::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--l5),transparent 70%);
}
.ph h1{
  font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:var(--la);
  text-shadow:0 .5px 0 rgba(255,255,255,.06);
}
.pm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:var(--l6);margin-top:12px}
.pm .sep{color:var(--l5)}
.pm .tags{display:flex;flex-wrap:wrap;gap:8px}

/* ---- prose ---- */
.bd{font-size:13px}
.bd h2{
  font-size:14px;font-weight:500;color:var(--l9);margin:40px 0 14px;position:relative;padding-top:2px;
}
.bd h2::before{
  content:'';display:block;width:40px;height:1px;margin-bottom:12px;
  background:linear-gradient(90deg,var(--l6),transparent);
}
.bd h3{font-size:12.5px;font-weight:500;color:var(--l8);margin:26px 0 10px}
.bd p{line-height:1.8;margin:14px 0;color:#b0b0b0}
.bd strong{color:var(--la);font-weight:500}
.bd em{color:var(--l9)}
.bd ul,.bd ol{margin:14px 0 14px 20px}
.bd li{line-height:1.8;margin:5px 0;color:#b0b0b0}
.bd blockquote{border-left:3px solid var(--l7);background:var(--l1);padding:12px 16px;margin:18px 0}
.bd blockquote p{margin:0;font-size:12.5px}
.bd hr{margin:32px auto;max-width:100%}
/* kov.dev's only inline-clickable idiom: a hairline under the text, no colour shift */
.bd a{color:var(--l9);border-bottom:1px solid var(--l4);transition:color .2s,border-color .2s}
.bd a:hover{color:var(--la);border-bottom-color:var(--l7)}
/* wikilinks with no page yet — Obsidian's unresolved-link state, deliberately not a 404 */
.u{color:var(--l6);border-bottom:1px dashed var(--l4);cursor:help}

/* ---- code ---- */
.bd code{
  font-size:11.5px;background:var(--l2);color:var(--l9);
  padding:1px 5px;border:1px solid var(--l3);
}
.bd pre{
  position:relative;background:var(--l1);border:1px solid var(--l3);
  padding:16px 18px;margin:18px 0;overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.bd pre::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:3px;
  background:linear-gradient(180deg,var(--l5),transparent);
}
.bd pre code{
  font-size:12px;line-height:1.75;background:none;border:0;padding:0;color:var(--l8);
}
/* Full-colour syntax theme (One Dark palette). Code blocks are the only place the page uses hue;
   the UI chrome stays greyscale. Every class highlight.js actually emits is covered here —
   an unmapped class silently falls back to flat body grey, which is what made the first
   all-monochrome attempt look like highlighting was switched off. */
:root{
  --s-fg:#abb2bf;--s-gutter:#5c6370;
  --s-red:#e06c75;--s-orange:#d19a66;--s-yellow:#e5c07b;
  --s-green:#98c379;--s-cyan:#56b6c2;--s-blue:#61afef;--s-purple:#c678dd;
}
.bd pre code.hljs{color:var(--s-fg)}
.hljs-comment,.hljs-quote{color:var(--s-gutter);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-doctag,.hljs-formula{color:var(--s-purple)}
.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:var(--s-red)}
.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-deletion,.hljs-subst{color:var(--s-red)}
.hljs-number,.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-meta .hljs-keyword{color:var(--s-orange)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-char,.hljs-meta .hljs-string{color:var(--s-green)}
.hljs-type,.hljs-class .hljs-title,.hljs-title.class_,.hljs-attr,.hljs-attribute,.hljs-property{color:var(--s-yellow)}
.hljs-title,.hljs-title.function_,.hljs-function .hljs-title{color:var(--s-blue)}
.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-link{color:var(--s-cyan)}
.hljs-meta,.hljs-comment .hljs-doctag{color:var(--s-gutter)}
.hljs-params{color:var(--s-fg)}
.hljs-punctuation,.hljs-operator{color:var(--s-fg)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:600}
.hljs-strikethrough{text-decoration:line-through}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:20px 0;border:1px solid var(--l3)}
.bd table{border-collapse:collapse;width:100%;font-size:11.5px}
.bd th,.bd td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--l3);vertical-align:top}
.bd th{color:var(--l9);font-weight:500;background:var(--l1);white-space:nowrap}
.bd td{color:var(--l7)}
.bd tr:last-child td{border-bottom:0}
.bd td code{white-space:nowrap}

/* ---- backlinks / sources ---- */
.bl,.src{margin-top:48px;padding-top:20px;position:relative}
.bl::before,.src::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--l4),transparent);
}
.bl h2,.src h2{font-size:11px;font-weight:400;color:var(--l6);letter-spacing:.04em;margin-bottom:10px}
.bl ul,.src ul{list-style:none;margin:0}
.bl li{margin:4px 0;font-size:12px}
.bl a{color:var(--l8)}
.bl a:hover{color:var(--la)}
.src li{margin:3px 0;font-size:10.5px;color:var(--l6);word-break:break-word}

/* ---- log ---- */
.log ul{margin-left:18px}
.log li{font-size:12px;line-height:1.75}
.log h2{margin-top:44px}

/* ---- footer ---- */
footer{padding:20px 24px 40px;font-size:10px;color:var(--l6);position:relative}
footer::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--l4),transparent);
}
footer a{color:var(--l7)}
footer a:hover{color:var(--la)}

@media (max-width:600px){
  .hero{padding:48px 16px 18px}
  nav{padding:0 16px}
  .filters,.rows,article,footer{padding-left:16px;padding-right:16px}
  footer::before{left:16px;right:16px}
}