/* N3ONLAB — Silver Lining Glitch / Cybernetics
   Dark base, metallic silver gradients, chrome highlights, restrained neon. */
:root {
  --bg: #06070a;
  --bg-2: #0b0d12;
  --neon-rgb: 62 242 236;
  --neon2-rgb: 255 63 211;
  --bg-rgb: 6 7 10;
  --panel-rgb: 17 20 27;
  --panel: rgb(var(--panel-rgb) / .82);
  --panel-2: rgb(var(--panel-rgb) / .92);
  --text: #d8dde6;
  --muted: #8c95a5;
  --silver: #c9d0db;
  --silver-hi: #f5f7fb;
  --line: rgba(205, 214, 228, .14);
  --line-hi: rgba(225, 232, 244, .38);
  --neon: #3ef2ec;
  --neon-2: #ff3fd3;
  --chrome: linear-gradient(135deg, #ffffff 0%, #b9c0cc 18%, #5f6876 38%, #eef1f6 55%, #8d96a5 78%, #dfe4ec 100%);
  --chrome-soft: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(0,0,0,.15));
  --radius: 4px;
  --radius-lg: 10px;
  --gap: clamp(14px, 2.4vw, 24px);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 1rem/var(--lh, 1.65) var(--font); color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow, .07)), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgb(var(--neon2-rgb) / calc(var(--fx-bg-glow, .07) * .7)), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-color: var(--bg);
  background-attachment: fixed;
}
/* subtle scanlines */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / var(--fx-scan, .018)) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--silver-hi); text-decoration-color: rgb(var(--neon-rgb) / .5); text-underline-offset: 3px; }
a:hover { color: var(--neon); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgb(var(--neon-rgb) / .3); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap, 1180px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
main { flex: 1; padding-bottom: 64px; }
main:focus { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--silver-hi); color: #000; padding: 8px 14px; border-radius: var(--radius); font-weight: 700; }
.skip:focus { top: 12px; }

.preview-banner {
  position: sticky; top: 0; z-index: 60; text-align: center; padding: 6px 12px;
  font: 700 .75rem/1.4 var(--mono); letter-spacing: .14em; color: #000;
  background: repeating-linear-gradient(45deg, var(--neon) 0 14px, #9ffcf8 14px 28px);
}

/* ---------- chrome text & glitch ---------- */
.chrome-text {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.glitch::before { color: var(--neon); transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); }
.glitch::after  { color: var(--neon-2); transform: translate(2px, 0); clip-path: inset(55% 0 0 0); }
a:hover > .glitch::before, a:focus-visible > .glitch::before, .glitch.is-glitching::before { animation: glitch-a .6s steps(2) both; }
a:hover > .glitch::after,  a:focus-visible > .glitch::after,  .glitch.is-glitching::after  { animation: glitch-b .6s steps(2) both; }
@keyframes glitch-a {
  0% { opacity: .9; clip-path: inset(10% 0 70% 0); transform: translate(-3px, -1px); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 1px); }
  50% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 0); }
  75% { clip-path: inset(80% 0 2% 0); transform: translate(2px, -1px); }
  100% { opacity: 0; }
}
@keyframes glitch-b {
  0% { opacity: .8; clip-path: inset(70% 0 5% 0); transform: translate(3px, 1px); }
  33% { clip-path: inset(5% 0 75% 0); transform: translate(-3px, 0); }
  66% { clip-path: inset(40% 0 35% 0); transform: translate(2px, 1px); }
  100% { opacity: 0; }
}
.glitch-soft { text-shadow: -1px 0 rgb(var(--neon-rgb) / .35), 1px 0 rgb(var(--neon2-rgb) / .25); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--bg-rgb) / .78); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header::after { /* silver lining */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 30%, var(--neon) 50%, rgba(255,255,255,.55) 70%, transparent);
  opacity: .55;
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.logo {
  font: 800 1.35rem/1 var(--mono); letter-spacing: .18em; text-decoration: none; text-transform: uppercase;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo:hover { color: transparent; }
.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius);
}
.main-nav a:hover { color: var(--silver-hi); border-color: var(--line); }
.main-nav a[aria-current="page"] { color: var(--silver-hi); border-color: var(--line-hi); background: var(--chrome-soft); }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-h, var(--font)); color: var(--silver-hi); line-height: 1.2; letter-spacing: -.01em; }
.page-title { font-size: clamp(1.8rem, 5vw, 3rem); margin: 36px 0 8px; font-weight: 800; overflow-wrap: anywhere; }
.page-sub { display: block; font: 500 .9rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.section-title, .panel-title {
  font: 700 .8rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--silver);
  display: flex; align-items: center; gap: 12px; margin: 48px 0 18px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-hi), transparent); }
.panel-title { margin: 0 0 14px; }
.eyebrow { font: 600 .75rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lede { font-size: 1.12rem; color: var(--silver); max-width: 70ch; }
.count { font: 600 .7rem/1 var(--mono); color: var(--muted); padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; margin-left: 4px; }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 .75rem/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line-hi); }
.crumbs a { color: var(--silver); text-decoration: none; }
.crumbs a:hover { color: var(--neon); }
.crumbs [aria-current] { color: var(--muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  font: 700 .8rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--silver-hi); border: 1px solid var(--line-hi); border-radius: var(--radius);
  background: var(--chrome-soft), var(--panel-2); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { color: #fff; border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .25), 0 0 24px rgb(var(--neon-rgb) / .18); }
.btn--chrome { color: var(--bg-2); background: var(--chrome); border-color: rgba(255,255,255,.6); }
.btn--chrome:hover { color: #000; }

/* ---------- hero ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; margin-top: 20px;
  border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8);
}
.hero::before { /* corner brackets */
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--neon), var(--neon)) left top / 18px 1px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left top / 1px 18px no-repeat,
    linear-gradient(var(--silver), var(--silver)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--silver), var(--silver)) right bottom / 1px 18px no-repeat;
  opacity: .7;
}
.hero-inner { position: relative; z-index: 1; padding: clamp(24px, 5vw, 48px); }
.hero-title { font-size: clamp(1.5rem, 4.2vw, 2.6rem); margin: 0 0 14px; overflow-wrap: anywhere; }
.hero-title a { text-decoration: none; color: var(--silver-hi); }
.hero-slide:has(.hero-title a[href]), .hero:not(.hero-slider):has(.hero-title a[href]) { cursor: pointer; } /* app.js: the whole rectangle opens the title link */
.hero-slide:hover .hero-title a, .hero:not(.hero-slider):hover .hero-title a, .hero-title a:hover { color: #fff; text-shadow: -2px 0 rgb(var(--neon-rgb) / .6), 2px 0 rgb(var(--neon2-rgb) / .45); }
.hero-text { color: var(--silver); max-width: 60ch; margin: 0 0 24px; }
.hero-img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.hero-grid {
  min-height: 160px;
  background:
    linear-gradient(rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.18), transparent 55%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
}
@media (min-width: 860px) { .hero { grid-template-columns: 1.3fr 1fr; } }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 0 rgb(var(--neon-rgb) / .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(var(--neon-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--neon-rgb) / 0); } }

.cat-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.cat-strip a {
  font: 600 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--silver); background: var(--panel);
}
.cat-strip a:hover { border-color: var(--line-hi); color: var(--silver-hi); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.search { flex: 1 1 260px; }
.search input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: 500 .95rem var(--font); color: var(--silver-hi);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.search input:focus { border-color: var(--neon); outline: none; box-shadow: 0 0 0 3px rgb(var(--neon-rgb) / .15); }
.sort { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sort button { min-height: 44px; padding: 0 14px; font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 0; cursor: pointer; }
.sort button + button { border-left: 1px solid var(--line); }
.sort button[aria-pressed="true"] { color: var(--bg-2); background: var(--chrome); }

/* ---------- cards grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
.card::before { /* chrome top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.card:hover, .card:focus-within { transform: translateY(-3px); border-color: var(--line-hi); box-shadow: 0 18px 40px -20px rgba(0,0,0,.9), 0 0 0 1px rgb(var(--neon-rgb) / .12); }
.card-media { aspect-ratio: 16 / 9; background: #0e1117; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); transition: filter .3s, transform .4s; }
.card:hover .card-media img { filter: none; transform: scale(1.03); }
.card-media--empty {
  aspect-ratio: auto; height: 6px;
  background: var(--chrome); opacity: .5;
}
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 500 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card-meta .cat { position: relative; z-index: 3; color: var(--neon); text-decoration: none; }
.card-title { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.card-link { color: var(--silver-hi); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 5; } /* whole card clickable: above the image, effects and badges */
.card a:not(.card-link), .card button { position: relative; z-index: 6; } /* real links on the card (category, tags, author) stay clickable on top */
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--neon); outline-offset: 2px; }
.card-excerpt { margin: 0; color: var(--muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .chips { margin-top: auto; position: relative; z-index: 3; }

/* ---------- chips ---------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px;
  font: 600 .75rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; color: var(--silver);
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03);
}
.chip:hover { color: var(--neon); border-color: rgb(var(--neon-rgb) / .5); background: rgb(var(--neon-rgb) / .06); }
.chips--sm .chip { min-height: 26px; padding: 4px 9px; font-size: .68rem; }
.chips--lg .chip { min-height: 40px; padding: 8px 16px; font-size: .85rem; }

/* ---------- panels ---------- */
.panel { margin-top: 40px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.panel--inline { margin: 20px 0; padding: 16px 18px; }
.list-head { margin: 22px 0 8px; }
.list-head .page-title { margin-top: 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--gap); margin-top: 20px; }
.cat-card { margin: 0; }
.cat-card .panel-title a { color: var(--silver-hi); text-decoration: none; }
.cat-card p { color: var(--muted); margin: 0 0 12px; }
.empty { color: var(--muted); font-family: var(--mono); }

/* ---------- post ---------- */
.post { max-width: var(--read-w, 760px); margin: 0 auto; }
.post-head { padding: 24px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.post-kicker { display: flex; gap: 8px; font: 600 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.post-kicker a { color: var(--neon); text-decoration: none; }
.post-kicker span { color: var(--muted); }
.post-title { font-size: clamp(1.9rem, 5.5vw, 3.1rem); margin: 14px 0; overflow-wrap: anywhere; }
.post-lede { font-size: 1.15rem; color: var(--silver); margin: 0 0 20px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; font: 500 .8rem/1.5 var(--mono); color: var(--muted); }
.post-meta div { display: flex; gap: 6px; }
.post-meta dt { color: var(--muted); }
.post-meta dt::after { content: ":"; }
.post-meta dd { margin: 0; color: var(--silver); }
.post-figure { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.post-figure img { width: 100%; }

.prose { font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; margin-bottom: .4em; }
.prose h2 { font-size: 1.55rem; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 1.25rem; }
.prose p, .prose li { color: var(--text); }
.prose img { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.prose blockquote { margin-left: 0; padding: 12px 18px; border-left: 2px solid var(--neon); background: rgb(var(--neon-rgb) / .04); color: var(--silver); }
.prose code { font: .9em var(--mono); padding: 2px 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 3px; }
.prose pre { overflow-x: auto; padding: 16px; background: #050608; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.prose pre code { padding: 0; border: 0; background: none; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-hi), transparent); margin: 2.4em 0; }
.prose a { overflow-wrap: anywhere; }
.source-box { margin: 32px 0 0; }
.link-list { margin: 0; padding-left: 18px; }
.link-list li + li { margin-top: 8px; }
.link-list .host { font: .75rem var(--mono); color: var(--muted); }
.related { margin-top: 24px; }


/* ---------- title + subtitle ---------- */
.post-hgroup { margin: 14px 0 16px; }
.post-hgroup .post-title { margin: 0; }
.post-subtitle {
  margin: 12px 0 0; font: 500 clamp(1.05rem, 2.6vw, 1.3rem)/1.45 var(--font); color: var(--silver);
  padding-left: 14px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--neon), var(--neon-2)) 1;
}
.card-subtitle { margin: -4px 0 0; font-size: .92rem; line-height: 1.45; color: var(--silver); }
.hero-subtitle { margin: -6px 0 14px; font-size: 1.1rem; color: var(--silver-hi); opacity: .9; max-width: 60ch; }

/* ---------- tags on posts ---------- */
.post-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.post-tags-k, .tag-panel-k { font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tag-panel-k { margin: 16px 0 8px; }
.chip--combo { border-style: dashed; }

/* ---------- "in short" box ---------- */
.keypoints {
  position: relative; margin: 0 0 28px; padding: 18px 20px 18px 22px;
  background: linear-gradient(135deg, rgb(var(--neon-rgb) / .07), rgb(var(--neon2-rgb) / .03) 60%, transparent), var(--panel);
  border: 1px solid rgb(var(--neon-rgb) / .28); border-radius: var(--radius-lg);
}
.keypoints::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.keypoints-title { margin: 0 0 10px; font: 700 .75rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.keypoints ul { margin: 0; padding-left: 20px; }
.keypoints li { color: var(--silver-hi); }
.keypoints li + li { margin-top: 6px; }
.keypoints li::marker { color: var(--neon); }

/* ---------- table of contents ---------- */
.toc { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.toc-title { margin: 0 0 10px; font: 700 .72rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 22px; columns: 2 220px; column-gap: 28px; }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc li::marker { font: .8em var(--mono); color: var(--muted); }
.toc a { color: var(--silver); text-decoration: none; }
.toc a:hover { color: var(--neon); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 90px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 48px; padding: 12px 18px; font-weight: 650; color: var(--silver-hi);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 700 1.2rem/1 var(--mono); color: var(--neon); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: #fff; }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text); }

/* ---------- visual polish ---------- */
.post-title {
  background: linear-gradient(180deg, #fff 0%, #dfe5ee 55%, #9aa3b2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(-1px 0 rgb(var(--neon-rgb) / .35)) drop-shadow(1px 0 rgb(var(--neon2-rgb) / .25));
}
.card { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--panel); }
/* the post filter hides cards with [hidden]; display:flex above would otherwise keep them visible */
.card[hidden] { display: none; }
/* same for the /links/ filter (link cards are flex too) */
.lcard[hidden], .res-item[hidden] { display: none; }
.card::after { /* neon underline that grows on hover */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--neon), var(--neon-2)); transition: width .35s ease;
}
.card:hover::after, .card:focus-within::after { width: 100%; }
.card-media--empty {
  height: 64px; opacity: 1;
  background:
    linear-gradient(rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 60%), #0c0f15;
  border-bottom: 1px solid var(--line);
}
.main-nav a { position: relative; }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--neon); box-shadow: 0 0 8px var(--neon);
}
.cat-strip a { display: inline-flex; align-items: center; gap: 4px; transition: border-color .2s, color .2s, box-shadow .2s; }
.cat-strip a:hover { box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .2), 0 0 18px rgb(var(--neon-rgb) / .12); }
.prose { line-height: calc(var(--lh, 1.65) + .1); }
.prose > p:first-child { font-size: 1.12em; color: var(--silver-hi); }
.post-head { border-bottom: 0; position: relative; }
.post-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--line-hi), var(--neon) 30%, transparent); opacity: .6; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 80px 0 48px; }
.notfound .eyebrow { justify-content: center; font-size: 1rem; }
.notfound .lede { margin-left: auto; margin-right: auto; }
.nf-path code { word-break: break-all; }
.nf-go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.nf-note { margin-top: 14px; }
.nf-search { padding-bottom: 40px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0; font: 500 .78rem/1.5 var(--mono); color: var(--muted); }
.footer-row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer-row .chrome-text { font-weight: 800; letter-spacing: .18em; }
.site-footer a { color: var(--muted); }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  .header-row { min-height: 56px; }
  .main-nav { width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; text-align: center; padding: 12px 10px; }
  .hero-inner .btn { width: 100%; justify-content: center; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search { flex: 0 0 auto; }
  .sort { width: 100%; }
  .sort button { flex: 1; }
  .card-body { padding: 16px; }
  .prose { font-size: 1.02rem; }
  .toc ol { columns: 1; }
  .keypoints { padding: 16px; }
}

/* ---------- motion & contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-within { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(230, 236, 245, .45); --muted: #b7bfcc; }
  body::before { display: none; }
}

/* ---------- footer links ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: rgb(var(--neon-rgb) / .5); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--neon); }
.prose .linklike { color: var(--silver-hi); }

/* ---------- cookie / external content notice ---------- */
.consent {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 720px;
  padding: 18px 20px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), rgba(12, 14, 19, .97);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}
.consent::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), transparent); }
.consent-title { margin: 0 0 6px; font: 700 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-hi); }
.consent-text { margin: 0 0 14px; font-size: .92rem; color: var(--silver); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 600px) { .consent { left: 8px; right: 8px; bottom: 8px; padding: 16px; } .consent-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- AI prompt ---------- */
.prompt-box { margin-top: 36px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background: #050608; overflow: hidden; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--chrome-soft), var(--panel-2); }
.prompt-head .panel-title { margin: 0; }
.prompt-text { margin: 0; padding: 18px; max-height: 520px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .92rem/1.6 var(--mono); color: var(--silver-hi); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .72rem; }

/* ---------- video (click-to-load) ---------- */
.video-box { margin-top: 36px; }
.video-box .panel-title { margin-bottom: 12px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 60%), repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .05) 0 1px, transparent 1px 4px), #07080b; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.video-title { margin: 0; font-weight: 700; color: var(--silver-hi); max-width: 50ch; }
.video-note { margin: 0; font-size: .8rem; color: var(--muted); max-width: 52ch; }
.video-link { font: .78rem var(--mono); }
@media (max-width: 480px) { .video-frame { aspect-ratio: 4 / 3; } .video-note { display: none; } }

/* ---------- downloads ---------- */
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dl-list .host { font: .75rem var(--mono); color: var(--muted); }

