/* Theme */
:root {
  --theme-primary: #3498db;
  --theme-secondary: #d84547;
  --theme-dark: #2e4b5d;
  --theme-dark-alt: #416073;

  --color-green: #2ecc71;
  --color-orange: #e67e22;
  --color-red: #e74c3c;
  --color-blue: #3498db;
  --color-yellow: #fef08a;

  --color-background-faint-10: rgb(255 255 255 / 10%);
  --color-background-faint-15: rgb(255 255 255 / 15%);
  --color-background-faint-20: rgb(255 255 255 / 20%);
  --color-background-faint-50: rgb(255 255 255 / 50%);
  --color-background-faint-75: rgb(255 255 255 / 75%);

  --color-success: var(--color-green);
  --color-warning: var(--color-orange);
  --color-error: var(--color-red);
  --color-info: var(--color-blue);
  --color-highlight: var(--color-yellow);
  --color-focus: var(--color-blue);

  --transition-duration: 0.2s;
}

/* Basic Reset */
html {
  box-sizing: border-box;
  scroll-padding-top: 175px;
}

html.smooth-scroll {
  scroll-behavior: smooth;
}

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

body {
  min-height: 100%;
  margin: 0;
  background-color: #fefefe;
  color: #555;
  font-family: 'Roboto', sans-serif;
}

/* Typography Styles */
h1,
h2,
h3,
h4,
h5 {
  font-weight: 500;
  margin: 1em 0;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 1.25em;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

@media (min-width: 40em) {

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1rem;
  }
}

small {
  font-size: .875em;
  font-weight: 400;
}

strong {
  font-weight: 500;
}

a {
  color: #4299e1;
  font-weight: 500;
  overflow: visible;
}

a:hover {
  color: #2b6cb0;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
}

.doc-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .35em .5em;
  margin: 0 0 .5em -0.5em;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  border-radius: .15em;
}

.doc-link:hover {
  text-decoration: underline;
}

.doc-link:focus-visible {
  outline-offset: 2px;
}

.doc-link svg {
  margin-left: .25em;
}

a.dashed-link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px dashed #ccc;
}

a.dashed-link:hover,
a.dashed-link:focus {
  border-bottom: 2px dashed var(--color-focus);
}

a.dashed-link:focus-visible {
  outline-offset: 2px;
}

p,
ul,
ol {
  font-size: 18px;
  line-height: 1.6;
}

p {
  margin: 0 0 1em;
}

ul {
  padding: 0 0 0 1.5em;
  margin: 0 0 1.5em;
}

li > ul {
  margin: .5em 0 1em;
}

ol {
  padding: 0 0 0 2em;
  margin: 0 0 1.5em;
}

li {
  margin: 0 0 .5em;
}

.nowrap {
    white-space: nowrap;
}

hr {
  width: 100%;
  border: 0;
  height: 2px;
  margin: 2em 0;
  background-image: linear-gradient(
    to right,
    rgb(255 255 255 / 2.5%),
    var(--theme-secondary),
    rgb(255 255 255 / 2.5%));
}

hr.large {
  margin: 3em 0;
}

hr.faint {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(
        to right,
        rgb(0 0 0 / 2.5%),
        rgb(0 0 0 / 10%),
        rgb(0 0 0 / 2.5%));
}

@media (min-width: 40em) {
  hr {
    margin: 3em 0;
  }

  hr.large {
    margin: 5em 0;
  }
}

.badge {
    display: inline-block;
    background-color: #e0eff9;
    color: var(--theme-dark);
    font-size: .875em;
    font-weight: 400;
    padding: .25em .5em;
    border-radius: 100em;
}

pre,
code {
  font-family: 'Consolas', monospace;
}

pre {
  white-space: pre;
}

code {
  display: inline-block;
  font-size: 18px;
  line-height: 1.5;
  padding: 0 .25em;
  background-color: rgb(0 0 0 / 7.5%);
  word-break: break-all;
}

