:root {
    --paper:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F2EA;
    --border:#E7E4DB; --border-strong:#D8D4C8;
    --text:#20242B; --text-dim:#6A6F77; --text-faint:#93979E;
    --accent:#F5B301; --accent-strong:#8A6300; --accent-soft:#FCEFC2;
    --logo-ink:#2A2E35;
    --shadow:0 1px 0 rgba(20,22,27,.03), 0 8px 30px -18px rgba(20,22,27,.28);
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --paper:#14161B; --surface:#1B1E25; --surface-2:#232730;
    --border:#2C313B; --border-strong:#3A404B;
    --text:#ECEEF1; --text-dim:#99A0A9; --text-faint:#6E757F;
    --accent:#FFC72C; --accent-strong:#FFC72C; --accent-soft:#3a3416;
    --logo-ink:#E6E8EC;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 34px -20px rgba(0,0,0,.7);
  }}
  :root[data-theme="dark"]{
    --paper:#14161B; --surface:#1B1E25; --surface-2:#232730;
    --border:#2C313B; --border-strong:#3A404B;
    --text:#ECEEF1; --text-dim:#99A0A9; --text-faint:#6E757F;
    --accent:#FFC72C; --accent-strong:#FFC72C; --accent-soft:#3a3416;
    --logo-ink:#E6E8EC;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 34px -20px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:840px; margin:0 auto; padding:0 24px}

  /* top bar */
  .bar{display:flex; align-items:center; justify-content:space-between; padding:22px 0 0}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:1.05rem}
  .bubble{width:15px;height:15px;border-radius:50%;background:var(--accent);flex:0 0 auto;box-shadow:0 0 0 4px var(--accent-soft)}
  .toggle{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-dim); background:transparent; border:1px solid var(--border);
    border-radius:999px; padding:7px 13px; cursor:pointer;
  }
  .toggle:hover{border-color:var(--border-strong); color:var(--text)}
  .toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* hero */
  header.hero{padding:56px 0 40px}
  .kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); margin:0 0 16px; display:flex; align-items:center; gap:9px}
  .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
  h1{font-size:clamp(2.3rem,7vw,3.5rem); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0; text-wrap:balance}
  h1 em{font-style:normal; color:var(--accent-strong); position:relative; white-space:nowrap}
  .lede{margin:20px 0 0; max-width:52ch; font-size:1.075rem; color:var(--text-dim); text-wrap:pretty}

  /* directory */
  main{padding:8px 0 12px}
  .cat{margin:38px 0 10px; display:flex; align-items:baseline; gap:12px}
  .cat h2{font-family:var(--mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); font-weight:600; margin:0}
  .cat .rule{flex:1; height:1px; background:var(--border)}
  .cat .count{font-family:var(--mono); font-size:.72rem; color:var(--text-faint)}

  .group{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
  .row{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
    padding:15px 18px; text-decoration:none; color:inherit; position:relative;
    border-top:1px solid var(--border);
  }
  .group .row:first-child{border-top:0}
  .row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:center; transition:transform .16s ease}
  .row:hover{background:var(--surface-2)}
  .row:hover::before{transform:scaleY(1)}
  .row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}

  .chip{width:42px;height:42px;border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:grid; place-items:center; flex:0 0 auto; transition:background .16s ease, border-color .16s ease}
  .row:hover .chip{background:var(--accent); border-color:var(--accent)}
  .chip .ico{width:22px;height:22px; color:var(--logo-ink); transition:color .16s ease}
  .row:hover .chip .ico{color:#1a1204}
  .chip .mono-mark{font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--logo-ink); transition:color .16s ease}
  .row:hover .chip .mono-mark{color:#1a1204}

  .meta{min-width:0}
  .name{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .name b{font-weight:700; font-size:1.04rem; letter-spacing:-.01em}
  .name .dom{font-family:var(--mono); font-size:.78rem; color:var(--accent-strong)}
  .desc{display:block; margin:2px 0 0; color:var(--text-dim); font-size:.9rem}

  .tail{display:flex; align-items:center; gap:14px; flex:0 0 auto}
  .tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
    border:1px solid var(--border); border-radius:999px; padding:4px 9px; white-space:nowrap}
  .arrow{width:20px;height:20px;color:var(--text-faint); transition:transform .16s ease, color .16s ease}
  .row:hover .arrow{color:var(--accent-strong); transform:translateX(3px)}

  footer{margin:52px 0 40px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center; text-align:center; color:var(--text-dim); font-size:.85rem}
  footer a{color:var(--accent-strong); text-decoration:none; font-family:var(--mono); font-size:.82rem}
  footer a:hover{text-decoration:underline}
  footer .sep{color:var(--text-faint)}

  @media (max-width:560px){.support,.contact-home{grid-template-columns:1fr}
    .row{grid-template-columns:auto 1fr; gap:13px}
    .tail{grid-column:2; margin-top:2px}
    .arrow{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}

  /* nav */
  .bar{gap:14px}
  nav.menu{display:flex; align-items:center; gap:4px; margin-left:auto}
  nav.menu a{font-family:var(--mono); font-size:.76rem; letter-spacing:.02em; color:var(--text-dim); text-decoration:none; padding:7px 11px; border-radius:8px}
  nav.menu a:hover{color:var(--text); background:var(--surface-2)}
  nav.menu a.active{color:var(--accent-strong)}
  .langsel{display:flex; gap:2px; border:1px solid var(--border); border-radius:999px; padding:2px; margin-left:4px}
  .langsel a{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); text-decoration:none; padding:5px 9px; border-radius:999px}
  .langsel a.on{background:var(--accent); color:#1a1204}
  /* prosa (sobre/conduta) */
  article.prose{max-width:62ch; margin:8px 0 0}
  article.prose h1{font-size:clamp(1.9rem,5vw,2.6rem); letter-spacing:-.03em; margin:0 0 6px; text-wrap:balance}
  article.prose .updated{font-family:var(--mono); font-size:.72rem; color:var(--text-faint); margin:0 0 28px}
  article.prose h2{font-family:var(--sans); font-size:1.35rem; letter-spacing:-.02em; margin:38px 0 12px; padding-top:8px; display:flex; align-items:center; gap:10px}
  article.prose h2::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto}
  article.prose h3{font-size:1.05rem; margin:26px 0 8px; color:var(--text)}
  article.prose p{margin:0 0 14px; color:var(--text-dim)}
  article.prose strong{color:var(--text); font-weight:600}
  article.prose a{color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px}
  article.prose ul{margin:0 0 16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
  article.prose ul li{position:relative; padding-left:22px; color:var(--text-dim)}
  article.prose ul li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--border-strong)}
  article.prose blockquote{margin:0 0 16px; padding:12px 16px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 10px 10px 0; color:var(--text-dim)}
  article.prose .contact{margin-top:36px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); display:grid; gap:6px}
  article.prose .contact div{font-family:var(--mono); font-size:.84rem; color:var(--text-dim)}


  /* blocos da home (custos/apoie/infra/contato) */
  section.block{margin-top:8px}
  .block-lede{margin:-2px 0 16px; color:var(--text-dim); font-size:.98rem}
  .costs{display:grid; grid-template-columns:1fr; gap:10px}
  .cost{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:15px 16px; display:flex; flex-direction:column; gap:6px}
  .cost-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .cost-top b{font-size:.98rem; letter-spacing:-.01em}
  .price{font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--accent-strong); font-variant-numeric:tabular-nums; white-space:nowrap}
  .price.inf{font-size:1.3rem}
  .cost-desc{color:var(--text-dim); font-size:.85rem; line-height:1.45}
  .costs-foot{margin:12px 0 0; font-family:var(--mono); font-size:.82rem; color:var(--text-dim)}
  .costs-foot b{color:var(--accent-strong)}
  .support{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .sup{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:15px 16px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:5px; transition:border-color .15s,background .15s}
  .sup:hover{border-color:var(--accent); background:var(--surface-2)}
  .sup b{font-size:1rem}
  .sup span{color:var(--text-dim); font-size:.85rem}
  .sup .val{font-family:var(--mono); color:var(--accent-strong); font-size:.82rem}
  .servers{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
  .srv{border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:18px; box-shadow:var(--shadow)}
  .srv .srv-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px}
  .srv .srv-h b{font-size:1.02rem}
  .srv .srv-loc{font-family:var(--mono); font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em}
  .srv .model{font-family:var(--mono); font-size:.82rem; color:var(--accent-strong); margin:0 0 10px}
  .srv ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
  .srv li{font-family:var(--mono); font-size:.78rem; color:var(--text-dim); display:flex; gap:8px}
  .srv li::before{content:"›"; color:var(--accent); flex:0 0 auto}
  .callout{border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; background:var(--surface-2); padding:18px 20px}
  .callout b{display:block; font-size:1.1rem; letter-spacing:-.01em; margin-bottom:6px}
  .callout p{margin:0; color:var(--text-dim); font-size:.92rem}
  .contact-home{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .cc{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px}
  .cc span{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint)}
  .cc a,.cc b{font-family:var(--mono); font-size:.86rem; color:var(--accent-strong); text-decoration:none; font-weight:400}


  /* tabela de servidores */
  .srvtbl{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
  .srvtbl th,.srvtbl td{text-align:left; padding:12px 16px; font-size:.9rem; border-top:1px solid var(--border)}
  .srvtbl thead th{border-top:0; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600; background:var(--surface-2)}
  .srvtbl td.mono,.srvtbl td .mono{font-family:var(--mono); font-size:.84rem; color:var(--accent-strong)}
  .srvtbl td b{font-weight:700}
  .srvtbl tr:hover td{background:var(--surface-2)}
  .tblwrap{overflow-x:auto}
  .badge{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:999px; border:1px solid var(--border); color:var(--text-faint); white-space:nowrap}
  .badge.on{border-color:var(--accent); color:var(--accent-strong)}
  pre.code{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--text); margin:0 0 14px}
  pre.code .c{color:var(--text-faint)}
  .domgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
  .dom{display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:9px 12px; font-family:var(--mono); font-size:.82rem}
  .dom a{color:var(--accent-strong); text-decoration:none}
  .dom a:hover{text-decoration:underline}
  .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .dot.sec{background:var(--accent)} .dot.uns{background:var(--text-faint)}

  /* custom.bolha.us */
  .bar-r{display:flex; gap:8px; align-items:center}
  a.toggle{text-decoration:none; display:inline-block}
  .txt{color:var(--text-dim); font-size:.95rem; margin:0 0 14px; max-width:68ch; text-wrap:pretty}
  .txt.more{margin:12px 0 0}
  .txt a,.callout a{color:var(--accent-strong)}
  code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:1px 5px}
  pre.code{white-space:pre}
  .srvtbl td.dim{color:var(--text-dim)}
  .srvtbl td.mono{word-break:break-word}
  .stack{display:grid; gap:12px}
  .steps{margin:0 0 16px; padding-left:22px; display:grid; gap:6px}
  .steps li::marker{font-family:var(--mono); color:var(--accent-strong); font-size:.85rem}
  .steps p{margin:0 0 8px; font-size:.95rem}
  .notes{margin:6px 0 0; padding-left:18px; color:var(--text-dim); font-size:.92rem; display:grid; gap:6px}
  .dom .ver{color:var(--text-faint); font-size:.74rem}
  .callout.call{margin-top:14px}
  .sup .val{word-break:break-all}
  @media (max-width:560px){ .support{grid-template-columns:1fr} }