:root{
  --bg:#060810;
  --bg-2:#0A0E1A;
  --surface:#0C1120;
  --surface-2:#111A2E;
  --border:rgba(122,150,200,.14);
  --border-strong:rgba(122,150,200,.30);
  --ink:#E9EFFB;
  --ink-dim:#B7C2D8;
  --muted:#7F8CA6;
  --accent:#5EDFFF;   /* cyan — machine --cyan / ponte com space --cyan */
  --accent-2:#4C7DFF; /* azul — machine --blue / ~space --atmo   */
  --warn:#FFC46B;
  --ok:#7CE7C0;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --maxw:720px;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(76,125,255,.10), transparent 60%),
    radial-gradient(900px 600px at 0% 4%, rgba(94,223,255,.06), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  min-height:100vh;
}
/* leve textura de scanlines, ecoando o HUD do portfólio — bem sutil */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}
::selection{background:rgba(94,223,255,.28);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- barra superior (voltar ao domínio / trocar portal) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(18px,5vw,40px);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  background:linear-gradient(to bottom,rgba(6,8,16,.86),rgba(6,8,16,.5));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{color:var(--ink-dim);display:inline-flex;align-items:center;gap:9px}
.brand b{color:var(--ink);font-weight:600;letter-spacing:.01em}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent)}
.portals{display:flex;gap:6px}
.portals a{
  padding:6px 11px;border:1px solid var(--border);border-radius:999px;
  color:var(--muted);transition:.25s var(--ease);white-space:nowrap;
}
.portals a:hover,.portals a:focus-visible{
  color:var(--ink);border-color:var(--border-strong);
  background:rgba(122,150,200,.06);
}

/* ---------- container ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,24px);position:relative;z-index:1}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7}

/* =========================================================================
   LISTAGEM  (/articles/index.html)
   ========================================================================= */
.masthead{padding:clamp(56px,11vw,104px) 0 clamp(30px,6vw,48px)}
.masthead h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.3rem,6.4vw,3.5rem);line-height:1.03;letter-spacing:-.02em;
  margin:20px 0 16px;
}
.masthead h1 .accent{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.masthead .lede{
  color:var(--ink-dim);font-size:clamp(1.02rem,2.4vw,1.15rem);max-width:56ch;
}

.filters{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:6px 0 4px;margin-bottom:28px;
  border-top:1px solid var(--border);padding-top:22px;
}
.filters .chip{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  padding:6px 12px;border:1px solid var(--border);border-radius:999px;
  color:var(--muted);
}
.filters .chip.is-on{color:var(--ink);border-color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(94,223,255,.25)}

/* lista de artigos como "log de desenvolvimento" */
.log{list-style:none;display:flex;flex-direction:column;
  padding-bottom:clamp(60px,12vw,120px)}
.entry{
  position:relative;display:block;padding:26px 0;
  border-top:1px solid var(--border);transition:.3s var(--ease);
}
.entry:last-child{border-bottom:1px solid var(--border)}
.entry:hover,.entry:focus-visible{padding-left:14px}
.entry:hover .title,.entry:focus-visible .title{color:var(--accent)}
.entry .meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:11px;
}
.entry .meta .id{color:var(--accent-2)}
.entry .meta .sep{opacity:.4}
.entry .meta .series{
  color:var(--ink-dim);border:1px solid var(--border);border-radius:5px;padding:1px 7px;
}
.entry .title{
  font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,3.6vw,1.72rem);
  line-height:1.18;letter-spacing:-.01em;transition:color .25s var(--ease);
}
.entry .dek{color:var(--ink-dim);margin-top:8px;max-width:60ch}
.entry .arrow{
  position:absolute;right:2px;top:26px;color:var(--muted);
  transition:.3s var(--ease);font-family:var(--mono);
}
.entry:hover .arrow,.entry:focus-visible .arrow{color:var(--accent);transform:translateX(4px)}

/* entrada "em breve", sem link */
.entry.soon{opacity:.5;cursor:default}
.entry.soon:hover{padding-left:0}
.entry.soon .title{color:var(--ink)}
.entry.soon .tag-soon{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warn);border:1px solid rgba(255,196,107,.35);border-radius:5px;padding:1px 7px;
}

/* =========================================================================
   ARTIGO  (/articles/<slug>/index.html)
   ========================================================================= */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:40;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px rgba(94,223,255,.6);transition:width .08s linear;
}
.back{
  display:inline-flex;align-items:center;gap:8px;margin:clamp(30px,7vw,52px) 0 0;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);transition:.25s var(--ease);
}
.back:hover,.back:focus-visible{color:var(--accent);gap:11px}

.article-head{padding:22px 0 clamp(28px,5vw,40px);border-bottom:1px solid var(--border)}
.article-head .runline{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:18px;
}
.article-head .runline .id{color:var(--accent-2)}
.article-head .runline .series{color:var(--accent)}
.article-head .runline .sep{opacity:.4}
.article-head h1{
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.4vw,2.9rem);line-height:1.08;
}

/* gauge de CPU animado — a assinatura da seção, espelha a barra do SysForge */
.gauge{
  margin-top:26px;border:1px solid var(--border);border-radius:10px;
  background:linear-gradient(180deg,rgba(17,26,46,.7),rgba(12,17,32,.7));
  padding:14px 16px;font-family:var(--mono);font-size:12px;
}
.gauge .gline{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:9px}
.gauge .gline b{color:var(--ink)}
.gauge .gval{color:var(--accent)}
.gauge .track{height:9px;border-radius:6px;background:rgba(122,150,200,.14);overflow:hidden}
.gauge .fill{
  height:100%;width:34%;border-radius:6px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 14px rgba(94,223,255,.45);transition:width .9s var(--ease);
}
.gauge .cap{color:var(--muted);margin-top:9px;font-size:11px;letter-spacing:.02em}