/* ---------- legal pages ---------- */
.legal { max-width: 820px; }
.legal-dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.legal-dl dt { color: var(--muted); font: 600 .78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.legal-dl dd { margin: 0; }
@media (max-width: 600px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dd { margin-bottom: 8px; } }
.missing { color: #ffb4b4; background: rgba(255, 63, 99, .12); padding: 0 4px; border-radius: 3px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cookie-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.cookie-table th, .cookie-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cookie-table th { font: 600 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.cookie-table tr:last-child td { border-bottom: 0; }
.muted-note { color: var(--muted); font-size: .85rem; }

/* ---------- draft badge (local preview only) ---------- */
.draft-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 7px; font: 700 .62rem/1 var(--mono); letter-spacing: .12em; color: #000; background: #f5b84a; border-radius: 3px; }

/* ---------- series ---------- */
.series { margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--line-hi); border-left: 2px solid var(--neon); border-radius: var(--radius-lg); background: var(--panel); }
.series-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 10px; }
.series-head .eyebrow { margin: 0; }
.series-head b { color: var(--silver-hi); }
.series-pos { margin-left: auto; font: 600 .72rem var(--mono); color: var(--muted); }
.series-list { margin: 0 0 12px; padding-left: 22px; font-size: .95rem; }
.series-list li { margin: 4px 0; }
.series-list [aria-current] { color: var(--neon); font-weight: 600; }
.series-nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- prev / next ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.pager-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.pager-link:hover { border-color: var(--line-hi); }
.pager-next { text-align: right; grid-column: 2; }
.pager-k { font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager-t { color: var(--silver-hi); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager-next { grid-column: 1; } }

/* ---------- combine tags / random ---------- */
.plus { color: var(--neon); margin: 0 .2em; }
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover { color: var(--neon); }
.chip-toggle { cursor: pointer; font-family: var(--mono); }
.chip-toggle[aria-pressed="true"] { color: #000; background: var(--chrome); border-color: #fff; }
.combiner .chips { margin: 12px 0; }
.combiner-status { font: 600 .8rem var(--mono); color: var(--neon); min-height: 1.4em; margin: 0 0 8px; }
.random-row { margin: 8px 0 0; }

/* ---------- link directory ---------- */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.lcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; transition: border-color .2s, box-shadow .2s; }
.lcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
.lcard:hover, .lcard:focus-within { border-color: var(--line-hi); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .12); }
.lcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lcard .host { font: .75rem var(--mono); color: var(--muted); }
.lcard-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.lcard-title a { color: var(--silver-hi); text-decoration: none; }
.lcard-title a:hover { color: var(--neon); }
/* the whole card opens the link (title link stretched over the card); other links and the licence badge stay on top */
.lcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lcard-foot a, .lcard-top a { position: relative; z-index: 2; }
.lcard:hover .lcard-title a { color: var(--neon); }
.lcard-desc { margin: 0; color: var(--text); font-size: .95rem; }
.lcard-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 500 .74rem/1.4 var(--mono); color: var(--muted); margin-top: auto; }
.lcard-foot .cat { color: var(--neon); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.lcard-foot .src { color: var(--silver); }
.lic { font: 700 .66rem/1 var(--mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.lic--open { color: #3ddc97; border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.06); }
.lic--closed { color: #f5b84a; border-color: rgba(245,184,74,.45); }
.lic--unknown { color: var(--muted); border-color: var(--line); }
.check-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 .78rem var(--mono); color: var(--silver); cursor: pointer; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--neon); }

/* ---------- archive ---------- */
.btn-row-pub { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.archive-dl { max-width: 760px; }
.hash { font: .85rem var(--mono); overflow-wrap: anywhere; }
.file-list { columns: 2 280px; column-gap: 28px; }
.file-list li { break-inside: avoid; }

/* ---------- source card (curated articles) ---------- */
.source-card {
  margin: 0 0 28px; padding: 16px 20px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 70%), var(--panel);
}
.source-card-k { margin: 0 0 6px; font: 700 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.source-card-k a { color: var(--neon); text-decoration: none; }
.source-card-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.source-card-title a { text-decoration: none; }
.source-card-meta { margin: 4px 0 0; font: .78rem var(--mono); color: var(--muted); }
.source-quote { margin: 14px 0 0; padding: 10px 16px; border-left: 2px solid var(--neon-2); background: rgb(var(--neon2-rgb) / .05); color: var(--silver); font-style: italic; }
.source-quote p { margin: 0; }
.card-why { margin: 0; font: 600 .7rem/1.4 var(--mono); letter-spacing: .04em; color: var(--neon); opacity: .85; }
.host { font: .75rem var(--mono); color: var(--muted); margin: 0 0 10px; }

/* ---------- network map ---------- */
.net { margin: 24px 0 0; padding: 10px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background:
  radial-gradient(circle at 50% 50%, rgb(var(--neon-rgb) / .06), transparent 70%),
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px, #07090d; }
.net-svg { display: block; width: 100%; height: auto; }
/* pan & zoom (app.js): the stage catches the mouse wheel and drags; full screen / detached window fill the screen */
.net-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; }
.net-hint { font: 500 .72rem/1.4 var(--mono); color: var(--muted); }
.net-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.net-btns .btn { min-height: 34px; padding: 6px 10px; font-size: .68rem; }
.net.is-live .net-stage { height: min(72vh, 760px); overflow: hidden; cursor: grab; touch-action: none; border-radius: var(--radius); }
.net.is-live .net-stage.is-dragging { cursor: grabbing; }
.net.is-live .net-svg { width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.net:fullscreen, .net-detached .net { display: flex; flex-direction: column; margin: 0; border-radius: 0; border: 0; padding: 10px; }
.net:fullscreen .net-stage, .net-detached .net .net-stage { flex: 1; height: auto; min-height: 0; }
.net:fullscreen .net-svg text, .net-detached .net-svg text { display: block; }
html.net-detached body > *:not(main), html.net-detached main > *:not(.net) { display: none !important; }
html.net-detached main { padding: 0; max-width: none; }
html.net-detached body, html.net-detached main, html.net-detached .net { height: 100vh; }
html.net-detached body::before { display: none; }
.net-svg a circle { transition: r .2s, fill-opacity .2s; }
.net-svg a:hover circle, .net-svg a:focus circle { fill-opacity: 1; stroke: #fff; }
.net-svg text { font-family: var(--mono); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.net-svg line { transition: stroke-opacity .2s; }
.net.is-focus line { stroke-opacity: .05; }
.net.is-focus line.on { stroke-opacity: .9; stroke: var(--neon); }
.net.is-focus [data-i]:not(.on) { opacity: .35; }
.net-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 6px 2px; font: 600 .75rem/1.4 var(--mono); color: var(--silver); }
.net-legend span { display: inline-flex; align-items: center; gap: 6px; }
.obs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.obs-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--silver); text-decoration: none; font: 600 .78rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.obs-tabs a:hover { border-color: var(--neon); color: var(--neon); }
.obs-tabs a[aria-current="page"] { border-color: var(--neon); color: var(--neon); background: rgba(var(--neon-rgb), .08); }
.vault-bar .obs-tabs { margin: 0; }
.net-kinds, .net-cats { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.net-kinds { width: 100%; }
.net-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.net-kind[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.net-kind[disabled] { cursor: default; }
.net-kind .count { color: var(--muted); }
.net.hide-post [data-k="post"], .net.hide-post line[data-ka="post"], .net.hide-post line[data-kb="post"], .net.hide-idea [data-k="idea"], .net.hide-idea line[data-ka="idea"], .net.hide-idea line[data-kb="idea"], .net.hide-link [data-k="link"], .net.hide-link line[data-ka="link"], .net.hide-link line[data-kb="link"], .net.hide-tag [data-k="tag"], .net.hide-tag line[data-ka="tag"], .net.hide-tag line[data-kb="tag"], .net.hide-cat [data-k="cat"], .net.hide-cat line[data-ka="cat"], .net.hide-cat line[data-kb="cat"], .net.hide-group [data-k="group"], .net.hide-group line[data-ka="group"], .net.hide-group line[data-kb="group"] { display: none; }
.net-svg g[data-i] { cursor: default; outline: none; }
.net-svg [data-i]:hover > :first-child, .net-svg [data-i]:focus > :first-child { stroke: #fff; }
.net-tag .panel-title .count, .net-tag .panel-title a { font: inherit; }
.net-tag .link-list li { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .net-svg text { display: none; } }

/* ---------- home: video & links hub ---------- */
.mh-sub { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font: 700 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.mh-sub > span { color: var(--neon); }
.mh-all { margin-left: auto; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: none; color: var(--muted); }
.mh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.mh-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 14px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mh-card:hover, .mh-card:focus-visible { color: var(--text); border-color: var(--line-hi); transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .15), 0 14px 30px -18px #000; }
.mh-card--video { flex-direction: column; }
.mh-thumb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgb(var(--neon2-rgb) / .18), transparent 60%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), var(--bg-2);
  border: 1px solid var(--line);
}
.mh-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.2rem; color: var(--bg-2); background: var(--chrome); box-shadow: 0 0 24px rgb(var(--neon2-rgb) / .35); transition: transform .2s; padding-left: 4px; }
.mh-card:hover .mh-play { transform: scale(1.1); }
.mh-favicon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; font: 800 1.1rem var(--mono); color: var(--neon); background: rgb(var(--neon-rgb) / .08); border: 1px solid rgb(var(--neon-rgb) / .3); }
.mh-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mh-k { font: 600 .68rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.mh-title { font-weight: 700; color: var(--silver-hi); line-height: 1.35; overflow-wrap: anywhere; }
.mh-desc { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.mh-note { margin: 12px 0 0; font: .75rem var(--mono); color: var(--muted); }

/* pop-up dialog */
.pop { width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-hi); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgb(var(--neon-rgb) / .15); }
.pop::backdrop { background: rgba(3,4,6,.78); backdrop-filter: blur(4px); }
.pop-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.pop-title { flex: 1; margin: 0; font-weight: 700; color: var(--silver-hi); overflow-wrap: anywhere; }
.pop-x { flex: 0 0 44px; height: 44px; font-size: 1.1rem; color: var(--silver); background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.pop-x:hover { color: #fff; border-color: var(--neon); }
.pop-body { padding: 16px 18px 18px; }
.pop-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.pop-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pop-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
.pop-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); max-width: 60ch; }
.pop-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; font-size: .9rem; }
.pop-k { margin: 0 0 8px; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pop-desc { margin: 0 0 16px; color: var(--silver); }
.pop-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.pop-read { display: inline-block; margin-bottom: 4px; }
@media (max-width: 600px) { .pop-btns .btn { width: 100%; justify-content: center; } .pop-body { padding: 12px; } }

/* ---------- category colours (cc-0…cc-7, same palette as the network map) ---------- */
.cc-0 { --cc: var(--neon); } .cc-1 { --cc: var(--neon-2); } .cc-2 { --cc: #c9d0db; } .cc-3 { --cc: #f5b84a; }
.cc-4 { --cc: #7c9cff; } .cc-5 { --cc: #3ddc97; } .cc-6 { --cc: #ff7a59; } .cc-7 { --cc: #b48cff; }

/* global category bar: second row of the sticky header */
.cat-bar { border-top: 1px solid var(--line); background: rgba(8, 10, 14, .6); }
.cat-bar-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.cat-bar-row::-webkit-scrollbar { display: none; }
.cat-bar a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; border-radius: 999px; transition: color .2s, border-color .2s, background .2s;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--neon)); box-shadow: 0 0 8px var(--cc, var(--neon)); }
.cat-bar a:hover { color: var(--silver-hi); border-color: var(--line); }
.cat-bar a[aria-current] { color: var(--bg-2); background: var(--cc, var(--neon)); border-color: var(--cc, var(--neon)); }
.cat-bar a[aria-current] .cat-dot { background: var(--bg-2); box-shadow: none; }
html { scroll-padding-top: 130px; }

/* home: one block per main category */
.cat-section { position: relative; margin-top: 56px; padding: 22px clamp(14px, 3vw, 26px) 26px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 9%, transparent), transparent 45%), var(--panel); scroll-margin-top: 130px; }
.cat-section::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 14px var(--cc); }
.cat-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.cat-section .eyebrow { color: var(--cc); }
.cat-section-title { margin: 0; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.cat-section-title a { color: var(--silver-hi); text-decoration: none; }
.cat-section-title a:hover { color: var(--cc); }
.cat-section-desc { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.cat-section-subs { margin-bottom: 16px; }
.cat-section .grid { gap: 14px; }
.card-meta .cat[class*="cc-"], .post-kicker a[class*="cc-"] { color: var(--cc); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: .72rem; }
@media (max-width: 600px) {
  .cat-section { margin-top: 36px; }
  .cat-section-head .btn { width: 100%; justify-content: center; }
  html { scroll-padding-top: 150px; }
}

/* ======================================================================
   THEME OPTIONS — switched by classes on <html> from content/theme.json
   (CMS → Appearance). Variables come from /css/theme.css.
   ====================================================================== */

/* ---------- style intensity: fx-0 minimal … fx-4 maximal ---------- */
html:not(.fx-scanlines) body::before { display: none; }
html.fx-0 .glitch::before, html.fx-0 .glitch::after, html.fx-1 .glitch::before, html.fx-1 .glitch::after { display: none; }
html.fx-0 .logo, html.fx-0 .chrome-text { background: none; color: var(--silver-hi); }
html.fx-0 .site-header::after, html.fx-0 .hero::before, html.fx-0 .card::before { display: none; }
html.fx-0 .post-title { background: none; color: var(--silver-hi); filter: none; }
html.fx-0 .glitch-soft { text-shadow: none; }
html.fx-0 .card-media img, html.fx-0 .hero-img { filter: none; }
html.fx-0 .card, html.fx-0 .hero, html.fx-0 .panel { background: var(--panel); box-shadow: none; }
html.fx-0 .pulse { animation: none; }
html.fx-1 .card-media img, html.fx-1 .hero-img { filter: grayscale(.15); }
html.fx-3 .card, html.fx-4 .card { border-color: rgb(var(--neon-rgb) / .22); }
html.fx-3 .panel, html.fx-4 .panel, html.fx-3 .hero, html.fx-4 .hero { border-color: rgb(var(--neon-rgb) / .3); box-shadow: 0 0 var(--fx-glow) rgb(var(--neon-rgb) / .12), inset 0 1px 0 rgba(255,255,255,.08); }
html.fx-3 .site-header::after, html.fx-4 .site-header::after { opacity: 1; height: 2px; }
html.fx-3 .btn:hover, html.fx-4 .btn:hover { box-shadow: 0 0 var(--fx-glow) rgb(var(--neon-rgb) / .35); }
html.fx-4 .section-title, html.fx-4 .panel-title { color: var(--neon); }
html.fx-4 .cat-bar { box-shadow: 0 6px 24px -12px rgb(var(--neon-rgb) / .5); }
html.fx-4 .chip:hover { box-shadow: 0 0 12px rgb(var(--neon-rgb) / .4); }
html.fx-heading-glow h1, html.fx-heading-glow h2 { text-shadow: 0 0 var(--fx-glow, 12px) rgb(var(--neon-rgb) / .45); }
html.fx-heading-glow .post-title { filter: drop-shadow(0 0 calc(var(--fx-glow, 12px) / 2) rgb(var(--neon-rgb) / .5)); }
html.fx-line .site-header::after { background-size: 200% 100%; animation: line-run 6s linear infinite; }
@keyframes line-run { from { background-position: 200% 0; } to { background-position: 0 0; } }
html.fx-grid body {
  background-image:
    linear-gradient(rgb(var(--neon-rgb) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--neon-rgb) / .05) 1px, transparent 1px),
    radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow)), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-size: 40px 40px, 40px 40px, auto, auto;
}
html.fx-vignette body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55)); }
html.contrast-high a { text-decoration: underline; }
html.contrast-high .card-excerpt, html.contrast-high .muted { color: var(--silver); }

/* ---------- density ---------- */
html.dens-compact { --gap: 12px; }
html.dens-compact .card-body { padding: 12px 14px 14px; gap: 6px; }
html.dens-compact .section-title { margin: 32px 0 12px; }
html.dens-airy { --gap: clamp(20px, 3.2vw, 36px); }
html.dens-airy .card-body { padding: 24px 24px 26px; }
html.dens-airy .section-title { margin: 64px 0 24px; }

