/* TM Wiki — identidade visual do site comercial (tm.alz.adm.br), 2026-07-23.
   Dark é o padrão (palco do site); o toggle ◐ mantém o tema claro para leitura. */
:root{--accent:#6b8ffa;--accent-strong:#4574f5;--accent2:#9a7cf5;--violet:#7048e8;
  --ink:#eef1f7;--ink-2:#aab2c2;--ink-3:#7a8598;
  --bg:#0f1115;--paper:#1c1f26;--side:#13161c;--line:#2a2f3a;--line-2:#22262f;--soft:#1d2740;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.45);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;}
:root[data-theme=light]{--accent:#4574f5;--accent-strong:#4574f5;--accent2:#7048e8;--violet:#7048e8;
  --ink:#12151c;--ink-2:#41485a;--ink-3:#7b8394;
  --bg:#f4f6fa;--paper:#fff;--side:#fbfcfe;--line:#e3e7ef;--line-2:#eef1f6;--soft:#eef2fe;
  --shadow:0 1px 2px rgba(20,30,60,.05),0 10px 30px rgba(20,30,60,.07);}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}

/* topo — mesmo desenho da nav do site (sticky, blur, marca com gradiente) */
.wtop{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:12px 20px}
.wbrand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:800;font-size:16px;letter-spacing:-.02em}
.wlogo{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent-strong),var(--violet));color:#fff;font-weight:800;font-size:12.5px}
.wtag{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:4px 8px;margin-left:2px}
.wgrow{flex:1}
/* links do site no topo — o MESMO menu da home: tudo num ambiente só */
.wlinks{display:flex;gap:16px;margin-left:10px}
.wlinks a{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:6px 2px}
.wlinks a:hover{color:var(--ink)}
.wlinks a.on{color:var(--accent);font-weight:600}
.wapp{font-size:13.5px;text-decoration:none;border-radius:8px;padding:7px 14px;color:#fff;background:var(--accent-strong);font-weight:600}
.wapp:hover{filter:brightness(1.08)}
.wtheme{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px}
.wtheme:hover{color:var(--ink)}
@media (max-width:1080px){.wlinks a:not(.on){display:none}}
@media (max-width:640px){.wlinks{display:none}}

/* layout */
.wlayout{display:grid;grid-template-columns:288px 1fr;align-items:start}
@media (max-width:860px){.wlayout{grid-template-columns:1fr}.wside{display:none}}
.wside{position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;background:var(--side);border-right:1px solid var(--line);padding:14px 12px}
.wnav input{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:10px;font-family:var(--sans)}
.wnav input:focus{outline:none;border-color:var(--accent)}
.wsec h4{margin:16px 6px 5px;font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.wnav ul{list-style:none;margin:0;padding:0}
.wnav li a{display:block;padding:6px 10px;border-radius:7px;color:var(--ink-2);text-decoration:none;font-size:13.5px}
.wnav li a:hover{background:var(--line-2);color:var(--ink)}
.wnav li.on a{background:var(--soft);color:var(--accent);font-weight:600}

/* artigo */
.wmain{padding:clamp(20px,4vw,44px) clamp(16px,4vw,52px);min-width:0}
.wart{max-width:820px}
.wart h1{font-size:clamp(26px,3.6vw,36px);font-weight:800;line-height:1.12;margin:0 0 14px;letter-spacing:-.025em;text-wrap:balance}
.wart h2{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:34px 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.wart h3{font-size:17px;margin:22px 0 6px}
.wart p{margin:0 0 13px}.wart p,.wart li{max-width:74ch;color:var(--ink-2)}
.wart a{color:var(--accent)}
.lead{font-size:17px;color:var(--ink-2)}
.wart ul,.wart ol{margin:0 0 14px;padding-left:22px}.wart li{margin:5px 0}
.wart b,.wart strong{color:var(--ink)}
.wart code{font:12.5px var(--mono);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink)}

/* figuras (prints anotados) */
.wfig{margin:18px 0}
.wfig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.wfig figcaption{margin-top:8px;font-size:13px;color:var(--ink-3)}
/* números da legenda seguem VERMELHOS — casam com as anotações desenhadas nos prints */
ol.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
ol.legend li{position:relative;padding-left:38px;font-size:14px;color:var(--ink-2);max-width:78ch}
ol.legend .cn{position:absolute;left:0;top:1px;width:24px;height:24px;background:#e0331c;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}

/* callouts e tabelas */
.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:12px 16px;margin:16px 0;font-size:14.5px;color:var(--ink-2)}
.callout.tip{border-left-color:var(--accent2)}
.callout b{color:var(--ink)}
table.params{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
table.params th,table.params td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
table.params th{font:600 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);border-bottom:2px solid var(--line)}
table.params td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}