/* corpo do artigo */
.prose{padding:clamp(30px,6vw,44px) 0 clamp(60px,12vw,110px);font-size:1.06rem}
.prose > *{max-width:100%}
.prose h2{
  font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.3rem,3.6vw,1.6rem);line-height:1.2;
  margin:2.4em 0 .7em;display:flex;align-items:baseline;gap:12px;
}
.prose h2 .n{
  font-family:var(--mono);font-size:.72em;color:var(--accent-2);
  border:1px solid var(--border);border-radius:6px;padding:2px 8px;flex:none;
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.15em;color:var(--ink-dim)}
.prose p strong{color:var(--ink);font-weight:600}
.prose a.link{color:var(--accent);border-bottom:1px solid rgba(94,223,255,.35)}
.prose a.link:hover{border-color:var(--accent)}
.prose ul{margin:0 0 1.15em;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.6em}
.prose ul li{position:relative;padding-left:26px;color:var(--ink-dim)}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.prose code:not(pre code){
  font-family:var(--mono);font-size:.86em;color:var(--accent);
  background:rgba(94,223,255,.08);border:1px solid rgba(94,223,255,.16);
  border-radius:5px;padding:.1em .4em;
}

/* callout / nota */
.note{
  border-left:2px solid var(--accent-2);
  background:linear-gradient(90deg,rgba(76,125,255,.07),transparent 80%);
  padding:14px 18px;border-radius:0 8px 8px 0;margin:1.6em 0;
}
.note .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);display:block;margin-bottom:5px}
.note p{margin:0;color:var(--ink-dim)}

/* fórmula */
.formula{
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:22px 20px;margin:1.7em 0;font-family:var(--mono);text-align:center;
}
.formula .row{font-size:1.05rem;color:var(--ink);margin:.35em 0;letter-spacing:.01em}
.formula .row.big{font-size:1.28rem;margin-top:.7em;padding-top:.7em;
  border-top:1px dashed var(--border)}
.formula .row.big .accent{color:var(--accent)}
.formula .d{color:var(--accent-2)}

/* bloco de código */
.code{margin:1.6em 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:#080B14}
.code .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:rgba(122,150,200,.05);
}
.code .bar .fname{color:var(--ink-dim);display:inline-flex;align-items:center;gap:8px}
.code .bar .fname .lang{color:var(--accent);text-transform:lowercase}
.code .copy{
  font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer;
  background:none;border:1px solid var(--border);border-radius:6px;padding:3px 9px;
  transition:.2s var(--ease);
}
.code .copy:hover{color:var(--ink);border-color:var(--border-strong)}
.code .copy.done{color:var(--ok);border-color:rgba(124,231,192,.4)}
.code pre{margin:0;overflow-x:auto;padding:16px 16px 18px}
.code pre code{font-family:var(--mono);font-size:13.5px;line-height:1.7;background:none;
  color:#C9D5EC;padding:0;border:0}

/* figura / gif */
figure{margin:1.8em 0}
figure .frame{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);
}
figure .placeholder{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);font-family:var(--mono);font-size:12.5px;text-align:center;padding:20px;
  background:
    repeating-linear-gradient(45deg,rgba(122,150,200,.04) 0 10px,transparent 10px 20px),
    var(--surface-2);
}
figure .placeholder .big{color:var(--ink-dim);font-size:13.5px}
figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  text-align:center;margin-top:10px}

/* rodapé do artigo */
.article-foot{
  border-top:1px solid var(--border);padding:clamp(28px,6vw,44px) 0 clamp(60px,12vw,110px);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
}
.article-foot .sig{font-family:var(--mono);font-size:12px;color:var(--muted)}
.article-foot .sig b{color:var(--ink-dim);font-weight:500}
.btn{
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  border:1px solid var(--border-strong);border-radius:999px;padding:9px 16px;
  display:inline-flex;align-items:center;gap:8px;transition:.25s var(--ease);
}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:var(--accent);gap:11px}

/* ---------- code theme (override highlight.js) ---------- */
.hljs{background:transparent;color:#C9D5EC}
.hljs-comment,.hljs-quote{color:#5C6B86;font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-meta-keyword,.hljs-keyword{color:#4C7DFF}
.hljs-built_in,.hljs-type,.hljs-title.class_{color:#5EDFFF}
.hljs-string,.hljs-symbol{color:#7CE7C0}
.hljs-number,.hljs-literal{color:#FFC46B}
.hljs-title,.hljs-title.function_,.hljs-section{color:#E9EFFB}
.hljs-attr,.hljs-attribute,.hljs-variable{color:#B7C2D8}
.hljs-punctuation,.hljs-operator{color:#8A97B0}
.hljs-meta{color:#7F8CA6}

/* ---------- foco visível + motion ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
  .gauge .fill{transition:none}
}
@media (max-width:560px){
  .prose{font-size:1.01rem}
  .article-foot{flex-direction:column;align-items:flex-start}
}
/* ---------- EN/PT switch ---------- */
.lang-switch{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.lang-switch button{background:none;border:0;color:var(--muted);font-family:var(--mono);
  font-size:12px;letter-spacing:.04em;padding:6px 11px;cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.is-active{color:var(--accent);background:rgba(94,223,255,.08)}