/* Paleta blueGrey do MUI */
  :root {
    --bg-50:#eceff1; --bg-100:#cfd8dc; --bg-200:#b0bec5; --bg-300:#90a4ae; --bg-400:#78909c;
    --bg-500:#607d8b; --bg-600:#546e7a; --bg-700:#455a64; --bg-800:#37474f; --bg-900:#263238;
    --paper:#ffffff;
    --mono:'DejaVu Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --serif:'Lora', Georgia, serif;
    --sans:'Roboto', 'Liberation Sans', Helvetica, Arial, sans-serif;
    /* Elevações do MUI */
    --e1:0 2px 1px -1px rgba(38,50,56,.2),0 1px 1px 0 rgba(38,50,56,.14),0 1px 3px 0 rgba(38,50,56,.12);
    --e4:0 2px 4px -1px rgba(38,50,56,.2),0 4px 5px 0 rgba(38,50,56,.14),0 1px 10px 0 rgba(38,50,56,.12);
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg-50); color:var(--bg-800); font:16px/1.6 var(--sans); }
  a { color:var(--bg-700); }
  code { font:0.9em var(--mono); background:var(--bg-50); border:1px solid var(--bg-100); border-radius:3px; padding:1px 5px; color:var(--bg-900); }

  /* AppBar */
  .appbar { position:sticky; top:0; z-index:10; background:var(--bg-800); color:#fff; box-shadow:var(--e4); }
  .appbar .inner { max-width:1040px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; gap:24px; }
  .appbar .brand { font:600 18px var(--serif); color:#fff; text-decoration:none; margin-right:auto; }
  .appbar nav a { color:var(--bg-100); text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
  .appbar nav a:hover { color:#fff; }
  .appbar nav { display:flex; gap:20px; }

  .container { max-width:1040px; margin:0 auto; padding:0 16px; }

  /* Hero com faixa lateral */
  .hero { border-left:16px solid var(--bg-700); background:var(--bg-50); padding:72px 0 56px; }
  .hero .container { padding-left:clamp(16px, 5vw, 74px); }
  .kicker { font:14px var(--mono); color:var(--bg-500); margin:0 0 8px; }
  h1 { font:700 clamp(36px, 6vw, 62px)/1.1 var(--serif); color:var(--bg-900); margin:0 0 16px; }
  .lead { font-size:clamp(17px, 2vw, 20px); color:var(--bg-600); max-width:640px; margin:0 0 32px; }
  .actions { display:flex; gap:12px; flex-wrap:wrap; }

  /* Botões MUI */
  .btn { display:inline-flex; align-items:center; gap:8px; padding:8px 22px; border-radius:4px; font:500 15px var(--sans); letter-spacing:.03em; text-transform:uppercase; text-decoration:none; transition:background .2s, box-shadow .2s; }
  .btn-contained { background:var(--bg-700); color:#fff; box-shadow:var(--e1); }
  .btn-contained:hover { background:var(--bg-900); box-shadow:var(--e4); }
  .btn-outlined { border:1px solid var(--bg-400); color:var(--bg-700); }
  .btn-outlined:hover { background:rgba(69,90,100,.06); border-color:var(--bg-700); }

  section { padding:56px 0; }
  h2 { font:700 clamp(26px, 3.5vw, 34px)/1.2 var(--serif); color:var(--bg-900); margin:0 0 8px; }
  .section-sub { color:var(--bg-600); margin:0 0 32px; max-width:680px; }
  .label { font:13px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--bg-400); margin:0 0 6px; }

  /* Paper/Card */
  .paper { background:var(--paper); border-radius:4px; box-shadow:var(--e1); padding:24px; }

  /* Antes / depois */
  .compare { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; }
  .compare .arrow { align-self:center; color:var(--bg-500); font-size:28px; }
  .rule-line { height:2px; margin:0 0 16px; }
  .rule-before { background:var(--bg-200); }
  .rule-after { background:var(--bg-700); }
  .msg { font-size:15px; }
  .msg b { color:var(--bg-900); }
  .fake-link { color:var(--bg-700); text-decoration:underline; text-underline-offset:3px; font-family:var(--mono); font-size:.92em; }
  .plain { font-family:var(--mono); font-size:.92em; color:var(--bg-800); }
  .composer { margin-top:16px; background:var(--bg-900); color:#fff; border-radius:4px; padding:12px 14px; font:14px var(--mono); }
  .composer small { display:block; color:var(--bg-100); font-size:12px; margin-bottom:4px; }

  /* Passos */
  .steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; counter-reset:step; }
  .step { position:relative; padding-top:56px; }
  .step::before { counter-increment:step; content:counter(step, decimal-leading-zero); position:absolute; top:20px; left:24px; font:700 28px var(--serif); color:var(--bg-300); }
  .step h3 { font:600 18px var(--serif); color:var(--bg-900); margin:0 0 6px; }
  .step p { margin:0; color:var(--bg-600); font-size:15px; }

  /* Tabela MUI */
  .table-wrap { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:15px; }
  th { text-align:left; font:500 13px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--bg-600); padding:12px 16px; border-bottom:2px solid var(--bg-700); white-space:nowrap; }
  td { padding:14px 16px; border-bottom:1px solid var(--bg-100); vertical-align:top; }
  tr:last-child td { border-bottom:0; }
  td:first-child { font-weight:500; color:var(--bg-900); white-space:nowrap; }

  pre { background:var(--bg-900); color:var(--bg-50); border-radius:4px; padding:16px; overflow-x:auto; font:14px/1.5 var(--mono); margin:0; }
  pre .c { color:var(--bg-300); }

  /* Alertas */
  .alerts { display:grid; gap:12px; }
  .alert { display:flex; gap:14px; background:var(--paper); border-left:4px solid var(--bg-700); border-radius:4px; padding:14px 18px; box-shadow:var(--e1); }
  .alert .ico { font:700 16px var(--mono); color:var(--bg-700); }
  .alert p { margin:0; }
  .alert strong { color:var(--bg-900); }

  ol.install { margin:0; padding-left:20px; }
  ol.install li { margin-bottom:8px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .two > *, .compare > *, .steps > * { min-width:0; }

  footer { border-top:1px solid var(--bg-200); padding:28px 0 40px; }
  footer .stack { font:13px var(--mono); color:var(--bg-400); }
  footer .container { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

  @media (max-width: 760px) {
    .appbar nav { display:none; }
    .compare { grid-template-columns:1fr; }
    .compare .arrow { justify-self:center; transform:rotate(90deg); }
    .steps, .two { grid-template-columns:1fr; }
    .hero { border-left-width:8px; padding:48px 0 40px; }
  }

  /* Seletor de idioma */
  .lang { position:relative; }
  .lang summary { list-style:none; cursor:pointer; color:var(--bg-100); font:500 13px var(--mono); padding:6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:4px; }
  .lang summary::-webkit-details-marker { display:none; }
  .lang summary:hover { color:#fff; border-color:rgba(255,255,255,.5); }
  .lang ul { position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:6px 0; list-style:none; background:var(--paper); border-radius:4px; box-shadow:var(--e4); min-width:190px; z-index:20; }
  .lang li a { display:block; padding:8px 16px; color:var(--bg-800); text-decoration:none; font-size:14px; }
  .lang li a:hover { background:var(--bg-50); }
  .lang li a[aria-current] { font-weight:700; color:var(--bg-900); }

  /* Card da Chrome Web Store na instalação */
  .store-card { display:flex; align-items:center; gap:24px; justify-content:space-between; }
  .store-card > div { flex:1; min-width:0; }
  .store-card p:last-child { margin:0; }
  @media (max-width: 760px) { .store-card { flex-direction:column; align-items:stretch; } }