code.bold,
code.bold a {
  font-weight: 600;
}

code.medium {
  font-size: 19px;
  font-weight: 600;
  padding: .25em .5em;
}

code.large {
  font-size: 20px;
  font-weight: 400;
  padding: .25em .5em;
}

code.light {
  background-color: #fff;
}

code.dark {
  background-color: #e5e5e5;
}

code.expand {
    width: 100%;
}

code.scrollable {
    display: inline-flex;
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    scrollbar-width: thin;
}

code a,
code a:hover {
  color: #2b70b0;
}

.success-message {
  color: var(--color-success);
  filter: brightness(80%);
}

.warning-message {
  color: var(--color-warning);
}

.error-message {
  color: var(--color-error);
}

.info-message {
  color: var(--color-info);
}

.note-box {
  padding: 1.5em;
  background-color: rgba(255,255,255,.75);
  border: 2px solid #ddd;
}

.note-box *:first-child {
  margin-top: 0;
}

.note-box *:last-child {
  margin-bottom: 0;
}

.note-box.note-compact {
  display: inline-block;
  padding: .5em .75em;
  background: rgba(0,0,0,.05);
  border: none;
}

.tip-box {
  display: inline-block;
  padding: .75em 1em;
  background-color: rgba(255,255,255,.75);
  border: 2px solid #ffc107;
  border-radius: 3px;
}

.code-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 30em;
  padding: 1em;
  margin: 0 0 2em;
  background-color: #eee;
  word-wrap: normal;
}

.code-scroll.small {
  max-height: 20em;
}

.scroll-container {
  overflow-x: auto;
}

svg.icon {
  display: block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  fill: currentcolor;
}

svg.icon.inline-left {
  margin-right: .15em;
}

svg.icon.inline-right {
  margin-left: .15em;
}

/* Buttons */
button,
.button {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-blue);
  color: #fff;
  padding: .75em 1em;
  width: auto;
  margin: .5em 1em .5em 0;
  border: 0;
  border-radius: .5em;
  font-size: 1.2em;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: filter .25s ease;
}

button:hover,
.button:hover {
  color: #fff;
  filter: brightness(110%);
}

button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

button.alt,
.button.alt {
  background-color: #e0eff9;
  color: var(--color-info);
}

button.alt:hover,
.button.alt:hover {
  color: var(--color-info);
  filter: brightness(95%);
}

button.green,
.button.green {
  background-color: var(--color-green);
}

button.orange,
.button.orange {
  background-color: var(--color-orange);
}

button.red,
.button.red {
  background-color: var(--color-red);
}

button.success,
.button.success {
  background-color: var(--color-success);
}

button.warning,
.button.warning {
  background-color: var(--color-warning);
}

button.error,
.button.error {
  background-color: var(--color-error);
}

button svg,
.button svg {
  margin-right: .5em;
}

button.link-button {
  position: relative;
  display: block;
  padding: 0;
  margin: 0 0 1em;
  background: none;
  color: inherit;
  text-decoration: underline;
  font-size: 1em;
}

button.link-button:before {
  content: '';
  position: absolute;
  top: -0.5em;
  left: -0.5em;
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  border-radius: .25em;
}

button.link-button:hover {
  text-decoration: none;
}

button.link-button:focus-visible {
  outline: none;
}

button.link-button:focus-visible:before {
  outline: 2px solid var(--color-focus);
}

/* Form Styles */
label {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: .25em;
}

input[type="text"],
input[type="number"],
input[type="password"] {
  display: block;
  margin: 0 0 1em;
  border: 2px solid #bbb;
  padding: .5em .75em;
  line-height: 1.5;
  font-size: 1em;
  border-radius: .25em;
}

select {
  display: block;
  width: auto;
  max-width: 100%;
  padding: 1em 2.5em 1em 1em;
  margin: 0 0 2em;
  font-size: 1em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23444' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right .5em center;
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
  border: 2px solid #bbb;
  border-radius: .25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible {
  border: 2px solid var(--color-focus);
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

input:disabled,
select:disabled,
button:disabled {
    opacity: 50%;
    pointer-events: none;
}

/* Header */
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--theme-dark);
}