/* ---------- header layouts ---------- */
html.hdr-center .header-row { flex-direction: column; justify-content: center; gap: 6px; }
html.hdr-center .main-nav { justify-content: center; }
html.hdr-stacked .header-row { flex-direction: column; align-items: flex-start; gap: 6px; }
html.hdr-static .site-header { position: relative; }
html.hdr-solid .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.catbar-static .cat-bar--below { position: relative; }
.cat-bar--below { border-bottom: 1px solid var(--line); }
.site-tagline { display: block; font: 500 .65rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ---------- logo effects ---------- */
html.logo-fx-chrome .logo .glitch::before, html.logo-fx-chrome .logo .glitch::after,
html.logo-fx-neon .logo .glitch::before, html.logo-fx-neon .logo .glitch::after,
html.logo-fx-plain .logo .glitch::before, html.logo-fx-plain .logo .glitch::after { display: none; }
html.logo-fx-neon .logo { background: none; color: var(--neon); text-shadow: 0 0 8px rgb(var(--neon-rgb) / .8), 0 0 22px rgb(var(--neon-rgb) / .4); }
html.logo-fx-plain .logo { background: none; color: var(--silver-hi); }
html.fx-4.logo-fx-neon .logo { animation: flicker 5s infinite; }

/* ---------- menu effects ---------- */
.main-nav a { position: relative; }
html.menu-normal-case .main-nav a { text-transform: none; letter-spacing: .02em; font-size: .9rem; }
html.menu-fx-none .main-nav a, html.menu-fx-none .main-nav a:hover, html.menu-fx-none .main-nav a[aria-current="page"],
html.menu-fx-underline .main-nav a, html.menu-fx-glow .main-nav a, html.menu-fx-glitch .main-nav a, html.menu-fx-flicker .main-nav a, html.menu-fx-scan .main-nav a, html.menu-fx-bracket .main-nav a { border-color: transparent; background: none; }
html.menu-fx-none .main-nav a[aria-current="page"] { color: var(--neon); }
html.menu-fx-underline .main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: linear-gradient(90deg, var(--neon), var(--neon-2)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
html.menu-fx-underline .main-nav a:hover::after, html.menu-fx-underline .main-nav a:focus-visible::after, html.menu-fx-underline .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
html.menu-fx-glow .main-nav a:hover, html.menu-fx-glow .main-nav a:focus-visible, html.menu-fx-glow .main-nav a[aria-current="page"] { color: var(--neon); text-shadow: 0 0 6px rgb(var(--neon-rgb) / .9), 0 0 18px rgb(var(--neon-rgb) / .5); }
html.menu-fx-glitch .main-nav a:hover, html.menu-fx-glitch .main-nav a:focus-visible { color: var(--silver-hi); animation: nav-glitch .45s steps(2) 2; }
html.menu-fx-glitch .main-nav a[aria-current="page"] { color: var(--silver-hi); text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); }
@keyframes nav-glitch { 0% { text-shadow: -2px 0 var(--neon), 2px 0 var(--neon-2); transform: translate(0); } 33% { text-shadow: 2px 0 var(--neon), -2px 0 var(--neon-2); transform: translate(-1px, 1px); } 66% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: translate(1px, -1px); } 100% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: translate(0); } }
html.menu-fx-flicker .main-nav a:hover, html.menu-fx-flicker .main-nav a:focus-visible { color: var(--neon); animation: flicker 1.2s linear 1; text-shadow: 0 0 10px rgb(var(--neon-rgb) / .7); }
html.menu-fx-flicker .main-nav a[aria-current="page"] { color: var(--neon); }
@keyframes flicker { 0%, 19%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 21%, 63% { opacity: .35; } }
html.menu-fx-scan .main-nav a { overflow: hidden; }
html.menu-fx-scan .main-nav a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(var(--neon-rgb) / .35) 50%, transparent 70%); transform: translateX(-120%); }
html.menu-fx-scan .main-nav a:hover::after, html.menu-fx-scan .main-nav a:focus-visible::after { transform: translateX(120%); transition: transform .6s ease; }
html.menu-fx-scan .main-nav a[aria-current="page"] { color: var(--neon); }
html.menu-fx-bracket .main-nav a::before, html.menu-fx-bracket .main-nav a::after { position: absolute; top: 50%; translate: 0 -50%; color: var(--neon); opacity: 0; transition: opacity .2s, transform .2s; }
html.menu-fx-bracket .main-nav a::before { content: "["; left: 0; transform: translateX(4px); }
html.menu-fx-bracket .main-nav a::after { content: "]"; right: 0; transform: translateX(-4px); }
html.menu-fx-bracket .main-nav a:hover::before, html.menu-fx-bracket .main-nav a:hover::after, html.menu-fx-bracket .main-nav a:focus-visible::before, html.menu-fx-bracket .main-nav a:focus-visible::after,
html.menu-fx-bracket .main-nav a[aria-current="page"]::before, html.menu-fx-bracket .main-nav a[aria-current="page"]::after { opacity: 1; transform: none; }
html.menu-fx-bracket .main-nav a[aria-current="page"] { color: var(--silver-hi); }

/* categories dropdown in the main menu */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-menu { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 220px; padding: 6px; display: none; flex-direction: column; gap: 2px;
  background: rgb(var(--bg-rgb) / .97); border: 1px solid var(--line-hi); border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9), 0 0 var(--fx-glow, 0) rgb(var(--neon-rgb) / .15); }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
.main-nav .nav-dd-menu a { text-transform: none; letter-spacing: .02em; font-size: .85rem; padding: 8px 10px; }
.main-nav .nav-dd-menu a .cat-dot { display: inline-block; flex: 0 0 auto; margin-right: 8px; }
@media (max-width: 600px) { .nav-dd-menu { position: fixed; left: 8px; right: 8px; top: auto; } }

/* ---------- card hover effects ---------- */
html.card-fx-none .card:hover, html.card-fx-none .card:focus-within { transform: none; box-shadow: none; }
html.card-fx-none .card::after { display: none; }
html.card-fx-glow .card:hover, html.card-fx-glow .card:focus-within { transform: none; box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .5), 0 0 28px rgb(var(--neon-rgb) / .25); }
html.card-fx-border .card:hover, html.card-fx-border .card:focus-within { transform: none; border-color: var(--neon); box-shadow: none; }
html.card-fx-tilt .card { transition: transform .3s ease, box-shadow .3s; }
html.card-fx-tilt .card:hover, html.card-fx-tilt .card:focus-within { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-3px); }
html.card-fx-scan .card { overflow: hidden; }
html.card-fx-scan .card-body::before { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none; z-index: 2; background: linear-gradient(180deg, transparent, rgb(var(--neon-rgb) / .12), transparent); }
html.card-fx-scan .card:hover .card-body::before { top: 110%; transition: top .9s ease; }
/* .card-body stays unpositioned: the title link's overlay must cover the whole card (image included); scan/shine run over the whole card */

/* ---------- home layouts ---------- */
@media (min-width: 900px) {
  html.home-cols-2 .page-home .grid { grid-template-columns: repeat(2, 1fr); }
  html.home-cols-3 .page-home .grid { grid-template-columns: repeat(3, 1fr); }
  html.home-cols-4 .page-home .grid { grid-template-columns: repeat(4, 1fr); }
  html.home-cols-1 .page-home .grid { grid-template-columns: 1fr; }
  html.home-list .page-home .card { flex-direction: row; }
  html.home-list .page-home .card-media { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  html.home-list .page-home .grid { grid-template-columns: 1fr; }
}
html.home-compact .page-home .card-media { display: none; }
/* "All posts" split: sidebar beside the first rows, then wider rows (CMS → SIDEBAR → Početna) */
.home-split { display: grid; gap: calc(var(--gap) * 1.5); grid-template-columns: minmax(0, 1fr); }
.home-split-rest { margin-top: var(--gap); }
.home-split > .site-sidebar { padding-top: 0; }
@media (min-width: 980px) {
  .home-split { grid-template-columns: minmax(0, 1fr) 300px; } .home-split.sb-left { grid-template-columns: 300px minmax(0, 1fr); } .home-split.sb-left > .site-sidebar { order: -1; }
  .home-split.no-side { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  html .page-home :is(.home-split-main, .home-split-rest).hs-c2 > .grid { grid-template-columns: repeat(2, 1fr); }
  html .page-home :is(.home-split-main, .home-split-rest).hs-c3 > .grid { grid-template-columns: repeat(3, 1fr); }
  html .page-home :is(.home-split-main, .home-split-rest).hs-c4 > .grid { grid-template-columns: repeat(4, 1fr); }
  html .page-home .home-split-rest.hs-c5 > .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) { html .page-home :is(.home-split-main, .home-split-rest) > .grid { grid-template-columns: repeat(2, 1fr); } }
/* cyber glitch when the pointer rolls over a card (Appearance → effects.cardGlitch); the card itself keeps its look */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.card-glitch .card:hover .card-title { animation: card-gl-rgb .42s steps(3, end) 1; }
  html.card-glitch .card:hover .card-media img, html.card-glitch .card:hover .card-media .card-ph { animation: card-gl-img .42s steps(2, end) 1; }
  html.card-glitch .card { position: relative; }
  html.card-glitch .card::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; background: repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .16) 0 1px, transparent 1px 5px); mix-blend-mode: screen; }
  html.card-glitch .card:hover::before { animation: card-gl-scan .42s steps(4, end) 1; }
}
/* text-shadow only: a transform on .card-title would make it the containing block of .card-link::after and shrink the whole-card click area to the title while the glitch runs */
@keyframes card-gl-rgb { 0% { text-shadow: none; } 30% { text-shadow: -1px 0 currentColor, -3px 0 rgb(255 0 90 / .85), 3px 0 rgb(0 240 255 / .85); } 60% { text-shadow: 1px 0 currentColor, 3px 0 rgb(255 0 90 / .85), -3px 0 rgb(0 240 255 / .85); } 100% { text-shadow: none; } }
@keyframes card-gl-img { 0% { clip-path: inset(0); transform: none; } 40% { clip-path: inset(22% 0 48% 0); transform: translateX(-4px); } 80% { clip-path: inset(62% 0 10% 0); transform: translateX(3px); } 100% { clip-path: inset(0); transform: none; } }
@keyframes card-gl-scan { 0% { opacity: 0; } 25% { opacity: 1; transform: translateY(-3px); } 75% { opacity: .7; transform: translateY(2px); } 100% { opacity: 0; transform: none; } }
html.home-compact .page-home .card-body { padding: 14px; }
html.no-excerpts .card-excerpt { display: none; }
.type-badge { font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bg-2); background: var(--silver); padding: 3px 6px; border-radius: 3px; position: relative; z-index: 3; }
.type-badge--prompt { background: var(--neon); }
.type-badge--video { background: var(--neon-2); }
.type-badge--link, .type-badge--news { background: var(--silver-hi); }

/* ---------- sidebar & widgets ---------- */
.with-sidebar { display: grid; gap: calc(var(--gap) * 1.5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .with-sidebar.sb-right { grid-template-columns: minmax(0, 1fr) 300px; }
  .with-sidebar.sb-left { grid-template-columns: 300px minmax(0, 1fr); }
  .with-sidebar.sb-left > .site-sidebar { order: -1; }
  .with-sidebar.sb-right.sbw-260 { grid-template-columns: minmax(0, 1fr) 260px; } .with-sidebar.sb-left.sbw-260 { grid-template-columns: 260px minmax(0, 1fr); }
  .with-sidebar.sb-right.sbw-340 { grid-template-columns: minmax(0, 1fr) 340px; } .with-sidebar.sb-left.sbw-340 { grid-template-columns: 340px minmax(0, 1fr); }
  .with-sidebar.sb-right.sbw-380 { grid-template-columns: minmax(0, 1fr) 380px; } .with-sidebar.sb-left.sbw-380 { grid-template-columns: 380px minmax(0, 1fr); }
  .site-sidebar.is-sticky { position: sticky; top: 140px; align-self: start; max-height: calc(100vh - 160px); overflow: auto; scrollbar-width: thin; }
}
.site-sidebar { padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 979px) { .sb-mobile-hide > .site-sidebar { display: none; } }
.widget { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.widget-title { font: 700 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin: 0 0 12px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.widget li a { text-decoration: none; color: var(--silver); }
.widget li a:hover { color: var(--neon); }
.widget .chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.widget p { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
/* CMS → SIDEBAR → widget look */
.sbs-plain .widget { background: none; border: 0; padding: 4px 0; border-radius: 0; }
.sbs-outline .widget { background: none; border: 1px dashed var(--line-hi); }
.sbs-neon .widget { border-color: rgb(var(--neon-rgb) / .55); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .12), 0 0 18px rgb(var(--neon-rgb) / .14); }
.sbs-neon .widget-title { color: var(--neon); }
.widget-author .author-ava { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; }
.widget-cat { display: flex; justify-content: space-between; gap: 8px; }
.widget-recent time { display: block; font: 500 .68rem/1.4 var(--mono); color: var(--muted); }
html.fx-3 .widget, html.fx-4 .widget { border-color: rgb(var(--neon-rgb) / .22); }

/* ---------- footer layouts ---------- */
.footer-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 12px 0 24px; }
.footer-col h2 { font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin: 0 0 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col p { margin: 0; max-width: 40ch; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-bottom { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.site-footer--minimal { padding: 16px 0; }
.site-footer--minimal .footer-row { justify-content: center; text-align: center; }
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line-hi); color: var(--silver-hi); box-shadow: 0 0 var(--fx-glow, 0) rgb(var(--neon-rgb) / .3); }
.to-top:hover { color: var(--neon); border-color: var(--neon); }
.consent:not([hidden]) ~ .to-top { display: none; }

/* ---------- logo (text / image / both) ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: calc(1.35rem * var(--logo-scale, 1)); }
.logo-img { height: var(--logo-h, 32px); width: auto; display: block; }

/* ---------- icons ---------- */
.ico { display: inline-block; flex: 0 0 auto; vertical-align: -.2em; }

/* ---------- recommended strip under the menu ---------- */
.rec-bar { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgb(var(--neon-rgb) / .06), transparent 60%), rgb(var(--bg-rgb) / .6); }
.rec-bar-row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-block: 6px; overflow: hidden; }
.rec-bar-k { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.rec-bar-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.rec-bar-list li { flex: 0 0 auto; scroll-snap-align: start; }
.rec-bar-list a { display: inline-flex; align-items: center; gap: 8px; max-width: 34ch; padding: 6px 12px; font-size: .82rem; text-decoration: none; color: var(--silver); border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--panel-rgb) / .6); white-space: nowrap; }
.rec-bar-list a span { overflow: hidden; text-overflow: ellipsis; }
.rec-bar-list a:hover { color: var(--silver-hi); border-color: var(--neon); }
.rec-bar--cards .rec-bar-list a { border-radius: var(--radius); padding: 4px 10px 4px 4px; }
.rec-bar--cards .rec-bar-list img { width: 44px; height: 28px; object-fit: cover; border-radius: 3px; }
.rec-bar--ticker .rec-bar-list a { border: 0; background: none; padding: 4px 6px; border-radius: 0; }
.rec-bar--ticker .rec-bar-list li + li a::before { content: "//"; color: var(--neon); margin-right: 10px; opacity: .7; }

