1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* A short reset. Everything it sets is something the system would otherwise
   have to override in every component.

   The rem values used for this documentation site's own chrome (measure,
   content width, sidebar width, header height) belong to this site, not to
   the design system it documents — the source design system defines no
   container-width tokens at all, so there is nothing under `--gl-*` to reach
   for here. See the header comment in site/shell.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(3.5rem + var(--gl-space-s));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--gl-color-surface-page);
  color: var(--gl-color-text-primary);
  font-family: var(--gl-font-sans);
  font-size: var(--gl-step-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--gl-color-accent-soft);
  color: var(--gl-color-accent-ink);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  height: 1px;
  margin: var(--gl-space-l) 0;
  border: 0;
  background: var(--gl-color-border-hairline);
}

/* One focus ring, defined once. No component is allowed its own. */
:focus-visible {
  outline: 2px solid var(--gl-color-accent);
  outline-offset: 2px;
  border-radius: var(--gl-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

.gl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}