header .logo {
  width: 12em;
  min-width: 12em;
  padding: .75em;
  transition: opacity .2s ease;
}

header .logo:hover {
  opacity: .75;
}

header .logo:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

header .logo img {
  display: block;
  width: 100%;
}

header .menu-toggle {
  display: inline-flex;
  align-self: center;
  padding: .75em;
  margin: 0 .5em 0 0;
  border: 0;
  border-radius: .5em;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: #fff;
  font-size: 1em;
  transition: background-color .25s ease;
}

header .menu-toggle:hover,
header .menu-toggle:active {
  background: rgba(255, 255, 255, .05);
}

header .menu-toggle svg {
  font-size: 1.5em;
}

header input.menu-state {
  position: absolute;
  display: none;
}

@media (min-width: 60em) {

  header {
    border-top: 3px solid var(--theme-secondary);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  }

  header .logo {
    padding: 1em;
  }

  header .menu-toggle {
    display: none;
  }

}

@media (min-width: 80em) {

  header .logo {
    margin-right: .5em;
  }

}

/* Main Nav */
header .main-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 75em;
  margin: 0 auto;
  background-color: var(--theme-dark);
  border-top: 3px solid var(--theme-secondary);
}

header .main-nav ul {
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1em;
  background-color: var(--theme-dark);
  max-height: calc(80vh - 70px);
  overflow-y: auto;
}

header input.menu-state:checked + ul {
  display: flex;
}

header .main-nav li {
  width: 100%;
  margin: 0;
}

header .main-nav li svg {
  font-size: 1.25em;
  margin-right: .25em;
  margin-top: -0.1em;
  opacity: .5;
}

header .main-nav li a {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .8);
  padding: .75em;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  transition: background-color .25s ease, color .25s ease;
}

header .main-nav li a:hover {
  background-color: var(--theme-secondary);
  color: #fff;
}

header .main-nav li a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

header .main-nav li a.current {
  font-weight: 500;
  border-left: 5px solid var(--theme-secondary);
}

@media (min-width: 60em) {

  header .main-nav {
    position: static;
    flex-wrap: nowrap;
    width: auto;
    border: none;
  }

  header .main-nav ul {
    position: static;
    display: flex;
    max-height: none;
    background: none;
  }

  header .main-nav li {
    width: auto;
  }
  header .main-nav li:first-child {
    display: none;
  }

  header .main-nav li a.current {
    position: relative;
    border-left: 0;
    color: #fff;
  }
  header .main-nav li a.current::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--theme-secondary);
  }
}

@media (min-width: 80em) {

  header .main-nav li a {
    padding: .75em 1em;
  }

  header .main-nav li:first-child {
    display: block;
  }
}

/* Mobile Sub Nav Toggle */
.sub-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .8em;
  margin: 0;
  cursor: pointer;
  font-size: 1em;
  background-color: #416073;
  color: #fff;
  transition: background-color .25s ease;
}

.sub-nav-toggle:hover,
.sub-nav-toggle:active,
.sub-nav-toggle:focus {
  background-color: rgba(0, 0, 0, .1);
}

.sub-nav-toggle span {
  font-size: 1em;
}

.sub-nav-toggle + input {
  display: none;
}

.sub-nav-toggle svg {
  margin-right: .5em;
}

/* Sub Nav */
nav.sub-nav,
nav.sub-nav ul {
  background-color: var(--theme-dark-alt);
}

nav.sub-nav {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: none;
  text-align: left;
}

nav.sub-nav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1em;
  max-height: calc(80vh - 135px);
  overflow-y: auto;
}

.sub-nav-toggle + input:checked + ul {
  display: inline-flex;
}

nav.sub-nav li {
  width: 100%;
  margin: 0;
}