/* ---------- article tools (print / Obsidian / vault) ---------- */
.post-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.post-tools .btn, .vault-btns .btn { min-height: 36px; padding: 8px 12px; font-size: .7rem; }
.vault-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* ---------- author box ---------- */
.author-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.author-ico { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-hi); color: var(--neon); }
.author-ico .ico { width: 26px; height: 26px; }
.author-k { margin: 0; font: 700 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.author-name { margin: 6px 0 8px; font-size: 1.2rem; }
.author-name a { text-decoration: none; }
.author-bio, .author-url, .author-more { margin: 0 0 6px; color: var(--silver); font-size: .95rem; }
.author-more { color: var(--muted); font-size: .88rem; }

/* ---------- under the article: related · recommended · random ---------- */
.below { margin-top: 48px; }
.below-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.below-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; margin-bottom: -1px; cursor: pointer;
  font: 700 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.below-tabs [role="tab"]:hover { color: var(--silver-hi); }
.below-tabs [role="tab"][aria-selected="true"] { color: var(--neon); border-color: var(--line); background: var(--panel); box-shadow: inset 0 2px 0 var(--neon); }
.below-title { display: flex; align-items: center; gap: 10px; }
.below-title .ico { color: var(--neon); }
.below.is-tabbed .below-title { display: none; }
.below--stacked .below-panel + .below-panel, .below:not(.is-tabbed) .below-panel + .below-panel { margin-top: 32px; }
.below-more { margin: 14px 0 0; }

/* ---------- extra theme options: card & button styles, headings, links ---------- */
html.cards-flat .card { background: var(--panel); box-shadow: none; }
html.cards-flat .card::before { display: none; }
html.cards-glass .card { background: rgb(var(--panel-rgb) / .45); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
html.cards-outline .card { background: transparent; border-color: var(--line-hi); }
html.cards-outline .card::before { display: none; }
html.cards-neon .card { border-color: rgb(var(--neon-rgb) / .45); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .12), 0 0 18px -6px rgb(var(--neon-rgb) / .4); }
html.btns-neon .btn { background: transparent; border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px -4px rgb(var(--neon-rgb) / .6); }
html.btns-neon .btn:hover { background: rgb(var(--neon-rgb) / .12); color: var(--silver-hi); }
html.btns-outline .btn { background: transparent; }
html.btns-pill .btn { border-radius: 999px; }
html.btns-solid .btn { background: var(--neon); border-color: var(--neon); color: var(--bg); }
html.btns-solid .btn:hover { background: var(--neon-2); border-color: var(--neon-2); color: var(--bg); }
html.btns-neon .btn--chrome, html.btns-outline .btn--chrome { color: var(--bg-2); background: var(--chrome); }
html.h-upper h1, html.h-upper h2, html.h-upper h3 { text-transform: uppercase; letter-spacing: .04em; }
.prose a { color: var(--link, var(--silver-hi)); }

/* ---------- vault view (/vault/): full screen, Obsidian-style ---------- */
.page-vault { height: 100vh; overflow: hidden; }
.vault { display: grid; height: 100vh; grid-template-columns: 280px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar bar bar" "tree note side"; background: var(--bg); }
.vault:fullscreen { background: var(--bg); }
.vault-bar { grid-area: bar; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgb(var(--bg-rgb) / .9); }
.vault-home { font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.vault-name { display: inline-flex; align-items: center; gap: 6px; font: 800 .9rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.vault-search { flex: 1 1 200px; max-width: 420px; }
.vault-search input { width: 100%; min-height: 36px; padding: 6px 12px; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.vault-legal { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; font-size: .72rem; color: var(--muted); }
.vault-legal a, .vault-legal .linklike { color: var(--muted); }
@media (min-width: 1200px) { .vault-legal { width: auto; } }
.vault-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.vault-actions .btn { min-height: 34px; padding: 6px 10px; font-size: .68rem; }
.vault-actions .btn[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); }
.vault-tree { grid-area: tree; overflow: auto; padding: 10px 8px 40px; border-right: 1px solid var(--line); background: rgb(var(--panel-rgb) / .5); font-size: .88rem; scrollbar-width: thin; }
.vt-folder summary { cursor: pointer; padding: 6px 8px; font: 700 .72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); border-radius: var(--radius); }
/* Vault → Backups folder (daily .md ZIPs) */
.vt-backups .vt-hint { margin: 4px 0 6px 18px; font-size: .78rem; color: var(--muted); }
.vt-backups time { font-family: var(--mono); }
.vt-folder summary:hover { background: rgb(var(--neon-rgb) / .06); }
.vt-folder summary .count { color: var(--muted); font-weight: 400; }
.vt-folder ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--line); margin-left: 12px; }
.vt-folder a { display: block; padding: 4px 8px; color: var(--muted); text-decoration: none; border-radius: var(--radius); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-folder a:hover { color: var(--silver-hi); background: rgb(var(--neon-rgb) / .06); }
.vt-folder a[aria-current] { color: var(--neon); background: rgb(var(--neon-rgb) / .1); }
/* nested folders: category / link category folders and tags / categories that open to their notes */
.vt-sub > details > summary { padding: 4px 8px; font-family: inherit; font-weight: 600; font-size: .84rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-sub > details > ul { margin-bottom: 4px; }
.vt-term > summary a { display: inline; padding: 0; color: inherit; }
.vt-sub[hidden], .vault-tree li[hidden], .vault-tree details[hidden] { display: none; }
.vault-note { grid-area: note; overflow: auto; padding: 28px clamp(16px, 4vw, 56px) 80px; scrollbar-width: thin; }
.vault-note:focus { outline: none; }
.vault-body { max-width: 760px; }
.vault-path { margin: 0 0 12px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; color: var(--muted); }
.vault-body a[data-note] { color: var(--neon); text-decoration-style: dotted; }
.vault-missing { opacity: .55; }
.vault-side { grid-area: side; overflow: auto; padding: 16px; border-left: 1px solid var(--line); background: rgb(var(--panel-rgb) / .5); font-size: .88rem; scrollbar-width: thin; }
.vault-sec { margin-bottom: 18px; }
.vault-sec-title { margin: 0 0 8px; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.vault-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vault-sec a { color: var(--muted); text-decoration: none; }
.vault-sec a:hover { color: var(--neon); }
.vault-sec .chip { display: inline-flex; }
.vault-props { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.vault-props dt { font: 500 .7rem/1.6 var(--mono); color: var(--muted); }
.vault-props dd { margin: 0; overflow-wrap: anywhere; }
.vault-dl { margin: 0 0 16px; }
.vault.show-graph { grid-template-rows: auto minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "bar bar bar" "tree graph side" "tree note side"; }
.vault-graph { grid-area: graph; display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--line-hi); background: radial-gradient(circle at 50% 50%, rgb(var(--neon-rgb) / .06), transparent 70%), var(--bg); }
.vault-graph[hidden] { display: none; }
.vg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .76rem; background: rgb(var(--bg-rgb) / .85); }
.vg-tools .btn { min-height: 28px; padding: 4px 9px; font-size: .68rem; }
.vg-tools select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
.vg-tools .check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.vg-group { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.vg-f i { width: 8px; height: 8px; border-radius: 50%; background: var(--silver); display: inline-block; }
.vg-f.vg-posts i { background: var(--neon); } .vg-f.vg-tags i { background: var(--neon-2); } .vg-f.vg-categories i { background: var(--silver-hi); } .vg-f.vg-links i { background: var(--muted); } .vg-f.vg-pages i { background: #ffb000; }
.vg-stage { flex: 1; min-height: 0; position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.vg-stage.is-dragging { cursor: grabbing; }
.vg-stage .vault-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vg-node { cursor: pointer; }
.vg-node text { opacity: 0; transition: opacity .2s; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.vg-labels .vg-node text, .vg-node.is-cur text, .vg-node.is-near text, .vg-node:hover text, .vg-node.is-hit text { opacity: 1; }
.vg-pages circle { fill: #ffb000; }
.vg-focus .vg-node:not(.is-near) { opacity: .25; }
.vg-focus line:not(.on) { stroke-opacity: .08; }
.vg-node.is-hit circle { stroke: var(--silver-hi); stroke-width: 3; }
.vault-svg { width: 100%; height: 100%; }
.vault-svg line { stroke: rgb(var(--neon-rgb) / .22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vault-svg line.on { stroke: var(--neon); stroke-width: 2; }
.vg-node circle { fill: var(--silver); fill-opacity: .8; stroke: var(--bg); stroke-width: 2; }
.vg-node text { fill: var(--muted); font: 500 12px var(--font); }
.vg-posts circle { fill: var(--neon); }
.vg-tags circle { fill: var(--neon-2); }
.vg-categories circle { fill: var(--silver-hi); }
.vg-links circle { fill: var(--muted); }
.vg-node.is-near text, .vg-node:hover text, .vg-node:focus text { fill: var(--silver-hi); }
.vg-node.is-cur circle { stroke: var(--silver-hi); stroke-width: 4; }
.vg-node.is-cur text { fill: var(--neon); font-weight: 700; }
@media (max-width: 980px) {
  .page-vault { height: auto; overflow: auto; }
  .vault { height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "tree" "note" "side"; }
  .vault-tree { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .vault-note { overflow: visible; }
  .vault-side { border-left: 0; border-top: 1px solid var(--line); }
  .vault.show-graph { grid-template-rows: none; grid-template-areas: "bar" "tree" "graph" "note" "side"; }
  .vault-graph { min-height: 70vh; }
}

/* ======================================================================
   GUI STYLES (CMS → Appearance → CG → GUI stil): html.gui-<style> + gui-s1…s3
   ====================================================================== */
/* ---------- cyber HUD: clipped corners, corner brackets, // labels ---------- */
html.gui-cyber { --cut: 10px; }
html.gui-cyber.gui-s3 { --cut: 16px; }
html.gui-cyber .card, html.gui-cyber .panel, html.gui-cyber .widget, html.gui-cyber .pager-link, html.gui-cyber .lcard, html.gui-cyber .hero {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); border-radius: 0; }
html.gui-cyber .btn { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; }
html.gui-cyber .panel, html.gui-cyber .widget, html.gui-cyber .keypoints, html.gui-cyber .toc {
  background-image: linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; background-repeat: no-repeat;
  background-position: right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0; }
html.gui-cyber .section-title::before, html.gui-cyber .panel-title::before, html.gui-cyber .widget-title::before { content: "// "; color: var(--neon); }
html.gui-cyber .page-title, html.gui-cyber .post-title { letter-spacing: .02em; }
html.gui-cyber .card-meta, html.gui-cyber .eyebrow { color: var(--neon); }
html.gui-cyber.gui-s2 .card:hover, html.gui-cyber.gui-s3 .card:hover { box-shadow: 0 0 0 1px var(--neon), 0 0 24px -4px rgb(var(--neon-rgb) / .6); }
html.gui-cyber.gui-s3 .main-nav a { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
html.gui-cyber.gui-s3 body { background-image: linear-gradient(rgb(var(--neon-rgb) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--neon-rgb) / .045) 1px, transparent 1px), linear-gradient(180deg, var(--bg-2), var(--bg) 40%); background-size: 24px 24px, 24px 24px, auto; }

/* ---------- glitch: RGB split, jittering titles, glitchy images ---------- */
@keyframes gui-glitch-txt { 0%, 86%, 100% { text-shadow: none; transform: none; } 87% { text-shadow: -3px 0 var(--neon), 3px 0 var(--neon-2); transform: translate(1px, -1px) skewX(-4deg); } 89% { text-shadow: 3px 0 var(--neon), -3px 0 var(--neon-2); transform: translate(-2px, 1px); } 91% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: none; } }
/* same flicker without transform: h2 holds whole-card links (cat cards), and an element with a running transform animation
   becomes the containing block of the link's ::after, so only the title would stay clickable */
@keyframes gui-glitch-txt-flat { 0%, 86%, 100% { text-shadow: none; } 87% { text-shadow: -4px 0 var(--neon), 4px 0 var(--neon-2); } 89% { text-shadow: 3px 0 var(--neon), -3px 0 var(--neon-2); } 91% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); } }
@keyframes gui-glitch-img { 0%, 90%, 100% { filter: none; transform: none; } 91% { filter: hue-rotate(90deg) saturate(2); transform: translateX(-4px); } 93% { filter: invert(.1) hue-rotate(-60deg); transform: translateX(3px) skewX(3deg); } 95% { filter: none; transform: none; } }
@keyframes gui-tear { 0%, 94%, 100% { opacity: 0; } 95% { opacity: .9; transform: translateY(18vh); } 97% { opacity: .6; transform: translateY(63vh); } }
html.gui-glitch h1, html.gui-glitch .section-title, html.gui-glitch .card-title { text-shadow: -1px 0 rgb(var(--neon-rgb) / .55), 1px 0 rgb(var(--neon2-rgb) / .55); }
html.gui-glitch h1 { animation: gui-glitch-txt 6s steps(1) infinite; }
html.gui-glitch.gui-s1 h1 { animation-duration: 12s; }
html.gui-glitch.gui-s3 h1 { animation: gui-glitch-txt 3.2s steps(1) infinite; }
html.gui-glitch.gui-s3 h2 { animation: gui-glitch-txt-flat 3.2s steps(1) infinite; }
html.gui-glitch .card:hover .card-media img, html.gui-glitch .post-figure img, html.gui-glitch .hero-img { animation: gui-glitch-img 5s steps(1) infinite; }
html.gui-glitch.gui-s1 .post-figure img, html.gui-glitch.gui-s1 .hero-img { animation: none; }
html.gui-glitch .btn:hover, html.gui-glitch .main-nav a:hover { text-shadow: -2px 0 var(--neon), 2px 0 var(--neon-2); }
html.gui-glitch.gui-s2 body::after, html.gui-glitch.gui-s3 body::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 98; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .9), rgb(var(--neon2-rgb) / .9), transparent); animation: gui-tear 7s steps(1) infinite; }
html.gui-glitch.gui-s3 body::after { animation-duration: 3.5s; }

/* ---------- matrix: mono, green-ish glow, code rain (canvas from app.js) ---------- */
html.gui-matrix { --font: var(--mono); }
html.gui-matrix body { font-family: var(--mono); }
html.gui-matrix h1, html.gui-matrix h2, html.gui-matrix h3 { font-family: var(--mono); text-shadow: 0 0 calc(4px * var(--gui-k, 2)) rgb(var(--neon-rgb) / .55); }
html.gui-matrix .s1, html.gui-matrix.gui-s1 { --gui-k: 1; } html.gui-matrix.gui-s3 { --gui-k: 3; }
html.gui-matrix a { text-shadow: 0 0 6px rgb(var(--neon-rgb) / .35); }
/* the logo keeps its silver chrome gradient (a glow over transparent text tints it; phones drop the glow) — same look on desktop and phone */
html:not(.logo-fx-neon) .logo { text-shadow: none; }
html.gui-matrix .card, html.gui-matrix .panel, html.gui-matrix .widget { background-color: rgb(var(--bg-rgb) / .82); }
.gui-rain-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .22; }
html.gui-s1 .gui-rain-canvas { opacity: .12; } html.gui-s3 .gui-rain-canvas { opacity: .34; }
html.gui-rain { background: radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow, .07)), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg) 40%) fixed; background-color: var(--bg); }
html.gui-rain body { background: transparent; }

/* ---------- terminal: everything mono, $ prompts, ASCII boxes, blinking cursor ---------- */
html.gui-terminal { --font: var(--mono); --font-h: var(--mono); }
html.gui-terminal body { font-family: var(--mono); font-size: .95rem; }
html.gui-terminal h1, html.gui-terminal h2, html.gui-terminal h3 { font-family: var(--mono); background: none; -webkit-text-fill-color: currentColor; color: var(--neon); letter-spacing: 0; }
html.gui-terminal .section-title::before, html.gui-terminal .panel-title::before, html.gui-terminal .widget-title::before, html.gui-terminal .prose h2::before { content: "$ "; color: var(--muted); }
html.gui-terminal .page-title::before, html.gui-terminal .post-title::before { content: "> "; color: var(--muted); }
html.gui-terminal .card, html.gui-terminal .panel, html.gui-terminal .widget, html.gui-terminal .pager-link, html.gui-terminal .btn, html.gui-terminal .chip, html.gui-terminal .hero { border-radius: 0; border-style: dashed; box-shadow: none; background-image: none; background-color: rgb(var(--bg-rgb) / .9); }
html.gui-terminal.gui-s3 .card, html.gui-terminal.gui-s3 .panel { border-style: double; border-width: 3px; }
html.gui-terminal .card-media img, html.gui-terminal .hero-img, html.gui-terminal .post-figure img { filter: grayscale(1) contrast(1.2) sepia(.3); }
html.gui-terminal.gui-s1 .card-media img { filter: grayscale(.5); }
html.gui-terminal .btn { text-transform: lowercase; }
html.gui-terminal .btn::before { content: "["; } html.gui-terminal .btn::after { content: "]"; }
@keyframes gui-blink { 50% { opacity: 0; } }
html.gui-cursor h1::after { content: "▍"; display: inline-block; margin-left: .15em; color: var(--neon); -webkit-text-fill-color: var(--neon); animation: gui-blink 1s steps(1) infinite; }
html.gui-terminal.gui-s2 body::before, html.gui-terminal.gui-s3 body::before { display: block; }
.legal-toc { margin: 0 0 1.4em; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; line-height: 1.9; }
@media print { .gui-rain-canvas { display: none !important; } html.gui-cursor h1::after, html.gui-terminal .btn::before, html.gui-terminal .btn::after { content: none !important; } }

/* ======================================================================
   HOMEPAGE · MENU · FINESSE (CMS → Appearance → Homepage / Izbornik / CG)
   ====================================================================== */
/* ---------- homepage sections ---------- */
.home-intro { margin-top: 24px; }
.home-intro-title { margin: 0 0 8px; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); margin-top: 28px; }
.stat { padding: 18px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat-n { display: block; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--mono); color: var(--neon); text-shadow: 0 0 18px rgb(var(--neon-rgb) / .45); }
.stat-l { display: block; margin-top: 6px; font: 600 .7rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.latest-list li { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.latest-list time { font: 500 .72rem var(--mono); color: var(--muted); }
.latest-list a { text-decoration: none; }
.latest-list .cat { font: 600 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cc, var(--neon)); }
@media (max-width: 600px) { .latest-list li { grid-template-columns: 1fr; gap: 2px; } }
.more-row { text-align: center; margin: 18px 0 0; }
.hero-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.hero-mini { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s; }
.hero-mini:hover { border-color: var(--neon); transform: translateY(-2px); }
.hero-mini-t { font-weight: 700; color: var(--silver-hi); }
/* hero styles */
html.hero-full .hero { display: block; position: relative; min-height: 420px; }
html.hero-full .hero .hero-img, html.hero-full .hero .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; opacity: .45; }
html.hero-full .hero .hero-inner { position: relative; z-index: 2; max-width: 760px; padding-top: 72px; background: linear-gradient(90deg, rgb(var(--bg-rgb) / .9), transparent); }
html.hero-minimal .hero { display: block; text-align: center; background: none; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
html.hero-minimal .hero-inner { max-width: 820px; margin: 0 auto; padding-block: 56px; }
html.hero-minimal .hero-title { font-size: clamp(2rem, 6vw, 3.6rem); }
html.hero-minimal .hero-text { margin-inline: auto; }
html.hero-card .hero { max-width: 860px; margin-inline: auto; }
@media (min-width: 860px) { html.hero-card .hero { grid-template-columns: 1fr 1.2fr; } html.hero-card .hero .hero-img { order: -1; max-height: 300px; } }

/* ---------- menu ---------- */
.main-nav { gap: var(--menu-gap, 4px); }
.main-nav a { font-size: calc(.78rem * var(--menu-scale, 1)); display: inline-flex; align-items: center; gap: 6px; }
.main-nav a .ico { width: 15px; height: 15px; }
html.menu-al-left .header-row { justify-content: flex-start; } html.menu-al-left .main-nav { margin-left: 24px; }
html.menu-al-center .header-row { justify-content: center; gap: 12px 40px; }
html.menu-al-spread .main-nav { flex: 1; justify-content: space-evenly; margin-left: 24px; }
html.menu-w-normal .main-nav a { font-weight: 400; }
html.menu-sep-slash .main-nav > a + a::before, html.menu-sep-slash .main-nav > * + *::before { content: "/"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 3px); color: var(--line-hi); }
html.menu-sep-dot .main-nav > * + *::before { content: "•"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 3px); color: var(--neon); opacity: .7; }
html.menu-sep-pipe .main-nav > * + *::before { content: "|"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 2px); color: var(--line-hi); }
html.menu-sep-slash .main-nav, html.menu-sep-dot .main-nav, html.menu-sep-pipe .main-nav { --menu-gap: 14px; }
.main-nav > .nav-dd { position: relative; }
html.menu-ind-none .main-nav a[aria-current="page"]::after { display: none; }
html.menu-ind-dot .main-nav a[aria-current="page"]::after { left: 50%; right: auto; width: 6px; height: 6px; border-radius: 50%; translate: -50% 0; bottom: 0; }
html.menu-ind-bar .main-nav a[aria-current="page"]::after { left: 0; right: 0; bottom: -9px; height: 3px; box-shadow: 0 0 14px var(--neon); }
.main-nav a.nav-cta { color: var(--bg); background: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px rgb(var(--neon-rgb) / .8); }
.main-nav a.nav-cta:hover { color: var(--bg); background: var(--neon-2); border-color: var(--neon-2); }
html.menu-m-wrap .main-nav { flex-wrap: wrap; }
@media (max-width: 600px) {
  html.menu-m-wrap .main-nav { flex-wrap: wrap; overflow: visible; width: auto; margin: 0; }
  html.menu-m-burger .nav-toggle:not([hidden]) { display: inline-flex; }
  html.menu-m-burger .main-nav { display: none; width: 100%; flex-direction: column; flex-wrap: nowrap; overflow: visible; margin: 0; padding: 6px 0 10px; }
  html.menu-m-burger .main-nav.is-open { display: flex; }
  html.menu-m-burger .main-nav a { padding: 12px 10px; font-size: .9rem; }
}
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 10px; background: none; border: 1px solid var(--line-hi); border-radius: var(--radius); cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--silver-hi); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 601px) { .nav-toggle { display: none !important; } }

