/* Shared by privacy.html and security.html.
   Tokens are copied from index.html, whose CSS is inline for LCP reasons and so
   cannot be imported. If a token changes there, change it here too. */
@font-face{font-family:'Google Sans Flex';src:url(/fonts/GoogleSansFlex-Variable.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Google Sans Code';src:url(/fonts/GoogleSansCode-Variable.woff2) format('woff2');font-weight:300 800;font-display:swap}

:root{

  --s000:#ffffff; --s100:#f4f8ff; --s200:#eaf2ff; --s300:#dde9ff;
  --b-subtle:#e2ecfb; --b-default:#c6d8f5; --b-strong:#5f86c2;
  --ink1:#07121c; --ink2:#2c4055; --ink3:#4d6278; --ink4:#8ba0b4;
  --accent:#0668e1; --accent-h:#0558c6; --accent-m:#e6f0ff; --on-accent:#ffffff;
  --meta:linear-gradient(100deg,#0558c6 0%,#0668e1 42%,#0080fb 100%);
  --meta-h:linear-gradient(100deg,#044fb3 0%,#0558c6 42%,#0070e6 100%);
  --vivid:#0dacf1; --vivid-h:#38bdf8; --on-vivid:#04121c; --accent-l:#0080fb; --turq:#71f6d2;
  --teal:#0a736c; --gap:#a54a18; --missing:#7a580e; --match:#0a736c; --change:#8f3d88;
  --glow:rgba(0,128,251,.24);
  --sh-sm:0 1px 2px rgba(11,43,69,.08); --sh-md:0 6px 20px rgba(11,43,69,.10); --sh-lg:0 20px 52px rgba(11,43,69,.14);
  --sans:"Google Sans Flex","Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Google Sans Code",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:24px; --r-full:999px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--s000);color:var(--ink2);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-inline:20px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.bar{border-bottom:1px solid var(--b-subtle);margin-inline:-20px;padding:16px 20px;margin-bottom:56px}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:20px;font-weight:500;color:var(--ink1);text-decoration:none;letter-spacing:-.01em}
.brand i{font-style:normal;color:var(--accent)}
.bar nav{display:flex;gap:22px;font-size:14px}
.bar nav a{color:var(--ink3);text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink1)}

.wrap{max-width:1160px;margin-inline:auto}
.doc{max-width:70ch;margin-inline:auto;padding-bottom:88px}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
h1{font-size:clamp(32px,4.2vw,44px);font-weight:400;letter-spacing:-.025em;line-height:1.1;
  color:var(--ink1);margin:14px 0 18px;text-wrap:balance}
.lede{font-size:18px;color:var(--ink2);margin:0 0 10px}
.updated{font:13px var(--mono);color:var(--ink4);margin:0 0 48px}
h2{font-size:20px;font-weight:500;color:var(--ink1);margin:44px 0 12px;text-wrap:balance}
h3{font-size:16px;font-weight:600;color:var(--ink1);margin:26px 0 8px}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
li{position:relative;padding-left:20px}
li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--b-strong)}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 16px}
th{font:500 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink4);
  text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--b-subtle)}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--b-subtle);vertical-align:top}
tr:last-child td{border-bottom:0}
code{font-family:var(--mono);font-size:13px;color:var(--ink2);background:var(--s100);
  border:1px solid var(--b-subtle);border-radius:var(--r-xs);padding:1px 5px}
.note{padding:16px 18px;background:var(--s100);border:1px solid var(--b-subtle);
  border-radius:var(--r-md);font-size:14.5px;color:var(--ink2);margin:0 0 18px}
.todo{font-family:var(--mono);font-size:.9em;color:var(--missing);background:#fdf6e3;
  border:1px dashed #c9a24a;border-radius:var(--r-xs);padding:1px 6px}
footer{border-top:1px solid var(--b-subtle);margin-inline:-20px;padding:28px 20px 56px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:14px;color:var(--ink3)}
footer a{color:var(--ink3)}
@media (max-width:560px){
  .bar{margin-bottom:36px}
  .bar nav{gap:16px;font-size:13px}
  footer{padding:24px 20px 32px}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:10px;font-size:13.5px}
}