nav.sub-nav a {
  display: block;
  padding: .75em 1em;
  color: rgba(255, 255, 255, .8);
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

nav.sub-nav a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

nav.sub-nav a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .05);
}

nav.sub-nav a.current {
  color: #fff;
  font-weight: 500;
  background-color: rgba(255, 255, 255, .1);
}

@media (min-width: 40em) {
  nav.sub-nav li {
    width: 50%;
  }
}

@media (min-width: 60em) {

  .sub-nav-toggle {
    display: none;
  }

  nav.sub-nav {
    text-align: center;
  }

  nav.sub-nav ul {
    position: static;
    display: inline-flex;
    width: auto;
    margin: 0 auto;
    background: none;
    max-height: none;
  }

  nav.sub-nav li {
    width: auto;
  }

  nav.sub-nav a {
    padding: .65em .7em;
  }
}

/* Login Notice */
.login-notice {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: 1em;
  padding: 1em;
  padding-right: 1.5em;
  background-color: var(--color-warning);
  border-radius: 0.5em;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (min-width: 40em) {
    .login-notice {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.login-notice .title {
    margin: 0 0 .25em;
}

.login-notice .message {
    margin: 0;
    line-height: 1.4;
}

.login-notice a {
    margin: 0;
    padding: 0.25em 1em;
    font-size: 1em;
    background-color: #fff;
    color: #000;
    transition: background-color var(--transition-duration) ease;
}

.login-notice a:hover {
    background-color: var(--color-background-faint-75);
    color: #000;
}

/* Example Controls */
.example-controls {
    width: 25em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    border: 2px solid rgb(0 0 0 / 20%);
    border-radius: 0.5em;
}

.example-controls label {
    margin-bottom: .25em;
}

.example-controls select {
    width: 100%;
    margin: 0;
}

.example-controls button {
    justify-content: center;
    margin: 0;
}

/* Page Container */
.intro {
  background-color: #eee;
  padding: 2em 0 1em;
}

@media (min-width: 40em) {
  .intro {
    padding: 3em 0 1em;
  }
}

@media (min-width: 60em) {
  .intro {
    padding: 5em 0 3em;
  }
}

main {
  min-height: 50vh;
  margin: 2em auto;
}

@media (min-width: 40em) {
  main {
    margin: 4em auto 5em;
  }
}

.row {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* Footer */
footer {
  padding: 1.5em;
  text-align: center;
  background-color: var(--theme-secondary);
  color: #fff;
}

/* Code Previews */
.code-preview {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: rgba(0,0,0,.075);
  border-radius: .5em;
}

.code-preview.open {
  height: auto;
  padding: 1em;
  margin: -1em 0 3em;
  overflow: visible;
}

.code-preview.inline.open {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.code-preview .hidden {
  height: 0;
  overflow: hidden;
}

.code-preview button {
  display: none; /* Hide from tab order when closed */
}
.code-preview.open button {
  display: inline-flex;
}

.code-preview > button {
  font-size: 1em;
  padding: .25em .5em;
  margin: 0 .25em .5em 0;
  background-color: transparent;
  border: 2px solid rgba(0,0,0,.15);
  color: #444;
  border-radius: .25em;
  transition: none;
}

.code-preview > button:hover {
  background-color: #ccc;
}

.code-preview > button.active {
  background-color: var(--color-info);
  color: #fff;
  border-color: var(--color-info);
  pointer-events: none;
}

.code-preview pre {
  display: block;
  position: relative;
  margin: 1em 0 0;
}

.code-preview pre:first-child {
  margin-top: 0;
}

.code-preview pre::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: .25em .5em .2em;
  font-size: 13px;
  background-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  border-bottom-right-radius: .25em;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.code-preview pre.language-javascript::before {
  content: 'JavaScript';
}

.code-preview pre.language-html::before {
  content: 'HTML';
}

.code-preview pre.language-css::before {
  content: 'CSS';
}

.code-preview pre.language-xml::before {
  content: 'XML';
}

.code-preview pre.config-preview::before {
  content: 'config.js';
  text-transform: none
}

.code-preview code {
  width: 100%;
  font-size: 1rem;
  line-height: 1.3;
  padding: 2.5em 1em 1em;
  word-break: normal;
  border-radius: .25em;
  background-color: #1e1e1e;
  color: #fff;
}

.code-preview .copy-button {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: .3em .75em;
  font-size: .875em;
  font-weight: 600;
  margin: .5em;
  background-color: rgba(255,255,255,.15);
  border: 2px solid;
  border-color: transparent;
  color: #fff;
  transition: none;
}

.code-preview .copy-button:hover {
  background-color: rgba(255,255,255.9);
  color: #444;
}

.code-preview .copy-button.copy-success,
.code-preview .copy-button.copy-error {
  background-color: transparent;
  pointer-events: none;
  color: #fff;
}

.code-preview .copy-button.copy-success {
  border-color: var(--color-success);
}

.code-preview .copy-button.copy-error {
  border-color: var(--color-error);
}

button.code-toggle {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #444;
  font-size: 15px;
  padding: .35em .5em;
  border: 2px solid rgba(0,0,0,.15);
  margin: 0 0 2em;
  transition: none;
}

button.code-toggle:hover {
  border: 2px solid transparent;
  background-color: rgba(0,0,0,.15);
  color: #444;
}

button.code-toggle span {
  margin-right: .25em;
}

button.code-toggle svg {
  margin-right: .5em;
}

.code-heading {
  display: flex;
  flex-wrap: wrap;
  margin: 2em 0 1.5em;
}

.code-heading h2 {
  width: 100%;
  margin: 0 0 1.25rem 0;
}

.code-heading .code-toggle {
  margin: 0 1em .5em 0;
}

.code-heading .code-preview.open {
  margin: 1em 0 .5em;
}

.code-preview .share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1em;
  margin: .75em 1em 0 0;
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(104, 63, 63, 0.1);
  color: #000;
}

.code-preview .share-button:hover {
  background-color: rgba(0,0,0,.15);
  filter: none;
}

.code-preview .share-button .icon {
  margin: 0;
}

.code-preview .share-button::before {
  position: absolute;
  bottom: 100%;
  right: 0;
  padding: .25em .35em;
  margin-bottom: .25em;
  color: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .1em;
  white-space: nowrap;
  pointer-events: none;
}

.code-preview .share-button.copy-success::before {
  content: "Share link copied";
  background: var(--color-success);
}

.code-preview .share-button.copy-error::before {
  content: "Error copying link";
  background: var(--color-error);
}

.hidden-clipboard-input {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Simple Table */
table.simple-table {
  border-collapse: collapse;
}

table.simple-table th,
table.simple-table td {
  border: 2px solid #ddd;
  padding: .5em;
  text-align: left;
}

table.simple-table th {
  background: #eee;
  font-weight: 500;
}

/* Fancy Tables */
table.fancy-table {
  border: 2px solid var(--theme-dark-alt);
  border-spacing: 0;
  margin: 1em 0 0;
  text-align: left;
}

table.fancy-table thead {
  background-color: var(--theme-dark-alt);
  color: #fff;
}

table.fancy-table thead th {
  padding: .75rem 1rem;
  font-weight: 500;
}

table.fancy-table tr:nth-child(even) {
  background-color: #ddd;
}

table.fancy-table td {
  padding: 1rem;
  border: 1px solid #ccc;
  min-width: 10em;
  transition:
    background-color .25s ease .2s,
    color .25s ease .2s,
    border .25s ease .2s;
}

table.fancy-table tr.highlight td {
  background-color: var(--color-info);
  color: #fff;
  border-color: rgba(0,0,0,.1);
}

/* Tile Grid (Flex) */
.tile-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 2em -0.25em;
}

.tile-grid .tile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 25%;
  padding: 1.5em;
  margin: .25em;
  text-align: center;
  background-color: var(--theme-primary);
  color: #fff;
  font-size: 1.4em;
  font-weight: 500;
  text-decoration: none;
  border-radius: .25em;
  transition: filter .2s ease;
}

.tile-grid .tile-link:hover {
  filter: brightness(110%);
  color: #fff;
}

.tile-grid .tile-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Example Grid */
.example-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 2em -0.25em;
}

.grid-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 calc(50% - .5em);
  margin: .25em;
  border-radius: .25em;
}

/* Markdown Preview */
.markdown-preview {
  position: relative;
  border: 2px solid rgba(0,0,0,.1);
  padding: 2em 1em 1em;
  margin-bottom: 2em;
  border-radius: .5em;
  overflow: auto;
}

@media (min-width: 40em) {
  .markdown-preview {
    padding: 3em 2em 2em;
  }
}

.markdown-preview::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0 .5em .25em;
  font-size: 13px;
  background-color: rgba(0, 0, 0, .1);
  color: #000;
  border-bottom-right-radius: .25em;
  letter-spacing: .1em;
}