/* ---------- finesse: shine, glowing borders, reflection, cursor light, grain, HUD corners, text glow, chroma, glass ---------- */
@keyframes fx-shine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(230%) skewX(-20deg); } }
html.fx-shine-hover .card, html.fx-shine-loop .card, html.fx-shine-hover .btn, html.fx-shine-loop .btn, html.fx-shine-hover .hero, html.fx-shine-loop .hero { position: relative; overflow: hidden; }
html.fx-shine-hover .card-body::after, html.fx-shine-loop .card-body::after, html.fx-shine-hover .hero-inner::after, html.fx-shine-loop .hero-inner::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16) 45%, rgb(var(--neon-rgb) / .22) 50%, rgb(255 255 255 / .12) 55%, transparent); transform: translateX(-130%) skewX(-20deg); }
html.fx-shine-hover .card:hover .card-body::after, html.fx-shine-hover .hero:hover .hero-inner::after { animation: fx-shine .9s ease-out 1; }
html.fx-shine-loop .card-body::after, html.fx-shine-loop .hero-inner::after { animation: fx-shine 4.5s ease-in-out infinite; }
html.fx-shine-loop .card:nth-child(2n) .card-body::after { animation-delay: 1.4s; } html.fx-shine-loop .card:nth-child(3n) .card-body::after { animation-delay: 2.6s; }
html.fx-shine-hover .btn:hover, html.fx-shine-loop .btn { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .25) 48%, transparent 66%), var(--chrome-soft); background-size: 250% 100%, auto; animation: fx-btn-shine 2.8s linear infinite; }
html.fx-shine-hover .btn--chrome:hover, html.fx-shine-loop .btn--chrome, html.fx-shine-loop .nav-cta, html.fx-shine-hover .nav-cta:hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%), var(--chrome); background-size: 250% 100%, auto; }
html.fx-shine-loop .main-nav a.nav-cta, html.fx-shine-hover .main-nav a.nav-cta:hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%); background-color: var(--neon); animation: fx-btn-shine 2.8s linear infinite; }
html.btns-solid.fx-shine-loop .btn:not(.btn--chrome), html.btns-solid.fx-shine-hover .btn:not(.btn--chrome):hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 48%, transparent 66%); background-color: var(--neon); }
@keyframes fx-btn-shine { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
html.fx-gb-always .card, html.fx-gb-always .panel, html.fx-gb-always .widget, html.fx-gb-always .hero, html.fx-gb-always .pager-link { border-color: rgb(var(--neon-rgb) / .55); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .18), 0 0 22px -6px rgb(var(--neon-rgb) / .7), inset 0 0 18px -10px rgb(var(--neon-rgb) / .6); }
html.fx-gb-hover .card:hover, html.fx-gb-hover .panel:hover, html.fx-gb-hover .widget:hover, html.fx-gb-hover .hero:hover, html.fx-gb-hover .pager-link:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .35), 0 0 30px -4px rgb(var(--neon-rgb) / .8), inset 0 0 22px -10px rgb(var(--neon-rgb) / .7); }
html.fx-reflect .logo { -webkit-box-reflect: below -4px linear-gradient(transparent 45%, rgb(255 255 255 / .28)); }
html.fx-reflect .page-title .chrome-text { -webkit-box-reflect: below -10px linear-gradient(transparent 55%, rgb(255 255 255 / .22)); }
.cursor-glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; z-index: 1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--neon-rgb) / .13), transparent 62%); mix-blend-mode: screen; will-change: transform; }
html.fx-grain body::after { content: ""; position: fixed; inset: -50%; z-index: 97; pointer-events: none; opacity: .07; animation: fx-grain 1s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
@keyframes fx-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
html.fx-corners .card, html.fx-corners .panel, html.fx-corners .widget, html.fx-corners .hero, html.fx-corners .stat {
  background-image: linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon));
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px; background-repeat: no-repeat;
  background-position: left 0 top 0, left 0 top 0, right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0, right 0 bottom 0, right 0 bottom 0; background-color: var(--panel); }
html.fx-tg-1 h1, html.fx-tg-1 h2 { text-shadow: 0 0 6px rgb(var(--neon-rgb) / .45); }
html.fx-tg-2 h1, html.fx-tg-2 h2, html.fx-tg-2 .card-title { text-shadow: 0 0 10px rgb(var(--neon-rgb) / .6), 0 0 22px rgb(var(--neon-rgb) / .3); }
html.fx-tg-3 h1, html.fx-tg-3 h2, html.fx-tg-3 h3, html.fx-tg-3 .main-nav a { text-shadow: 0 0 6px var(--neon), 0 0 18px rgb(var(--neon-rgb) / .7), 0 0 36px rgb(var(--neon2-rgb) / .4); }
html.fx-chroma .card:hover .card-title, html.fx-chroma h1:hover, html.fx-chroma .hero-title:hover { text-shadow: -2px 0 rgb(255 0 80 / .8), 2px 0 rgb(0 220 255 / .8); }
html.fx-chroma .card:hover .card-media img, html.fx-chroma .post-figure img:hover { filter: drop-shadow(-3px 0 rgb(255 0 80 / .55)) drop-shadow(3px 0 rgb(0 220 255 / .55)); }
html.fx-chroma .card-media img { filter: drop-shadow(-1px 0 rgb(255 0 80 / .35)) drop-shadow(1px 0 rgb(0 220 255 / .35)); }
html.fx-glass .card, html.fx-glass .panel, html.fx-glass .widget, html.fx-glass .hero, html.fx-glass .site-header, html.fx-glass .stat { background-color: rgb(var(--panel-rgb) / .38); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .04); }
@media print { .cursor-glow { display: none !important; } html.fx-grain body::after { display: none !important; } }

/* ---------- WordPress-like options: cards, single post, related, downloads, archives ---------- */
.card-media { aspect-ratio: var(--card-ratio, 16 / 9); }
.card-title { font-size: calc(1.15rem * var(--card-title, 1)); }
.card-author { position: relative; z-index: 3; color: var(--silver); text-decoration: none; }
.card-author:hover { color: var(--neon); }
.card-more { align-self: flex-start; margin-top: auto; font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--neon); padding: 8px 12px; border: 1px solid rgb(var(--neon-rgb) / .4); border-radius: var(--radius); }
.card--compact .card-body { padding: 14px 16px; }
.rel-list li { padding: 4px 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.share-k { font: 700 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-a { font: 600 .74rem/1 var(--mono); padding: 7px 10px; text-decoration: none; color: var(--silver); background: rgb(var(--panel-rgb) / .7); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.share-a:hover { color: var(--neon); border-color: var(--neon); }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.read-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 12px var(--neon); }
html.post-dropcap .post .prose > p:first-of-type::first-letter { float: left; font: 800 3.6em/.82 var(--font-h, var(--font)); margin: .06em .12em 0 0; color: var(--neon); text-shadow: 0 0 18px rgb(var(--neon-rgb) / .5); }
.post-figure--top { margin: 0 0 18px; }
.post-head--banner { position: relative; overflow: hidden; padding: 48px 24px 24px; border-radius: var(--radius-lg); margin-bottom: 28px; }
.post-head--banner > *:not(.post-banner-img) { position: relative; z-index: 1; }
.post-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(1.2); }
.post-head--banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / .15), rgb(var(--bg-rgb) / .92)); }
.downloads--list .dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; gap: 10px; align-items: center; }
.dl-ico { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 6px; font: 800 .62rem/1 var(--mono); letter-spacing: .08em; color: var(--bg); background: var(--neon); border-radius: 3px; }
.downloads--cards .dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none; padding: 0; }
.dl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s; }
.dl-card:hover { border-color: var(--neon); transform: translateY(-2px); }
.dl-name { font-weight: 700; color: var(--silver-hi); }
.dl-go { margin-top: auto; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--neon); }
.page-category .grid, .page-tag .grid, .page-source .grid, .page-author .grid { --x: 0; }
@media (min-width: 900px) {
  html.arch-cols-1 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: 1fr; }
  html.arch-cols-2 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: repeat(2, 1fr); }
  html.arch-cols-4 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: repeat(4, 1fr); }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: 1fr; }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .card { flex-direction: row; }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .card-media { flex: 0 0 32%; aspect-ratio: auto; min-height: 100%; }
}
html.arch-compact :is(.page-category, .page-tag, .page-source, .page-author) .card-media { display: none; }
.home-page { margin-top: 24px; }
@media print { .share, .read-progress { display: none !important; } }

/* ---------- glitch on selecting a post / menu item (CG → Finese → Glitch na klik) ---------- */
@keyframes gl-jitter {
  0% { transform: none; filter: none; }
  15% { transform: translate(calc(var(--gl-amp) * -1), 1px) skewX(-2deg); filter: hue-rotate(40deg) saturate(1.6); }
  30% { transform: translate(var(--gl-amp), -1px); clip-path: inset(12% 0 58% 0); }
  45% { transform: translate(calc(var(--gl-amp) * -.5), 0); clip-path: inset(48% 0 22% 0); filter: contrast(1.6) hue-rotate(-30deg); }
  60% { transform: translate(calc(var(--gl-amp) * .6), 2px) skewX(3deg); clip-path: none; }
  80% { transform: translate(calc(var(--gl-amp) * -.3), 0); filter: brightness(1.4); }
  100% { transform: none; filter: none; opacity: .85; }
}
@keyframes gl-hit { 0%, 100% { text-shadow: none; transform: none; } 25% { text-shadow: calc(var(--gl-amp) * -1) 0 var(--neon), var(--gl-amp) 0 var(--neon-2); transform: translateX(2px) skewX(-6deg); } 55% { text-shadow: var(--gl-amp) 0 var(--neon), calc(var(--gl-amp) * -1) 0 var(--neon-2); transform: translateX(-2px); } }
@keyframes gl-bar { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } 45% { opacity: .3; } }
html.is-glitching main, html.is-glitching .site-header, html.is-glitching .cat-bar { animation: gl-jitter var(--gl-ms) steps(6) both; }
.gl-hit, .gl-hit .card-title, .gl-hit .pager-t { animation: gl-hit var(--gl-ms) steps(4) both; }
.gl-veil { position: fixed; inset: 0; z-index: 130; pointer-events: none; mix-blend-mode: screen; }
.gl-veil i { position: absolute; left: -5%; right: -5%; display: block; animation: gl-bar var(--gl-ms) steps(3) both;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .55) 20%, rgb(var(--neon2-rgb) / .45) 60%, transparent); }
html.gl-s1 .gl-veil i { opacity: .5; }
html.gl-s3 .gl-veil { mix-blend-mode: difference; }
html.gl-enter.is-entering main, html.gl-enter.is-entering .site-header { animation: gl-jitter var(--gl-ms) steps(6) reverse both; }
@media (prefers-reduced-motion: reduce) { .gl-veil { display: none; } html.is-glitching main, html.is-glitching .site-header, html.is-glitching .cat-bar, .gl-hit { animation: none !important; } }
@media print { .gl-veil { display: none !important; } }

