:root{
  --ink:#212529;
  --ink-2:#495057;
  --ink-3:#6c757d;
  --line:#dee2e6;
  --line-2:#ced4da;
  --bg:#ffffff;
  --band:#f6f7f8;
  --blue:#1257c4;
  --blue-dark:#0e469e;
  --red:#a72020;
  --green:#0b6a3a;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:var(--blue)}

/* ---------- navbar ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:30}
.nav-in{display:flex;justify-content:space-between;align-items:stretch;height:52px;max-width:1180px;margin:0 auto;padding:0 24px}
.nav-left{display:flex;align-items:center}
.nav-links{display:flex;align-items:stretch;flex:1;justify-content:center}
.nav-right{display:flex;align-items:center}
.brand{
  display:flex;align-items:center;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.02em;cursor:pointer;
  padding-right:22px;
}
.nav a.item{
  display:flex;align-items:center;padding:0 16px;text-decoration:none;color:var(--ink-2);
  font-size:14.5px;border-left:1px solid var(--line);cursor:pointer;
}
.nav a.item:last-child{border-right:1px solid var(--line)}
.nav a.item:hover{background:var(--band);color:var(--blue)}
.lang-select{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-2);border-radius:4px;padding:5px 8px;cursor:pointer;
  max-width:170px;
}
.lang-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,87,196,.12);outline:none}
/* RTL support */
html[dir="rtl"] .nav a.item{border-left:none;border-right:1px solid var(--line)}
html[dir="rtl"] .nav a.item:last-child{border-left:1px solid var(--line)}
html[dir="rtl"] .brand{padding-right:0;padding-left:22px}
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .hero,html[dir="rtl"] h2.section,html[dir="rtl"] .section-sub{text-align:center}

/* ---------- hero ---------- */
.hero{padding:52px 0 44px;text-align:center;border-bottom:1px solid var(--line)}
h1{font-size:42px;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.sub{font-size:18px;color:var(--ink-2);margin:0 auto 28px;max-width:66ch}
.searchbox{position:relative;max-width:520px;margin:0 auto}
.searchbox input{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:11px 56px 11px 14px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:4px;outline:none;
}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,87,196,.12)}
.kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:3px;padding:1px 6px;pointer-events:none;background:var(--bg);
}
.searchbox input:focus + .kbd{opacity:0}
.counter{margin:11px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.counter b{color:var(--ink);font-weight:500}

/* ---------- faixas ---------- */
.band{background:var(--band);border-bottom:1px solid var(--line);padding:44px 0}
.plain{padding:44px 0;border-bottom:1px solid var(--line)}
h2.section{font-size:28px;font-weight:600;letter-spacing:-.02em;text-align:center;margin:0 0 8px}
.section-sub{text-align:center;color:var(--ink-2);margin:0 auto 28px;max-width:70ch;font-size:15.5px}

/* ---------- demonstração ---------- */
.demo{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:32px;align-items:start}
.demo h3{font-size:19px;font-weight:600;margin:0 0 8px}
.demo p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.code{
  background:var(--bg);border:1px solid var(--line);border-radius:4px;position:relative;
  padding:16px 16px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto;
}
.code .k{color:var(--blue)}
.code .s{color:var(--green)}
.code .n{color:var(--red)}
.code .p{color:var(--ink-3)}
.btn{
  display:inline-block;background:var(--blue);color:#fff;text-decoration:none;cursor:pointer;
  font-size:14px;font-weight:600;padding:8px 16px;border-radius:4px;border:1px solid var(--blue);
  font-family:var(--sans);
}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.small{position:absolute;top:10px;right:10px;font-size:12px;padding:4px 10px;font-weight:500}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:var(--bg);color:var(--blue)}
.btn.ghost:hover{background:var(--band)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.card{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:16px 18px 14px}
.card h3{font-size:17px;font-weight:600;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card h3 i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-weight:400}
.card a{display:block;color:var(--blue);text-decoration:none;font-size:14.5px;padding:3.5px 0;line-height:1.35;cursor:pointer}
.card a:hover{text-decoration:underline;text-underline-offset:2px;color:var(--blue-dark)}
.card a:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);border-radius:3px;padding:0 4px;margin-left:6px;vertical-align:1.5px}

/* destaques */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:14px 16px;text-decoration:none;display:block;cursor:pointer}
.fcard:hover{border-color:var(--blue)}
.fcard strong{display:block;font-size:15.5px;font-weight:600;color:var(--blue);margin-bottom:2px}
.fcard:hover strong{text-decoration:underline;text-underline-offset:2px}
.fcard span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.45}

.empty{display:none;text-align:center;padding:20px 0 8px}
.empty p{margin:0 0 4px}
.empty span{color:var(--ink-3);font-size:14px}
.empty b{font-family:var(--mono);font-weight:500}
body.no-results .empty{display:block}
body.no-results .cards{display:none}