.markdown-preview.readme::before {
  content: 'README.md';
}

.markdown-preview hr {
  border: 1px solid rgba(0,0,0,.1);
}

.markdown-preview > button {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: .75em;
  margin: .25em;
  color: inherit;
  border-radius: .15em;
  background-color: transparent;
  transition: opacity .25s ease;
}

.markdown-preview > button:hover {
  opacity: .75;
}

.markdown-preview > button svg {
  font-size: .75em;
  margin: 0;
}

/* Heading Anchor Links */
h2[id],
h3[id],
h4[id] {
  outline: .25em solid transparent;
  transition:
    background-color .25s ease,
    outline .25s ease;
}

h2[id].is-highlighted,
h3[id].is-highlighted,
h4[id].is-highlighted {
 background-color: var(--color-highlight);
 outline: .25em solid var(--color-highlight);
}

h2[id].has-anchor,
h3[id].has-anchor,
h4[id].has-anchor {
  position: relative;
  display: flex;
  align-items: start;
}

.heading-anchor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: .1em .25em 0 0;
  color: rgba(0,0,0,.15);
  border-radius: .25em;
  font-size: 1em;
}

.heading-anchor-link:hover {
  color: var(--color-info);
}

@media (min-width: 70em) {
  .heading-anchor-link {
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    padding: 0 .1em;
    margin: 0 .25em 0 0;
  }
}