/* ---------- category bar options (Appearance → Kategorije) ---------- */
.cat-bar a { font-size: calc(.74rem * var(--cb-scale, 1)); }
.cat-bar a .count { font-size: .85em; opacity: .7; }
.cb-label { flex: 0 0 auto; align-self: center; margin-right: 6px; font: 700 calc(.66rem * var(--cb-scale, 1))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.cb-all { margin-left: auto; }
html.cb-al-center .cat-bar-row { justify-content: center; }
html.cb-al-spread .cat-bar-row { justify-content: space-between; }
html.cb-nodot .cat-bar .cat-dot { display: none; }
html.cb-nocaps .cat-bar a { text-transform: none; letter-spacing: .02em; font-family: var(--font); font-size: calc(.86rem * var(--cb-scale, 1)); }
html.cb-c-neon .cat-bar [class*="cc-"] { --cc: var(--neon); }
html.cb-c-mono .cat-bar [class*="cc-"] { --cc: var(--silver); }
html.cb-tabs .cat-bar-row { gap: 0; padding-block: 0; }
html.cb-tabs .cat-bar a { border-radius: 0; min-height: 42px; border: 0; border-bottom: 2px solid transparent; }
html.cb-tabs .cat-bar a[aria-current] { background: rgb(var(--panel-rgb) / .9); color: var(--cc); border-bottom-color: var(--cc); }
html.cb-tabs .cat-bar a[aria-current] .cat-dot { background: var(--cc); }
html.cb-underline .cat-bar a { border: 0; border-radius: 0; padding-inline: 4px; margin-inline: 8px; }
html.cb-underline .cat-bar a:hover { border: 0; box-shadow: inset 0 -2px 0 var(--line-hi); }
html.cb-underline .cat-bar a[aria-current] { background: none; color: var(--silver-hi); box-shadow: inset 0 -2px 0 var(--cc), 0 6px 14px -8px var(--cc); }
html.cb-underline .cat-bar a[aria-current] .cat-dot { background: var(--cc); box-shadow: 0 0 8px var(--cc); }
html.cb-buttons .cat-bar a { border-color: var(--line-hi); border-radius: var(--radius); background: rgb(var(--panel-rgb) / .7); color: var(--silver); }
html.cb-buttons .cat-bar a:hover { border-color: var(--cc); color: var(--silver-hi); }
html.cb-neon .cat-bar a { color: var(--cc); text-shadow: 0 0 8px color-mix(in srgb, var(--cc) 70%, transparent); border-color: color-mix(in srgb, var(--cc) 35%, transparent); }
html.cb-neon .cat-bar a:hover { border-color: var(--cc); box-shadow: 0 0 14px -2px var(--cc); }
html.cb-neon .cat-bar a[aria-current] { color: var(--bg-2); text-shadow: none; box-shadow: 0 0 22px -2px var(--cc); }
.cb-dd { position: relative; display: inline-flex; flex: 0 0 auto; }
.cb-dd-menu { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 200px; display: none; flex-direction: column; padding: 6px; background: rgb(var(--bg-rgb) / .97); border: 1px solid var(--line-hi); border-radius: var(--radius); }
.cb-dd:hover .cb-dd-menu, .cb-dd:focus-within .cb-dd-menu { display: flex; }
.cb-dd-menu a { border-radius: var(--radius) !important; text-transform: none !important; letter-spacing: .02em !important; }
.cat-bar:has(.cb-dd) .cat-bar-row { overflow: visible; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }

/* ---------- /categories/, /tags/, sidebar: same post look as the home page ---------- */
.cat-card--link { position: relative; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.cat-card-link { color: inherit; text-decoration: none; }
.cat-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* the whole card is the link */
.cat-card--link a:not(.cat-card-link) { position: relative; z-index: 2; }
.cat-card--link:hover, .cat-card--link:focus-within { border-color: var(--cc, var(--neon)); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9), 0 0 0 1px rgb(var(--neon-rgb) / .15); }
.cat-card--link:has(.cat-card-link:focus-visible) { outline: 2px solid var(--neon); outline-offset: 2px; }
.cat-card--link .panel-title a { color: var(--silver-hi); }
.cat-card--link[class*="cc-"] .panel-title a { color: var(--cc); }
.cat-card-desc { margin: 0; color: var(--muted); font-size: .92rem; }
.cat-card-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-card-posts li { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.cat-card-posts img, .cat-card-posts .ccp-dot { grid-row: 1 / 3; width: 48px; height: 36px; object-fit: cover; border-radius: var(--radius); }
.cat-card-posts .ccp-dot { background: linear-gradient(135deg, rgb(var(--neon-rgb) / .25), rgb(var(--neon2-rgb) / .15)); border: 1px solid var(--line); }
.cat-card-posts a { color: var(--silver-hi); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cat-card-posts a:hover { color: var(--neon); }
.cat-card-posts time { font: 500 .66rem/1.2 var(--mono); color: var(--muted); }
.cat-card-more { margin-top: auto; font: 700 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cc, var(--neon)); }
.tag-section { margin-top: 40px; }
.tag-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.tag-section-desc { margin: -6px 0 14px; font-size: .95rem; }
.tag-cloud .chip.tc-1 { font-size: .72rem; opacity: .75; } .tag-cloud .chip.tc-2 { font-size: .8rem; } .tag-cloud .chip.tc-3 { font-size: .92rem; }
.tag-cloud .chip.tc-4 { font-size: 1.05rem; border-color: rgb(var(--neon-rgb) / .4); } .tag-cloud .chip.tc-5 { font-size: 1.22rem; color: var(--neon); border-color: var(--neon); box-shadow: 0 0 14px -4px var(--neon); }
/* the home layout (columns, list, compact, excerpts) also applies to /tags/ and /categories/ cards */
@media (min-width: 900px) {
  html.home-cols-1 :is(.page-tags, .page-categories) .grid { grid-template-columns: 1fr; }
  html.home-cols-2 :is(.page-tags, .page-categories) .grid { grid-template-columns: repeat(2, 1fr); }
  html.home-cols-3 :is(.page-tags, .page-categories) .grid { grid-template-columns: repeat(3, 1fr); }
  html.home-cols-4 :is(.page-tags, .page-categories) .grid { grid-template-columns: repeat(4, 1fr); }
  html.home-list :is(.page-tags, .page-categories) .card { flex-direction: row; }
  html.home-list :is(.page-tags, .page-categories) .card-media { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  html.home-list :is(.page-tags, .page-categories) .grid { grid-template-columns: 1fr; }
}
html.home-compact :is(.page-tags, .page-categories) .card-media { display: none; }
/* sidebar: recent posts as cards / thumbnails */
.grid--widget { grid-template-columns: 1fr !important; gap: 10px; }
@media (min-width: 760px) { .grid.grid--c2 { grid-template-columns: repeat(2, 1fr); } .grid.grid--c3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid.grid--c4 { grid-template-columns: repeat(4, 1fr); } }
.grid--widget .card-body { padding: 12px 14px; gap: 6px; }
.grid--widget .card-title { font-size: .98rem; }
.grid--widget .card-excerpt, .grid--widget .chips { display: none; }
.widget-recent--thumbs li { display: flex; gap: 10px; align-items: center; }
.widget-recent--thumbs img, .widget-recent--thumbs .wr-ph { flex: 0 0 52px; width: 52px; height: 38px; object-fit: cover; border-radius: var(--radius); }
.widget-recent--thumbs .wr-ph { background: linear-gradient(135deg, color-mix(in srgb, var(--cc, var(--neon)) 35%, transparent), transparent); border: 1px solid var(--line); }

/* ======================================================================
   VISUAL EDITOR BLOCKS (lib/blocks.js) — one class per block type, options as bk-* classes / data-*;
   per-block colours and spacing come from /css/theme.css ([data-b="id"] rules). Follows the theme tokens.
   ====================================================================== */
.bk-root { --bk-text: var(--text); --bk-muted: var(--muted); --bk-accent: var(--neon); --bk-accent2: var(--neon-2); --bk-surface: var(--panel); --bk-bg: var(--bg-2); --bk-success: #3ddc97; --bk-warning: #ffc857; --bk-error: #ff5470;
  display: flow-root; }
.bk-root > .bk + .bk, .bk-inner > .bk + .bk, .bk-group > .bk + .bk, .bk-column > .bk + .bk { margin-top: 1.1em; }
.bk-root .prose > :first-child { margin-top: 0; } .bk-root .prose > :last-child { margin-bottom: 0; }
.bk-section { padding: clamp(18px, 4vw, 40px); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .55); border: 1px solid var(--line); }
.bk-group { padding: 0; }
.bk-columns { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--gap, 24px); }
.bk-columns[data-cols="1"] { --n: 1; } .bk-columns[data-cols="3"] { --n: 3; } .bk-columns[data-cols="4"] { --n: 4; }
.bk-columns[data-ratio="2-1"] { grid-template-columns: 2fr 1fr; } .bk-columns[data-ratio="1-2"] { grid-template-columns: 1fr 2fr; }
.bk-columns[data-ratio="3-1"] { grid-template-columns: 3fr 1fr; } .bk-columns[data-ratio="1-3"] { grid-template-columns: 1fr 3fr; }
.bk-columns[data-gap="s"] { gap: 10px; } .bk-columns[data-gap="l"] { gap: 48px; }
@media (max-width: 720px) { .bk-columns:not([data-nostack]) { grid-template-columns: 1fr !important; } }
.bk-grid { display: grid; gap: var(--gap, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.bk-grid > .bk + .bk { margin-top: 0; }
.bk-divider { border: 0; height: 1px; background: var(--line-hi); margin: 1.6em 0; }
.bk-divider[data-style="neon"] { height: 2px; background: linear-gradient(90deg, transparent, var(--neon), var(--neon-2), transparent); box-shadow: 0 0 12px rgb(var(--neon-rgb) / .5); }
.bk-divider[data-style="dots"] { height: 6px; background: radial-gradient(circle, var(--muted) 1.5px, transparent 2px) 0 0 / 14px 6px repeat-x; }
.bk-divider[data-style="glitch"] { height: 3px; background: linear-gradient(90deg, var(--neon) 0 30%, transparent 30% 34%, var(--neon-2) 34% 62%, transparent 62% 65%, var(--silver) 65%); }
.bk-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--neon); }
.bk-quote blockquote { margin: 0; font-size: 1.12em; font-style: italic; }
.bk-quote figcaption { margin-top: 8px; color: var(--muted); font-size: .9em; }
.bk-callout { padding: 14px 18px; border: 1px solid var(--line-hi); border-left: 4px solid var(--tone, var(--neon)); border-radius: var(--radius); background: color-mix(in srgb, var(--tone, var(--neon)) 8%, transparent); }
.bk-callout[data-tone="success"] { --tone: var(--bk-success); } .bk-callout[data-tone="warning"] { --tone: var(--bk-warning); } .bk-callout[data-tone="error"] { --tone: var(--bk-error); }
.bk-callout[data-tone="neon"] { --tone: var(--neon-2); box-shadow: 0 0 22px -8px var(--neon-2); }
.bk-callout-title { margin: 0 0 6px; font-weight: 800; letter-spacing: .04em; }
.bk-code { margin: 0; padding: 14px 16px; overflow: auto; font: .9em/1.5 var(--mono); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.bk-table table { width: 100%; border-collapse: collapse; }
.bk-table th, .bk-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bk-table caption { caption-side: bottom; padding-top: 6px; color: var(--muted); font-size: .85em; text-align: left; }
.bk-toc { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(var(--panel-rgb) / .5); }
.bk-toc-title { margin: 0 0 6px; font-weight: 800; }
.bk-toc ol { margin: 0; padding-left: 1.2em; } .bk-toc .lvl-3 { margin-left: 1em; list-style: circle; }
.bk-image { margin: 0; } .bk-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.bk-image[data-ratio] img { object-fit: cover; } .bk-image[data-fit="contain"] img { object-fit: contain; background: var(--bg-2); }
.bk-image[data-ratio="16-9"] img { aspect-ratio: 16 / 9; } .bk-image[data-ratio="4-3"] img { aspect-ratio: 4 / 3; } .bk-image[data-ratio="1-1"] img { aspect-ratio: 1; } .bk-image[data-ratio="3-4"] img { aspect-ratio: 3 / 4; }
.bk-image figcaption, .bk-gallery figcaption, .bk-youtube figcaption, .bk-video figcaption { margin-top: 6px; color: var(--muted); font-size: .85em; }
.bk-gallery { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-gallery[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-gallery[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-gallery figure { margin: 0; } .bk-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 560px) { .bk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.bk-youtube { margin: 0; }
.video-frame[data-ratio="4-3"] { aspect-ratio: 4 / 3; } .video-frame[data-ratio="9-16"] { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; } .video-frame[data-ratio="1-1"] { aspect-ratio: 1; }
.bk-video { margin: 0; } .bk-video video { display: block; width: 100%; border-radius: var(--radius); background: #000; }
.bk-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bk-buttons > .bk + .bk { margin-top: 0; }
.bk-button { display: inline-flex; }
.bk-btn--primary { color: var(--bg-2); background: var(--neon); border-color: var(--neon); }
.bk-btn--primary:hover { color: var(--bg-2); background: color-mix(in srgb, var(--neon) 82%, #fff); }
.bk-btn--ghost { background: transparent; }
.bk-btn--chrome { color: var(--bg-2); background: var(--chrome); border-color: rgba(255,255,255,.6); }
.bk-btn--neon { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 14px -2px rgb(var(--neon-rgb) / .6), inset 0 0 10px -4px rgb(var(--neon-rgb) / .7); }
.bk-btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--neon); text-decoration: underline; letter-spacing: normal; }
.bk-btn--s { min-height: 34px; padding: 6px 12px; font-size: .75rem; } .bk-btn--l { min-height: 54px; padding: 14px 28px; font-size: 1rem; }
.bk-download[data-layout="card"] { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.bk-dl-icon { font-size: 1.8rem; line-height: 1; filter: drop-shadow(0 0 8px rgb(var(--neon-rgb) / .6)); }
.bk-dl-title { margin: 0; font-weight: 800; } .bk-dl-desc { margin: 2px 0 0; } .bk-dl-meta { margin: 4px 0 0; color: var(--muted); font-size: .85em; }
.bk-dl-sum { margin: 4px 0 0; font-size: .75em; color: var(--muted); word-break: break-all; } .bk-dl-sum code { font-family: var(--mono); }
@media (max-width: 560px) { .bk-download[data-layout="card"] { grid-template-columns: auto 1fr; } .bk-download .bk-dl-btn { grid-column: 1 / -1; justify-self: start; } }
.bk-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-cards[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-cards[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .bk-cards { grid-template-columns: 1fr !important; } }
.bk-card { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); transition: border-color .2s, box-shadow .2s, background .2s; }
.bk-card--link:hover, .bk-card--link:focus-within { border-color: var(--neon); box-shadow: 0 0 18px -6px rgb(var(--neon-rgb) / .7); }
.bk-card--link a::after { content: ""; position: absolute; inset: 0; }
.bk-card--link p a { position: relative; z-index: 1; }
.res-item { position: relative; }
.res-item .link-title::after { content: ""; position: absolute; inset: 0; }
.res-item .link-desc a { position: relative; z-index: 1; }
.bk-card-title { margin: 0 0 6px; font-size: 1.05rem; } .bk-card p { margin: 0; color: var(--muted); }
.bk-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk-social a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-hi); border-radius: 999px; text-decoration: none; }
.bk-social a:hover { border-color: var(--neon); color: var(--neon); }
.bk-postlist { margin: 0; padding-left: 1.1em; } .bk-postlist time { color: var(--muted); font-size: .85em; }
.bk-tabs .bk-tab + .bk-tab { margin-top: 1em; }
.bk-tabs[data-tabs-on] .bk-tab[hidden] { display: none; }
.bk-tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.bk-tabs-bar button { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.bk-tabs-bar button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--neon); }
.bk-tabs[data-tabs-on] .bk-tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* shared style options */
.bk-al-left { text-align: left; } .bk-al-center { text-align: center; } .bk-al-right { text-align: right; }
.bk-buttons.bk-al-center { justify-content: center; } .bk-buttons.bk-al-right { justify-content: flex-end; }
.bk-w-narrow { max-width: 640px; margin-inline: auto; } .bk-w-wide { max-width: none; } .bk-w-full { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); border-radius: 0; }
.bk-fs-s { font-size: .88em; } .bk-fs-l { font-size: 1.18em; } .bk-fs-xl { font-size: 1.45em; } .bk-fs-xxl { font-size: clamp(1.7em, 4vw, 2.4em); line-height: 1.15; }
.bk-ff-mono { font-family: var(--mono); } .bk-ff-display { font-family: var(--font); letter-spacing: .04em; }
.bk-tt-upper { text-transform: uppercase; letter-spacing: .06em; } .bk-tt-none { text-transform: none; }
.bk-bd-line { border: 1px solid var(--line-hi); } .bk-bd-dashed { border: 1px dashed var(--line-hi); } .bk-bd-neon { border: 1px solid var(--neon); box-shadow: 0 0 14px -4px rgb(var(--neon-rgb) / .7); }
.bk-sh-s { box-shadow: 0 4px 14px -6px rgba(0,0,0,.6); } .bk-sh-l { box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); } .bk-sh-glow { box-shadow: 0 0 28px -6px rgb(var(--neon-rgb) / .8); }
@media (min-width: 1025px) { .bk-hide-d { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .bk-hide-t { display: none !important; } }
@media (max-width: 640px) { .bk-hide-m { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .bk-anim-fade { animation: bk-fade .6s ease both; } .bk-anim-rise { animation: bk-rise .6s cubic-bezier(.2,.7,.2,1) both; } .bk-anim-glitch { animation: bk-glitch .5s steps(2) both; }
}
@keyframes bk-fade { from { opacity: 0; } } @keyframes bk-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes bk-glitch { 0% { clip-path: inset(40% 0 30% 0); transform: translateX(-6px); } 40% { clip-path: inset(10% 0 60% 0); transform: translateX(5px); } 100% { clip-path: none; transform: none; } }
/* CMS preview only: hidden blocks stay visible but faded */
.bk-is-hidden { opacity: .35; outline: 1px dashed var(--muted); }
@media print {
  .bk-section, .bk-callout, .bk-card, .bk-download, .bk-toc { border: 1px solid #bbb !important; border-radius: 0 !important; }
  .bk-columns, .bk-cards, .bk-gallery, .bk-grid { display: block !important; } .bk-columns > * + *, .bk-cards > * + * { margin-top: 4mm; }
  .bk-w-full { width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; }
  .bk-anim-fade, .bk-anim-rise, .bk-anim-glitch { animation: none !important; } .bk-tabs-bar { display: none !important; } .bk-tab[hidden] { display: block !important; }
  .bk-hide-d, .bk-hide-t, .bk-hide-m { display: block !important; } .bk-is-hidden { display: none !important; }
  .bk-dl-btn::after, .bk-card a::after { content: " <" attr(href) ">"; font-size: 8.5pt; position: static; }
  .bk-button::after { content: " <" attr(href) ">"; font-size: 8.5pt; }
  .bk-tabs[data-tabs-on] .bk-tab-name { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; font: 700 11pt Georgia, serif !important; margin: 3mm 0 1mm !important; }
}



/* page templates (Pages → Predložak): wide = no sidebar, full width text; landing = blocks only (title kept for readers/SEO, visually hidden) */
.page-tpl-wide .post.page, .page-tpl-landing .post.page { max-width: none; }
.page-tpl-wide .post.page .prose, .page-tpl-wide .post.page .bk-root { max-width: none; }
.page-tpl-landing main { padding-top: 0; }

.keypoints-text { margin: 0; }

/* developer blocks: code with highlighting, terminal, reference cards (visual editor) */
.bk-code, .bk-terminal { margin: 0; border: 1px solid var(--line-hi); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.bk-code-head { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font: 600 .74rem/1.2 var(--mono); color: var(--muted); }
.bk-code-file { color: var(--silver-hi); word-break: break-all; } .bk-code-lang { margin-left: auto; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.bk-code-head .bk-copy:first-child, .bk-code-file + .bk-copy { margin-left: auto; }
.bk-copy { padding: 4px 10px; border: 1px solid var(--line-hi); border-radius: var(--radius); background: transparent; color: var(--silver); font: 600 .72rem/1 var(--mono); cursor: pointer; }
.bk-copy:hover, .bk-copy:focus-visible { color: var(--neon); border-color: var(--neon); } .bk-copy.is-done { color: var(--bk-success); border-color: var(--bk-success); }
.bk-code-pre, .bk-term, .bk-out { margin: 0; padding: 12px 14px; overflow: auto; font: .88rem/1.55 var(--mono); tab-size: 4; }
.bk-code-pre code, .bk-term code { display: block; }
.bk-code-pre .cl { display: inline-block; min-width: 100%; }
.bk-code-pre.with-lines { counter-reset: ln; } .bk-code-pre.with-lines .cl::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 2.6em; margin-right: 12px; padding-right: 8px; border-right: 1px solid var(--line); color: var(--muted); text-align: right; user-select: none; }
.cl-mark { background: rgb(var(--neon-rgb) / .12); box-shadow: inset 3px 0 0 var(--neon); }
.bk-out-label { margin: 0; padding: 4px 14px; border-top: 1px solid var(--line); font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bk-out { color: var(--silver); background: rgb(var(--panel-rgb) / .5); }
.bk-code figcaption { padding: 8px 14px; border-top: 1px solid var(--line); font-size: .92rem; }
.bk-term .tl { display: flex; gap: 0; align-items: baseline; } .bk-term .tp { color: var(--neon); user-select: none; white-space: pre; } .bk-term .tc { flex: 1; white-space: pre-wrap; word-break: break-word; }
.bk-term .tl-c { color: var(--muted); font-style: italic; } .bk-copy-line { margin-left: 8px; padding: 2px 6px; opacity: .55; } .bk-term .tl:hover .bk-copy-line, .bk-copy-line:focus-visible { opacity: 1; }
.bk-term-warn { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bk-error) 14%, transparent); color: var(--text); font-weight: 600; }
.hl-k { color: var(--neon-2); } .hl-s { color: var(--bk-success); } .hl-c { color: var(--muted); font-style: italic; } .hl-n { color: var(--bk-warning); } .hl-f { color: var(--neon); } .hl-v, .hl-a { color: var(--neon); }
.bk-callout[data-tone="note"] { --tone: var(--silver); } .bk-callout[data-tone="tip"] { --tone: #7c9cff; } .bk-callout[data-tone="danger"] { --tone: var(--bk-error); border-width: 2px; }
.bk-callout[data-tone="danger"] .bk-callout-title::before { content: "⚠ "; } .bk-callout[data-tone="tip"] .bk-callout-title::before { content: "✔ "; }
.bk-linkcard-a { position: relative; display: grid; gap: 4px; padding: 14px 44px 14px 16px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.bk-linkcard-a:hover, .bk-linkcard-a:focus-visible { border-color: var(--neon); box-shadow: 0 0 16px -6px rgb(var(--neon-rgb) / .8); }
.bk-lc-k { font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--neon); } .bk-lc-t { font-weight: 800; font-size: 1.05rem; } .bk-lc-x { color: var(--muted); font-size: .92rem; }
.bk-lc-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--neon); font-size: 1.2rem; }
.bk-extref { padding: 14px 18px; border: 1px solid var(--line-hi); border-left: 3px solid var(--silver); border-radius: var(--radius); background: rgb(var(--panel-rgb) / .5); }
.bk-ext-host { margin: 0; font: 600 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bk-ext-title { margin: 4px 0 6px; font-weight: 800; font-size: 1.05rem; } .bk-ext-meta { margin: 4px 0; color: var(--muted); font-size: .85rem; }
.bk-extref blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid var(--line-hi); font-style: italic; } .bk-extref blockquote footer { font-style: normal; color: var(--muted); font-size: .85rem; }
.bk-ext-comment { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-hi); }
.bk-pubinfo { margin: 0; color: var(--muted); font: .82rem/1.5 var(--mono); } .bk-pub-note { color: var(--muted); font-size: .82rem; }
.bk-dl-sec { margin: 6px 0 0; color: var(--bk-warning); font-size: .85rem; } .bk-dl-log summary, .bk-yt-ch summary, .bk-yt-sum summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.bk-yt-ch ol { margin: 6px 0; padding-left: 1.2em; } .bk-yt-ch time { font-family: var(--mono); color: var(--neon); }
.bk-yt-link { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--line-hi); border-radius: var(--radius); text-decoration: none; }
@media print { .bk-copy, .bk-copy-line { display: none !important; } .bk-code-pre, .bk-term { white-space: pre-wrap !important; } .hl-k, .hl-s, .hl-n, .hl-f, .hl-v, .hl-a { color: #111 !important; } .hl-c { color: #555 !important; } .cl-mark { background: #eee !important; } .bk-yt-ch, .bk-yt-sum, .bk-dl-log { display: block; } .bk-yt-ch > *, .bk-yt-sum > *, .bk-dl-log > * { display: block !important; } }

/* AI prompt blocks (lib/prompts.js) */
.pr-box { position: relative; padding: 16px 18px; border: 1px solid var(--line-hi); border-left: 3px solid var(--neon-2); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.pr-k { margin: 0; font: 600 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--neon-2); }
.pr-title { margin: 4px 0; font-size: 1.15rem; } .pr-title a { color: inherit; text-decoration: none; } .pr-sum { margin: 0 0 8px; color: var(--muted); }
.pr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pr-sec + .pr-sec { margin-top: 12px; } .pr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pr-sec-head h4 { margin: 0 0 6px; font-size: .95rem; }
.pr-text { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); white-space: pre-wrap; word-break: break-word; font: .9rem/1.6 var(--font); }
.pr-text.pr-code, .pr-filled { font-family: var(--mono); font-size: .85rem; }
.pr-box.is-collapsed .pr-body { max-height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.pr-more { margin-top: 8px; } .pr-vars, .pr-more-info { margin-top: 12px; } .pr-vars summary, .pr-more-info summary { cursor: pointer; color: var(--neon); font-weight: 600; }
.pr-var-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; margin: 10px 0; }
.pr-var-form label { display: grid; gap: 4px; font: .82rem var(--mono); } .pr-var-form input { padding: 8px 10px; border: 1px solid var(--line-hi); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: inherit; }
.pr-lbl { margin: 10px 0 4px; font-weight: 700; font-size: .85rem; } .pr-limit, .pr-meta { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }
@media print { .pr-box.is-collapsed .pr-body { max-height: none; -webkit-mask-image: none; mask-image: none; } .pr-actions, .pr-vars, .pr-more { display: none !important; } }

/* per-post width (vizualni editor → Prikaz na stranici) */
.post-w-narrow { --read-w: 620px; } .post-w-wide { --read-w: 1000px; } .post-w-full { --read-w: 100%; }

/* homepage hero carousels (CMS → Objave → Hero karuseli): same frame as the hero, slides scroll horizontally */
.hero.hero-slider { display: block; padding: 0; }
.hero-slider + .hero-slider { margin-top: calc(var(--gap, 20px) + 6px); }
.slider-label { position: absolute; z-index: 3; top: 14px; left: clamp(24px, 5vw, 48px); margin: 0; font: 700 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.slider-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; min-width: 0; position: relative; }
@media (min-width: 860px) { .hero-slide { grid-template-columns: 1.3fr 1fr; } }
.hero-slider .hero-inner { padding-bottom: 64px; }
.hero-slider .slider-label ~ .slider-track .hero-inner { padding-top: 44px; }
.hero-slide .hero-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.slider-nav { position: absolute; z-index: 3; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; }
.slider-nav[hidden] { display: none; }
.slider-btn { width: 40px; height: 40px; border: 1px solid var(--line-hi); border-radius: 50%; background: rgb(var(--bg-rgb) / .7); color: var(--silver-hi); font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px); }
.slider-btn:hover, .slider-btn:focus-visible { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 14px -4px rgb(var(--neon-rgb) / .8); }
.slider-dots { display: flex; gap: 6px; } .slider-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-hi); cursor: pointer; }
.slider-dot[aria-current="true"] { width: 22px; border-radius: 99px; background: var(--neon); }
.slider-count { font: .72rem/1 var(--mono); color: var(--muted); min-width: 3.2em; text-align: center; }
@media (max-width: 600px) { .slider-dots { display: none; } .hero-slider .hero-inner { padding-bottom: 70px; } }
html.hero-full .hero-slide { display: block; min-height: 420px; } html.hero-minimal .hero-slide { display: block; text-align: center; }
@media (min-width: 860px) { html.hero-card .hero-slide { grid-template-columns: 1fr 1.2fr; } html.hero-card .hero-slide .hero-img { order: -1; max-height: 300px; } }
/* glitch when a slide changes: RGB split + sliced jitter on the whole slide, short */
.hero-slide.is-glitch .hero-inner, .hero-slide.is-glitch .hero-img, .hero-slide.is-glitch .hero-grid { animation: sl-glitch .6s steps(2, end) both; }
/* glitch on change: two thin torn neon slices + an RGB ghost of the title, then a quick settle */
.hero-slide.is-glitch::before { content: ""; position: absolute; left: 0; right: 0; height: 10%; top: 30%; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(255 0 90 / .3), rgb(var(--neon-rgb) / .38) 38%, transparent 39%, transparent 61%, rgb(0 220 255 / .34) 62%, rgb(255 0 90 / .2)); box-shadow: 0 34px 0 -2px rgb(var(--neon-rgb) / .18); mix-blend-mode: screen; animation: sl-glitch-tear .6s steps(6, end) both; }
.hero-slide.is-glitch .hero-title a { animation: sl-glitch-skew .6s steps(4, end) both; display: inline-block; }
@keyframes sl-glitch-tear { 0% { top: 8%; height: 5%; transform: translateX(-6%); opacity: .9; } 18% { top: 64%; height: 9%; transform: translateX(5%); } 36% { top: 26%; height: 3%; transform: translateX(-2%); } 54% { top: 78%; height: 6%; transform: translateX(8%); } 72% { top: 42%; height: 2%; transform: translateX(-9%); opacity: .7; } 100% { opacity: 0; transform: none; } }
@keyframes sl-glitch-skew { 0% { transform: skewX(-8deg) translateX(-6px); filter: blur(.4px); } 30% { transform: skewX(6deg) translateX(4px); } 60% { transform: skewX(-2deg) translateX(-2px); filter: none; } 100% { transform: none; } }
/* arrows: CRT switch-off of the old slide, switch-on of the new one (with the glitch) */
.hero-slide.is-crt-off > * { animation: sl-crt-off .3s cubic-bezier(.7, 0, .9, .4) both; transform-origin: 50% 50%; }
.hero-slide.is-crt-off::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / .9) 0, rgb(var(--neon-rgb) / .55) 3%, transparent 40%); animation: sl-crt-flash .3s ease-in both; }
.hero-slide.is-crt-on > * { animation: sl-crt-on .42s cubic-bezier(.2, .7, .3, 1) both; transform-origin: 50% 50%; }
@keyframes sl-crt-off { 0% { transform: none; filter: none; opacity: 1; } 45% { transform: scale(1, .012); filter: brightness(3) saturate(0); opacity: 1; } 75% { transform: scale(.25, .006); filter: brightness(4); opacity: .9; } 100% { transform: scale(0, 0); opacity: 0; } }
@keyframes sl-crt-flash { 0%, 40% { opacity: 0; transform: scaleY(.02); } 60% { opacity: 1; transform: scaleY(.02); } 100% { opacity: 0; transform: scale(.05, .01); } }
@keyframes sl-crt-on { 0% { transform: scale(.4, .01); filter: brightness(3); opacity: .6; } 35% { transform: scale(1, .02); filter: brightness(2.2); opacity: 1; } 70% { transform: scale(1, 1.03); filter: brightness(1.2) hue-rotate(20deg); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .hero-slide.is-crt-off > *, .hero-slide.is-crt-on > *, .hero-slide.is-crt-off::after { animation: none !important; } }
/* every rectangle the same height (CMS → HOMEPAGE → CYBER-GRID → Iste veličine) */
.hero-slider--equal .hero-slide { height: clamp(300px, 30vw, 360px); overflow: hidden; }
.hero-slider--equal .hero-inner { align-self: center; }
.hero-slider--equal .hero-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-slider--equal .hero-text { -webkit-line-clamp: 2; }
.hero-slider--equal .hero-img { height: 100%; object-fit: cover; }
@media (max-width: 640px) { .hero-slider--equal .hero-slide { height: 300px; } }
.hero-slide.is-glitch .hero-title { animation: sl-glitch-rgb .5s steps(3, end) both; }
.hero-slide.is-glitch::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .14) 0 2px, transparent 2px 7px); mix-blend-mode: screen; animation: sl-glitch-scan .5s steps(4, end) both; }
@keyframes sl-glitch { 0% { clip-path: inset(12% 0 58% 0); transform: translateX(-14px); filter: hue-rotate(40deg) saturate(1.6); } 20% { clip-path: inset(62% 0 8% 0); transform: translateX(10px); } 40% { clip-path: inset(30% 0 36% 0); transform: translateX(-6px); filter: hue-rotate(-30deg); } 60% { clip-path: inset(4% 0 78% 0); transform: translateX(5px); } 80% { clip-path: inset(48% 0 22% 0); transform: translateX(-2px); filter: none; } 100% { clip-path: inset(0); transform: none; } }
@keyframes sl-glitch-rgb { 0%, 70% { text-shadow: -4px 0 rgb(255 0 80 / .85), 4px 0 rgb(0 220 255 / .85); } 100% { text-shadow: none; } }
@keyframes sl-glitch-scan { 0% { opacity: 1; transform: translateY(-8px); } 50% { opacity: .7; transform: translateY(6px); } 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }
/* CYBER-GRID: label before the slide text (e.g. EXCERPT —) */
.hero-text-k { font: 700 .72em/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
.hero-text-k::after { content: " —"; color: var(--muted); }
/* CYBER-GRID: small random glitches (row option microGlitch) */
.hero-slide.is-mglitch .hero-inner { animation: sl-mglitch .32s steps(3, end) both; }
.hero-slide.is-mglitch::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 5%; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .5) 30%, transparent 31%, transparent 70%, rgb(255 0 90 / .4) 71%, transparent); mix-blend-mode: screen; animation: sl-glitch-tear .32s steps(3, end) both; }
.hero-slide.is-mglitch .hero-title { animation: sl-glitch-rgb .3s steps(2, end) both; }
@keyframes sl-mglitch { 0% { transform: translate(0); clip-path: inset(0); } 33% { transform: translate(-3px, 1px); clip-path: inset(18% 0 52% 0); } 66% { transform: translate(2px, -1px); clip-path: inset(60% 0 8% 0); } 100% { transform: translate(0); clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .hero-slide.is-glitch *, .hero-slide.is-glitch::after, .hero-slide.is-glitch::before, .hero-slide.is-mglitch *, .hero-slide.is-mglitch::before { animation: none !important; display: none; } }
@media print { .slider-nav { display: none !important; } .slider-track { display: block !important; overflow: visible !important; } .hero-slide { display: block !important; margin-bottom: 6mm; } }

/* FACE — the author page (CMS → FACE) */
.face-w-wide { --read-w: 1000px; } .face-w-wide main.wrap { max-width: min(1400px, 96vw); } .face-w-full main.wrap { max-width: none; }
.face-head.face-center { flex-direction: column; text-align: center; align-items: center; } .face-head.face-center .profile-facts { justify-content: center; }
.face-hs-panel { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.face-hs-neon { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--neon); border-radius: var(--radius-lg); box-shadow: 0 0 26px -8px rgb(var(--neon-rgb) / .8), inset 0 0 22px -12px rgb(var(--neon-rgb) / .7); }
.face-head--compact .page-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.face-head .avatar--md { width: 64px; height: 64px; } .face-head .avatar--xl { width: 168px; height: 168px; font-size: 3rem; }
.face-posts--list .grid { grid-template-columns: 1fr !important; } .face-posts--list .card { flex-direction: row; } .face-posts--list .card-media { flex: 0 0 30%; aspect-ratio: auto; }
@media (min-width: 900px) { .face-cols-1 .grid { grid-template-columns: 1fr; } .face-cols-2 .grid { grid-template-columns: repeat(2, 1fr); } .face-cols-3 .grid { grid-template-columns: repeat(3, 1fr); } .face-cols-4 .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .face-posts--list .card { flex-direction: column; } }
.face-setup, .face-log, .face-ideas, .page-author .author-page, .face-posts { margin-top: clamp(28px, 4vw, 44px); }
/* ABOUT ME: own sections (CMS → ABOUT ME) */
.face-custom { margin-top: clamp(28px, 4vw, 44px); }
.face-custom-img { margin: 0 0 14px; } .face-custom-img img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* frame around any part of the profile (ABOUT ME → Okvir) */
.face-frame { margin-top: clamp(28px, 4vw, 44px); padding: clamp(18px, 3vw, 30px); border-radius: var(--radius-lg); }
.face-frame > :first-child { margin-top: 0; }
.face-frame--panel { border: 1px solid var(--line); background: rgb(var(--panel-rgb) / .6); }
.face-frame--neon { border: 1px solid var(--neon); box-shadow: 0 0 26px -8px rgb(var(--neon-rgb) / .8), inset 0 0 22px -12px rgb(var(--neon-rgb) / .7); }
.face-custom--panel { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.face-custom--neon { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--neon); border-radius: var(--radius-lg); box-shadow: 0 0 26px -8px rgb(var(--neon-rgb) / .8), inset 0 0 22px -12px rgb(var(--neon-rgb) / .7); }
.face-idea-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.face-idea { position: relative; padding: 16px 18px; border: 1px solid var(--line-hi); border-left: 3px solid var(--neon-2); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.face-idea--doing { border-left-color: var(--neon); } .face-idea--done { border-left-color: var(--bk-success, #3ddc97); } .face-idea--paused { border-left-color: var(--muted); opacity: .85; }
.face-idea img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; }
.face-idea h3 { margin: 4px 0 6px; font-size: 1.05rem; } .face-idea h3 a { color: inherit; text-decoration: none; } .face-idea h3 a:hover { color: var(--neon); } .face-idea-tags { margin: 8px 0 0; position: relative; z-index: 6; pointer-events: none; } .face-idea-tags .chip { pointer-events: auto; } /* gaps of the tag row fall through to the whole-card link, the chips stay clickable */ /* tag links above the whole-card link (.card-link::after, z-index 5) */
.face-machines { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.face-machine { padding: 16px 18px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .6); }
.face-machine img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; }
.face-kind { margin: 0; font: 700 .68rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--neon); } .face-machine h3 { margin: 4px 0 6px; } .face-mdesc { margin: 0 0 8px; color: var(--muted); }
.face-specs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font: .85rem/1.45 var(--mono); } .face-specs dt { color: var(--muted); } .face-specs dd { margin: 0; color: var(--silver-hi); } .face-specs .face-spec-free { grid-column: 1 / -1; color: var(--silver); }
.face-spec-table td { vertical-align: top; }
/* IDEA page: progress (CMS → IDEA → Napredak %) */
.idea-progress-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; font: 700 .8rem/1 var(--mono); color: var(--neon); }
.idea-progress { flex: 1 1 auto; max-width: 420px; height: 8px; appearance: none; -webkit-appearance: none; border: 1px solid var(--line-hi); border-radius: 99px; background: var(--panel); overflow: hidden; }
.idea-progress::-webkit-progress-bar { background: var(--panel); }
.idea-progress::-webkit-progress-value { background: var(--neon); }
.idea-progress::-moz-progress-bar { background: var(--neon); }
.face-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line-hi); }
.face-timeline > li { position: relative; padding: 0 0 20px 14px; } .face-timeline > li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.face-timeline time { font: .78rem/1 var(--mono); color: var(--muted); } .face-timeline h3 { margin: 4px 0; font-size: 1.05rem; }
.idea-toc { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.idea-toc ol { margin: 0; padding-left: 20px; } .idea-toc li { margin: 4px 0; } .idea-toc time { font: .75rem/1 var(--mono); color: var(--muted); margin-right: 6px; }
/* IDEA log: every entry is its own framed block (number, date, kind), newest first */
.idea-logs { margin-top: 28px; }
.idea-log { scroll-margin-top: 90px; margin: 0 0 26px; padding: 18px 20px 6px; border: 1px solid var(--line-hi); border-left: 3px solid var(--neon-2); border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / .55); }
.idea-log--how { border-left-color: var(--neon); } .idea-log--code { border-left-color: var(--bk-success, #3ddc97); } .idea-log--demo { border-left-color: var(--neon-3, var(--neon)); } .idea-log--part { border-left-color: var(--silver-hi, var(--muted)); }
.idea-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); font: 700 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.idea-log-n { color: var(--neon); } .idea-log-kind { padding: 3px 8px; border: 1px solid var(--line-hi); border-radius: 99px; }
/* dev-log stamp: v0.1.0 · 2026-11-06 14:32 (version, ISO date + time, AI badge) */
.idea-log-v { color: var(--neon-2, var(--neon)); text-transform: none; letter-spacing: .02em; } .idea-log-ts { text-transform: none; letter-spacing: .02em; color: var(--text); }
.idea-log-ai { padding: 3px 8px; border: 1px dashed var(--neon-3, var(--neon)); border-radius: 99px; color: var(--neon-3, var(--neon)); }
.idea-toc .idea-log-v, .idea-toc .idea-log-ts { font: .8rem/1.2 var(--mono); }
.idea-last { margin: -4px 0 12px; font: .8rem/1.4 var(--mono); color: var(--muted); }
.idea-log-a { margin-left: auto; color: var(--muted); text-decoration: none; } .idea-log-a:hover { color: var(--neon); }
.idea-log > h3 { margin: 12px 0 10px; font-size: 1.45rem; }
.idea-log .prose h2, .idea-log .prose h3, .idea-log-body h2, .idea-log-body h3 { font-size: 1.15rem; margin-top: 1.2em; } .idea-log .prose h4, .idea-log-body h4 { font-size: 1rem; } .idea-log .post-figure { margin: 10px 0 14px; }
.idea-log-body > .bk { margin: 0 0 16px; } .idea-log-body img { max-width: 100%; height: auto; } .idea-log-body video { width: 100%; border-radius: var(--radius); }
.idea-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }

/* ======================================================================
   LIGHT THEMES (html.theme-light: Appearance → Galerija tema → Minimal Light / Editorial, or an own light background).
   Only swaps details that are dark by design; the default dark look never gets this class.
   ====================================================================== */
html.theme-light:not(.mode-alt), html.alt-light.mode-alt { color-scheme: light;
  /* "chrome" becomes dark graphite: the logo, chrome buttons and titles stay readable on a light background */
  --chrome: linear-gradient(135deg, #2a3038 0%, #6b7482 22%, #11151a 45%, #4a5361 70%, #1d2127 100%); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .post-title { background: linear-gradient(180deg, var(--silver-hi) 0%, var(--silver) 100%); -webkit-background-clip: text; background-clip: text; }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-2 { --cc: #4a5563; } :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-3 { --cc: #a86400; } :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-4 { --cc: #3550c8; }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-5 { --cc: #11804f; } :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-6 { --cc: #c2410c; } :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cc-7 { --cc: #6d3fc0; }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cat-bar { background: rgb(var(--panel-rgb) / .92); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cat-bar a { color: var(--silver); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cat-bar a:hover { color: var(--silver-hi); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cat-dot { box-shadow: none; }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .btn:hover { color: var(--silver-hi); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .consent { background: rgb(var(--panel-rgb) / .98); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .consent-title { color: var(--silver-hi); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .video-frame, :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-code, :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) pre { background: var(--bg-2); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-section, :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-card, :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-download[data-layout="card"] { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-btn--primary, :is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .bk-btn--primary:hover { color: #fff; }
:is(html.theme-light:not(.mode-alt), html.alt-light.mode-alt) .cat-bar a[aria-current] { color: #fff; }

/* light / dark switch button (Appearance → Tema i stil → Svijetla / tamna) */
.mode-toggle { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 8px; padding: 0; border: 1px solid var(--line-hi); border-radius: 999px; background: rgb(var(--panel-rgb) / .6); color: var(--silver-hi); font-size: 1.05rem; cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s; }
html.has-mode .mode-toggle { display: inline-flex; }
.mode-toggle:hover, .mode-toggle:focus-visible { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 14px -4px rgb(var(--neon-rgb) / .8); }
/* the icon shows where the click goes: ☀ while dark, ☾ while light */
.mode-toggle .mt-moon, html.mode-alt.alt-light .mode-toggle .mt-sun, html.alt-dark:not(.mode-alt) .mode-toggle .mt-sun { display: none; }
html.mode-alt.alt-light .mode-toggle .mt-moon, html.alt-dark:not(.mode-alt) .mode-toggle .mt-moon { display: inline; }
@media (max-width: 760px) { .header-row .brand-box { order: 0; } .header-row .mode-toggle { order: 1; margin-left: auto; } .header-row .nav-toggle { order: 2; } .header-row .main-nav { order: 3; } }
@media print { .mode-toggle { display: none !important; } }
/* ======================================================================
   PRINT / PDF — always a clean text output of the article:
   no header, menus, bars, sidebar, buttons, related posts or effects; black on white,
   serif text, link addresses written out, FAQ answers opened (app.js), page breaks kept sane.
   ====================================================================== */
.print-only { display: none; }
@media print {
  @page { margin: 18mm 16mm 20mm; }
  html, body { background: #fff !important; color: #111 !important; height: auto !important; overflow: visible !important; }
  body { display: block; font: 11.5pt/1.55 Georgia, "Times New Roman", serif !important; }
  *, *::before, *::after { color: #111 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: none !important; transition: none !important; -webkit-text-fill-color: currentColor !important; }
  body::before, body::after, .site-header, .cat-bar, .rec-bar, .site-footer, .site-sidebar, .consent, .to-top, .skip, .crumbs, .preview-banner,
  .post-tools, .vault-btns, .below, .related, .pager, .backlinks, .tag-panel, .series-nav, .toolbar, .source-box, .author-more,
  .video-frame iframe, [data-yt-load], .video-note, .prompt-head button, [data-copy-prompt], .random-row, .draft-badge, .glitch::before, .glitch::after,
  main > .panel, .post-tags, .card-media, .keypoints-title + .ico { display: none !important; }
  main, .wrap, .with-sidebar, .main-col, .post { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  .print-only { display: block !important; }
  .print-head { margin: 0 0 8mm; padding-bottom: 2mm; border-bottom: 1px solid #999; font: 9pt/1.3 Arial, sans-serif !important; color: #555 !important; }
  .print-foot { margin-top: 10mm; padding-top: 2mm; border-top: 1px solid #999; font: 9pt/1.3 Arial, sans-serif !important; color: #555 !important; word-break: break-all; }
  .post-kicker { font: 9pt Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
  .post-kicker a { text-decoration: none; }
  .post-title { font: 700 22pt/1.2 Georgia, serif !important; margin: 2mm 0 !important; }
  .post-subtitle, .post-lede { font-size: 12.5pt !important; font-style: italic; }
  .post-meta { display: flex !important; flex-wrap: wrap; gap: 0 6mm; font: 9pt Arial, sans-serif !important; color: #444 !important; margin: 3mm 0 6mm !important; }
  .post-meta div, .post-meta dd { margin: 0; }
  h1, h2, h3, h4 { font-family: Georgia, serif !important; break-after: avoid; page-break-after: avoid; }
  h2 { font-size: 15pt !important; margin-top: 7mm !important; }
  h3 { font-size: 13pt !important; }
  p, li, blockquote { orphans: 3; widows: 3; }
  img, figure, pre, blockquote, table, .keypoints, .source-card, .faq-item, .prompt-box { break-inside: avoid; page-break-inside: avoid; }
  img { max-width: 100% !important; max-height: 110mm; width: auto !important; height: auto !important; margin: 3mm auto; }
  .post-figure img { max-height: 90mm; }
  .panel, .keypoints, .source-card, .toc, .prompt-box, .faq, .video-box, .downloads, .author-box, .series { border: 1px solid #bbb !important; border-radius: 0 !important; padding: 3mm 4mm !important; margin: 4mm 0 !important; }
  .toc { break-inside: avoid; }
  pre, code, .prompt-text { font: 9.5pt/1.45 "Courier New", monospace !important; white-space: pre-wrap !important; word-break: break-word; overflow: visible !important; max-height: none !important; }
  blockquote { border-left: 3px solid #999 !important; padding-left: 4mm !important; font-style: italic; }
  a { text-decoration: underline !important; }
  .prose a[href^="http"]::after, .source-card a[href^="http"]::after, .link-list a[href^="http"]::after, .video-link::after, .author-url a::after { content: " <" attr(href) ">"; font: 8.5pt Arial, sans-serif; word-break: break-all; }
  .video-frame { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; }
  .video-consent { position: static !important; display: block !important; padding: 0 !important; }
  .video-box .video-link { display: inline !important; }
  details > summary { list-style: none; font-weight: 700; }
  details > summary::-webkit-details-marker { display: none; }
  .faq-item > * { display: block !important; }
  .chip { border: 0 !important; padding: 0 !important; }
  .btn { display: inline !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; font: inherit !important; letter-spacing: normal !important; text-transform: none !important; }
  .btn[data-yt-load], .btn[data-print], .btn[data-shuffle], .btn[data-copy-prompt] { display: none !important; }
  .panel-title, .keypoints-title, .toc-title { font: 700 10pt Arial, sans-serif !important; letter-spacing: .08em; }
  .author-box { display: block !important; }
  .author-ico { display: none !important; }
}
.btn[hidden], .net-tools[hidden] { display: none !important; }

/* ---------- profiles & pages ---------- */
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line-hi); }
.avatar--lg { width: 112px; height: 112px; box-shadow: 0 0 0 3px rgb(var(--neon-rgb) / .25), 0 0 28px -6px rgb(var(--neon-rgb) / .6); }
.avatar--txt { display: inline-grid; place-items: center; font: 800 1.2rem/1 var(--mono); color: var(--neon); background: var(--panel); }
.avatar--lg.avatar--txt { font-size: 2rem; }
.author-head { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.author-head > div { flex: 1 1 320px; min-width: 0; }
.profile-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; }
.profile-facts li { display: flex; gap: 8px; align-items: baseline; }
.pf-k { font: 700 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.author-page { margin: 32px auto 0; }
.author-card { display: flex; gap: 14px; align-items: flex-start; }
.author-ava { width: 52px; height: 52px; }
.footer-contact a { color: inherit; }
.page .post-head { margin-bottom: 20px; }

/* ---------- previous / next article with icons ---------- */
.pager--rich { flex-direction: row; align-items: center; gap: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pager--rich:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .2), 0 0 22px -6px rgb(var(--neon-rgb) / .5); }
.pager-next.pager--rich { justify-content: flex-end; text-align: right; }
.pager-ico { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-hi); color: var(--neon); transition: transform .2s, background .2s; }
.pager-ico .ico { width: 22px; height: 22px; }
.pager-prev.pager--rich:hover .pager-ico { transform: translateX(-3px); background: rgb(var(--neon-rgb) / .1); }
.pager-next.pager--rich:hover .pager-ico { transform: translateX(3px); background: rgb(var(--neon-rgb) / .1); }
.pager-next.pager--rich .pager-ico { order: 3; }
.pager-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pager-next.pager--rich .pager-body { align-items: flex-end; }
.pager-cat { font: 600 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager-img { flex: 0 0 72px; width: 72px; height: 48px; object-fit: cover; border-radius: var(--radius); }
.pager-float a.pf { position: fixed; top: 50%; z-index: 45; display: none; place-items: center; width: 44px; height: 64px; translate: 0 -50%; color: var(--silver-hi); text-decoration: none;
  background: rgb(var(--panel-rgb) / .85); border: 1px solid var(--line-hi); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .2s, border-color .2s, box-shadow .2s; }
.pager-float .pf-prev { left: 0; border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.pager-float .pf-next { right: 0; border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.pager-float a.pf:hover { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px rgb(var(--neon-rgb) / .6); }
@media (min-width: 1100px) { .pager-float a.pf { display: grid; } }
@media print { .pager-float { display: none !important; } }
/* cookie notice: categories + positions (Web Admin → Kolačići) */
.consent-prefs { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.consent-prefs[hidden] { display: none; }
.consent-cat { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--silver); cursor: pointer; }
.consent-cat input { margin-top: 3px; accent-color: var(--neon); }
.consent-cat b { color: var(--silver-hi); }
.consent--top { top: 16px; bottom: auto; }
.consent--center { top: 50%; bottom: auto; transform: translateY(-50%); }
.consent--bottom-left { right: auto; max-width: 460px; }

/* Links & resources: downloads listed with the links */
.res-section { margin-top: clamp(24px, 4vw, 40px); }
.res-item .chip { font-size: .72rem; }

/* ======================================================================
   SITE SEARCH (Appearance → Header → „Pretraga”): icon next to the colour switch, search window, /search/
   ====================================================================== */
html .search-toggle { display: inline-flex; color: var(--text); text-decoration: none; }
.search-toggle .ico { width: 18px; height: 18px; }
.search-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(78vh, 720px); margin: 10vh auto auto; padding: 0; overflow: hidden; display: none; flex-direction: column;
  color: var(--text); background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--radius-lg); box-shadow: 0 24px 80px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(var(--neon-rgb) / .12); }
.search-dialog[open] { display: flex; }
.search-dialog::backdrop { background: rgb(var(--bg-rgb) / .72); backdrop-filter: blur(3px); }
.search-dialog-head { display: flex; gap: 8px; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.search-dialog-head .search { flex: 1 1 auto; }
.search-dialog-head input { font-size: 1.05rem; }
.search-close { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line-hi); border-radius: 999px; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.search-close:hover, .search-close:focus-visible { color: var(--neon); border-color: var(--neon); }
.search-dialog .search-count { margin: 0; padding: 10px 16px 0; }
.search-dialog .search-count:empty { display: none; }
.search-dialog .search-results { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 8px; }
.search-dialog-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.search-results { list-style: none; padding: 0; margin: 14px 0 0; }
.search-results li + li { margin-top: 4px; }
.sr-item { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.sr-item:hover, .sr-item:focus-visible, .sr-item.is-active { background: rgb(var(--neon-rgb) / .07); border-color: rgb(var(--neon-rgb) / .35); outline: none; }
.sr-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sr-kind { color: var(--neon); }
.sr-meta { color: var(--muted); }
.sr-title { font-weight: 700; font-size: 1.02rem; }
.sr-snip { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.search-results mark { background: rgb(var(--neon-rgb) / .22); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-page .search-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.search-page .search-form .btn { display: inline-flex; align-items: center; gap: 8px; }
.search-page .search-all { margin-top: 28px; }
html.search-open { overflow: hidden; }
@media (max-width: 600px) { .search-dialog { margin-top: 12px; max-height: calc(100vh - 24px); } .search-dialog-foot .muted { display: none; } }
@media print { .search-toggle, .search-dialog { display: none !important; } }

/* ======================================================================
   LIGHT EFFECTS: effects run only where they are seen; on phones only the matrix rain and the glitches stay.
   app.js sets html.fx-io + .fx-vis on cards and carousel slides that are on screen; without JS nothing changes.
   ====================================================================== */
html.fx-io.fx-shine-loop .card:not(.fx-vis) .card-body::after, html.fx-io.fx-shine-loop .hero:not(.fx-vis) .hero-inner::after,
html.fx-io .hero-slide:not(.fx-vis) .pulse, html.fx-io .hero:not(.fx-vis) .pulse { animation: none; }
/* PHONES (owner's choice): only the matrix rain and the glitches stay (logo, cards, carousel glitch / CRT, GUI glitch,
   page-change glitch). Everything else is switched off here: shine, pulse, line lights, scanlines, grain, vignette, glows,
   blur / glass, reflection, chroma, cursor light (static HUD corners stay). A live blur and full-screen blend layers are recomputed on every
   scroll step, and endless animations repaint in every frame — that is what made phones stall. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html body { background-attachment: scroll; }
  html .site-header, html.fx-glass .site-header, html .pager-float a.pf { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:not(.hdr-solid) .site-header, html.fx-glass:not(.hdr-solid) .site-header { background: rgb(var(--bg-rgb) / .97); }
  html.cards-glass .card, html.fx-glass :is(.card, .panel, .widget, .hero, .stat) { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgb(var(--panel-rgb) / .9); }
  html body::before, html.fx-vignette:not(.gui-glitch) body::after, html.fx-grain:not(.gui-glitch) body::after, html .cursor-glow,
  html.fx-shine-hover .card-body::after, html.fx-shine-loop .card-body::after, html.fx-shine-hover .hero-inner::after, html.fx-shine-loop .hero-inner::after,
  html.card-fx-scan .card-body::before, html.menu-fx-scan .main-nav a::after, html.gui-cursor h1::after { display: none !important; }
  html .pulse, html.fx-shine-loop .btn, html.fx-shine-loop .main-nav a.nav-cta, html.fx-line .site-header::after, html.fx-4.logo-fx-neon .logo { animation: none !important; }
  html.fx-shine-loop .btn, html.fx-shine-loop .main-nav a.nav-cta { background-position: 30% 0, 0 0; }
  html .pulse { box-shadow: none; }
  /* glows (a keyframe glitch still draws its own RGB shadow on top) */
  html:is(.fx-heading-glow, .fx-tg-1, .fx-tg-2, .fx-tg-3, .gui-matrix) :is(h1, h2, h3, .card-title, .main-nav a), html.gui-matrix a { text-shadow: none; }
  html.fx-heading-glow .post-title, html.fx-chroma .card-media img { filter: none; }
  html.fx-reflect :is(.logo, .page-title .chrome-text) { -webkit-box-reflect: unset; }
  html.fx-gb-always :is(.card, .panel, .widget, .hero, .pager-link) { box-shadow: none; }
}

/* ======================================================================
   CG OFF (Appearance → CG → „CG OFF za posjetitelje”): the visitor switched the effects off.
   Only motion and effect layers go — colours, fonts, borders, glow and layout stay exactly the same.
   ====================================================================== */
html.has-cg .cg-toggle { display: inline-flex; width: auto; min-width: 38px; padding: 0 10px; font: 700 .7rem/1 var(--mono); letter-spacing: .12em; }
.cg-toggle .cg-off-label, html.cg-off .cg-toggle .cg-on { display: none; }
html.cg-off .cg-toggle .cg-off-label { display: inline; }
html.cg-off .cg-toggle { color: var(--muted); }
.hdr-tools { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hdr-tools .mode-toggle { margin-left: 0; }
@media (max-width: 760px) { .header-row .hdr-tools { order: 1; margin-left: auto; } }
@media print { .cg-toggle { display: none !important; } }
/* every animation (glitch, shine, grain, line lights, CRT, cursor, carousel glitch, block animations) */
html.cg-off *, html.cg-off *::before, html.cg-off *::after { animation: none !important; }
/* effect layers: glitch copies of text, scanlines / grain / vignette / glitch bar, cursor light, page veil, matrix rain, scan sweeps */
html.cg-off .glitch::before, html.cg-off .glitch::after,
html.cg-off body::before, html.cg-off body::after,
html.cg-off .cursor-glow, html.cg-off .gl-veil, html.cg-off .gui-rain-canvas,
html.cg-off.card-glitch .card::before, html.cg-off.card-fx-scan .card-body::before,
html.cg-off.menu-fx-scan .main-nav a::after,
html.cg-off.fx-shine-hover .card-body::after, html.cg-off.fx-shine-loop .card-body::after, html.cg-off.fx-shine-hover .hero-inner::after, html.cg-off.fx-shine-loop .hero-inner::after,
html.cg-off.gui-cursor h1::after,
html.cg-off .hero-slide.is-glitch::before, html.cg-off .hero-slide.is-glitch::after, html.cg-off .hero-slide.is-mglitch::before, html.cg-off .hero-slide.is-crt-off::after { display: none !important; }
/* a glitch / CRT class that was already running when the button was pressed: show the slide normally */
html.cg-off .hero-slide.is-crt-off > *, html.cg-off .hero-slide.is-crt-on > *, html.cg-off .hero-slide.is-glitch *, html.cg-off .hero-slide.is-mglitch * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
html.cg-off.is-glitching main, html.cg-off.is-glitching .site-header, html.cg-off.is-glitching .cat-bar, html.cg-off .gl-hit { filter: none !important; transform: none !important; }