/* ---------- anúncio ---------- */
.ad{max-width:970px;margin:0 auto;border:1px dashed var(--line-2);border-radius:4px;height:90px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#b0b5ba;letter-spacing:.08em;text-transform:uppercase}

/* ---------- confiança ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trust>div{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.trust h3{font-size:16.5px;font-weight:600;margin:0 0 6px}
.trust p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- rodapé ---------- */
footer{padding:28px 0 48px;color:var(--ink-3);font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center}
footer a{color:var(--ink-3);text-decoration:none;cursor:pointer}
footer a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.foot-note{width:100%;text-align:center;font-family:var(--mono);font-size:12px;margin-top:14px}

/* ========== TOOL PAGE ========== */
.tool-head{padding:28px 0 22px;border-bottom:1px solid var(--line)}
.crumb{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:0 0 10px}
.crumb a{color:var(--ink-3);text-decoration:none;cursor:pointer}
.crumb a:hover{color:var(--blue)}
.tool-head h1{font-size:30px;margin:0 0 8px}
.tool-head p.lead{font-size:16px;color:var(--ink-2);margin:0;max-width:75ch}
.tool-body{padding:28px 0 44px}

.field{margin:0 0 16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.field .hint{font-size:12.5px;color:var(--ink-3);font-weight:400}
textarea,input[type=text],input[type=number],input[type=password],input[type=url],input[type=search],select{
  width:100%;font-family:var(--mono);font-size:13.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:4px;padding:10px 12px;outline:none;
}
textarea{min-height:150px;resize:vertical;line-height:1.5}
textarea:focus,input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,87,196,.12)}
select{font-family:var(--sans);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--blue)}
input[type=color]{width:48px;height:34px;padding:2px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg);cursor:pointer;vertical-align:middle}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);cursor:pointer}

.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.toolbar .sp{flex:1}
.inline{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 14px}
.inline label{font-weight:400;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}

.out{
  background:var(--band);border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  min-height:44px;position:relative;
}
.out.ok{border-color:#bfe3cd}
.out.err{border-color:#e6bcbc;color:var(--red);background:#fbf3f3}
.result-block{margin:16px 0 0}
.result-block>label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}

.msg{font-family:var(--mono);font-size:12.5px;margin:8px 0 0}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

.kv{width:100%;border-collapse:collapse;font-size:13.5px}
.kv th,.kv td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.kv th{font-weight:600;color:var(--ink-2);font-size:12.5px;background:var(--band)}
.kv td.mono,.kv td code{font-family:var(--mono);font-size:12.5px}
.kv tr:hover td{background:var(--band)}

table.data{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--mono)}
table.data th,table.data td{border:1px solid var(--line);padding:6px 9px;text-align:left}
table.data th{background:var(--band);font-weight:600}
.table-scroll{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:4px}
.table-scroll table.data th,.table-scroll table.data td{border-left:none;border-top:none}

.chip{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--band);margin:2px}
.swatch{display:inline-block;width:100%;height:56px;border-radius:4px;border:1px solid var(--line)}
.pill{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:10px}
.pill.good{background:#e5f4ec;color:var(--green)}
.pill.bad{background:#fbeaea;color:var(--red)}
.pill.warn{background:#fdf3e3;color:#8a5a00}

.note{background:#f4f8ff;border:1px solid #cfe0fb;border-radius:4px;padding:10px 14px;font-size:13.5px;color:var(--ink-2);margin:0 0 16px}
.grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

.diff-line{font-family:var(--mono);font-size:13px;white-space:pre-wrap;padding:1px 8px}
.diff-add{background:#e5f4ec}
.diff-del{background:#fbeaea}
.diff-line .bar{display:inline-block;width:14px;color:var(--ink-3)}

@media (max-width:1040px){
  .cards,.feat{grid-template-columns:repeat(3,1fr)}
  .demo{grid-template-columns:1fr;gap:22px}
  .trust{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cards,.feat{grid-template-columns:repeat(2,1fr)}
  h1{font-size:32px}.sub{font-size:16.5px}
  .nav-in{flex-wrap:wrap;height:auto;padding:6px 16px;gap:6px}
  .nav-left{order:1}
  .nav-right{order:2;margin-left:auto}
  .nav-links{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;border-top:1px solid var(--line)}
  .nav a.item{padding:10px 14px;border-left:none;border-right:1px solid var(--line)}
  .nav a.item:first-child{border-left:1px solid var(--line)}
  .row,.row-3{grid-template-columns:1fr}
}
html[dir="rtl"] .nav-right{margin-left:0;margin-right:auto}
@media (max-width:520px){
  .cards,.feat{grid-template-columns:1fr}
  h1{font-size:27px}.hero{padding:36px 0 32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}