/* Utilities */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.inline-flex {
  display: inline-flex;
  align-items: center;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hidden,
[hidden] {
  display: none !important;
}

.gap-xsmall {
    gap: .25em;
}

.gap-small {
    gap: .5em;
}

.gap {
    gap: 1em;
}

.gap-large {
    gap: 1.5em;
}

.gap-xlarge {
    gap: 2em;
}

.align-normal {
  align-items: normal;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: start;
}

.align-end {
  align-items: end;
}

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

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-large {
  font-size: 1.25rem;
}

.text-xlarge {
  font-size: 1.5rem;
}

.line-height-1 {
  line-height: 1;
}

.margin-none {
  margin: 0;
}

.margin-y {
  margin: 0 1.5em;
}

.margin-y-large {
  margin: 0 2em;
}

.margin-y-xlarge {
  margin: 0 3em;
}

.margin-top-xsmall {
  margin-top: .25em;
}

.margin-top-small {
  margin-top: .5em;
}

.margin-top {
  margin-top: 1.5em;
}

.margin-top-large {
  margin-top: 2em;
}

.margin-top-xlarge {
  margin-top: 3em;
}

.margin-bottom-xsmall {
  margin-bottom: .25em;
}

.margin-bottom-small {
  margin-bottom: .5em;
}

.margin-bottom {
  margin-bottom: 1.5em;
}

.margin-bottom-large {
  margin-bottom: 2em;
}

.margin-bottom-xlarge {
  margin-bottom: 3em;
}