html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --c-black: 0,0,0;
  --c-dark: 17,17,17;
  --c-white: 255,255,255;
  --c-teal: 102,255,204;
  --c-yellow: 255,255,0;
  --c-pink: 180,20,240;
  --c-purple: 128,0,255;
  --c-figma-light-border: 240,240,240;
  --c-figma-light-helper-text: 117,117,117;
  --c-figma-dark: 44,44,44;
  --c-figma-dark-border: 68,68,68;
  --c-figma-dark-helper-text: 192,192,192;
}

body {
  --c-primary: rgba(var(--c-dark), 1);
  --c-secondary: rgba(var(--c-dark), .5);
  --c-tertiary: rgba(var(--c-dark), .1);
  --c-bg: rgba(var(--c-white), 1);
  --c-one: rgba(var(--c-teal), 1);
  --c-two: rgba(var(--c-yellow), 1);
  --c-plugin-text: rgba(var(--c-black), 1);
  --c-plugin-bg: rgba(var(--c-white), 1);
  --c-plugin-border: rgba(var(--c-figma-light-border), 1);
  --c-plugin-helper-text: rgba(var(--c-figma-light-helper-text), 1);
  --c-plugin-display-text: rgba(var(--c-black), 1);
  --c-plugin-display-bg: rgba(var(--c-yellow), 1);
  --c-plugin-swatch-fg: rgba(var(--c-dark), 1);
  --c-plugin-swatch-bg: rgba(var(--c-yellow), 1);
}
body .plugin-light {
  display: block;
}
body .plugin-dark {
  display: none;
}

body.dark-mode {
  --c-primary: rgba(var(--c-white), .75);
  --c-secondary: rgba(var(--c-white), .4);
  --c-tertiary: rgba(var(--c-white), .1);
  --c-bg: rgba(var(--c-dark), 1);
  --c-one: rgba(var(--c-pink), 1);
  --c-two: rgba(var(--c-purple), 1);
  --c-plugin-text: rgba(var(--c-white), 1);
  --c-plugin-bg: rgba(var(--c-figma-dark), 1);
  --c-plugin-border: rgba(var(--c-figma-dark-border), 1);
  --c-plugin-helper-text: rgba(var(--c-figma-dark-helper-text), 1);
  --c-plugin-display-text: rgba(var(--c-white), 1);
  --c-plugin-display-bg: rgba(var(--c-dark), 1);
  --c-plugin-swatch-fg: rgba(var(--c-white), 1);
  --c-plugin-swatch-bg: rgba(var(--c-dark), 1);
}
body.dark-mode .plugin-light {
  display: none;
}
body.dark-mode .plugin-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html {
    background: #111;
  }
  body {
    --c-primary: rgba(var(--c-white), .75);
    --c-secondary: rgba(var(--c-white), .4);
    --c-tertiary: rgba(var(--c-white), .1);
    --c-bg: rgba(var(--c-dark), 1);
    --c-one: rgba(var(--c-pink), 1);
    --c-two: rgba(var(--c-purple), 1);
    --c-plugin-text: rgba(var(--c-white), 1);
    --c-plugin-bg: rgba(var(--c-figma-dark), 1);
    --c-plugin-border: rgba(var(--c-figma-dark-border), 1);
    --c-plugin-helper-text: rgba(var(--c-figma-dark-helper-text), 1);
    --c-plugin-display-text: rgba(var(--c-white), 1);
    --c-plugin-display-bg: rgba(var(--c-dark), 1);
    --c-plugin-swatch-fg: rgba(var(--c-white), 1);
    --c-plugin-swatch-bg: rgba(var(--c-dark), 1);
  }
  body .plugin-light {
    display: none;
  }
  body .plugin-dark {
    display: block;
  }
  body.light-mode {
    --c-primary: rgba(var(--c-dark), 1);
    --c-secondary: rgba(var(--c-dark), .5);
    --c-tertiary: rgba(var(--c-dark), .1);
    --c-bg: rgba(var(--c-white), 1);
    --c-one: rgba(var(--c-teal), 1);
    --c-two: rgba(var(--c-yellow), 1);
    --c-plugin-text: rgba(var(--c-black), 1);
    --c-plugin-bg: rgba(var(--c-white), 1);
    --c-plugin-border: rgba(var(--c-figma-light-border), 1);
    --c-plugin-helper-text: rgba(var(--c-figma-light-helper-text), 1);
    --c-plugin-display-text: rgba(var(--c-black), 1);
    --c-plugin-display-bg: rgba(var(--c-yellow), 1);
    --c-plugin-swatch-fg: rgba(var(--c-dark), 1);
    --c-plugin-swatch-bg: rgba(var(--c-yellow), 1);
  }
  body.light-mode .plugin-light {
    display: block;
  }
  body.light-mode .plugin-dark {
    display: none;
  }
}
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, a, code {
  font-size: 21px;
  font-weight: normal;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  padding: 0;
  color: var(--c-primary);
}

h1, h2, h3, h4, h5, h6, p {
  line-height: 120%;
}

* {
  box-sizing: border-box;
}

blockquote {
  font-style: italic;
}

code {
  color: var(--c-secondary);
  text-transform: uppercase;
}

html {
  position: relative;
  background: var(--c-bg);
  overflow-x: hidden;
}

body {
  margin: auto;
  overflow-x: hidden;
  position: relative;
  background: var(--c-bg);
}

main {
  padding-top: 20px;
}

.content {
  width: 100%;
  padding: 0 20px 80px;
  position: relative;
  margin: auto;
  max-width: 640px;
  display: grid;
  grid-row-gap: 80px;
  grid-template-rows: auto;
  z-index: 10;
}
@media (min-width: 1800px) {
  .content {
    grid-row-gap: 100px;
  }
}

section {
  align-self: end;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin-bottom: 40px;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.line-item {
  color: var(--c-primary);
  display: grid;
  box-shadow: inset 0 -1px 0 0 var(--c-tertiary);
  text-decoration: none;
  padding: 4px 0;
  grid-template-columns: 1fr 1fr;
}
.line-item:hover {
  box-shadow: inset 0 -1px 0 0 var(--c-primary);
}

.line-item--header {
  grid-template-columns: 2fr 1fr !important;
}

.line-item--title, .line-item--header {
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.line-item--title h1, .line-item--header h1 {
  max-width: 300px;
}
.line-item--title h2 span, .line-item--header h2 span {
  display: none;
}
@media (min-width: 640px) {
  .line-item--title h2 span, .line-item--header h2 span {
    display: inline;
  }
}
.line-item--title .value, .line-item--header .value {
  justify-self: end;
  align-self: end;
}
.line-item--title .arrow, .line-item--header .arrow {
  padding-left: 4px;
  display: inline-block;
  transform: translateX(-4px);
}
.line-item--title:hover .arrow, .line-item--header:hover .arrow {
  transform: translateX(0);
}

.line-item--title-interior {
  display: grid;
  box-shadow: inset 0 -1px 0 0 var(--c-tertiary);
  align-items: center;
  margin-bottom: 40px;
}
.line-item--title-interior h1 {
  text-align: right;
}
.line-item--title-interior .arrow {
  color: var(--c-secondary);
  transform: translateX(4px);
}
.line-item--title-interior:hover .arrow {
  color: var(--c-primary);
  transform: translateX(0);
}

.line-item--subtitle {
  margin-bottom: 40px;
}
.line-item--subtitle h2 {
  color: var(--c-secondary);
}
.line-item--subtitle:hover h2 {
  color: var(--c-primary);
}

.line-item--mid {
  margin-bottom: 40px;
  display: grid;
}
.line-item--mid .value {
  color: var(--c-secondary);
  text-align: right;
}
@media (min-width: 640px) {
  .line-item--mid {
    display: grid;
    grid-template-columns: 175px 1fr;
  }
  .line-item--mid .value {
    text-align: left;
  }
}
.line-item--mid h2 {
  color: var(--c-secondary);
}
.line-item--mid:hover h2 {
  color: var(--c-primary);
}

.plugin-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.interior .plugin p {
  padding: 0 !important;
}

.plugin {
  user-select: none;
  cursor: pointer;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 500;
  background: var(--c-plugin-bg);
  width: 238px;
  border-radius: 2px;
  height: fit-content;
  box-shadow: 0 2px 2px 0 rgba(var(--c-black), 0.05), 0 4px 6px 0 rgba(var(--c-black), 0.05), 0 8px 10px 0 rgba(var(--c-black), 0.05), 0 14px 18px 0 rgba(var(--c-black), 0.05), 0 26px 32px 0 rgba(var(--c-black), 0.1), 0 0 0 1px rgba(var(--c-black), 0.05);
}
.plugin:hover {
  box-shadow: 0 2px 4px 0 rgba(var(--c-black), 0.1), 0 4px 8px 0 rgba(var(--c-black), 0.1), 0 8px 12px 0 rgba(var(--c-black), 0.05), 0 14px 24px 0 rgba(var(--c-black), 0.05), 0 26px 40px 0 rgba(var(--c-black), 0.15), 0 0 0 1px rgba(var(--c-black), 0.05);
}
.plugin p, .plugin a {
  color: var(--c-plugin-text);
  text-decoration: none;
  line-height: 100% !important;
  font-size: 11px !important;
}
.plugin a {
  cursor: default;
  padding: 6px 8px;
  border-radius: 4px;
  display: inline-block;
}
.plugin a.selected {
  color: var(--c-plugin-text);
  background: var(--c-plugin-border);
}

.plugin-header {
  padding: 16px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  box-shadow: inset 0 -1px 0 0 var(--c-plugin-border);
  align-items: center;
  grid-gap: 8px;
}
.plugin-header p {
  font-weight: 600;
}
.plugin-header .plugin-close {
  justify-self: end;
}

.plugin-display {
  background: var(--c-plugin-display-bg);
  display: block;
  width: 100%;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 -1px 0 0 var(--c-plugin-border);
}
.plugin-display p {
  font-size: 32px !important;
  text-align: center;
  align-self: center;
  color: var(--c-plugin-display-text);
}

.plugin-controls {
  padding: 8px 12px;
  display: grid;
  grid-row-gap: 8px;
}

.plugin-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.plugin-colors .foreground .swatch {
  background: var(--c-plugin-swatch-fg);
}
.plugin-colors .background .swatch {
  background: var(--c-plugin-swatch-bg);
}
.plugin-colors .color {
  width: 89px;
  box-shadow: inset 0 0 0 1px var(--c-plugin-border);
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  padding: 6px;
  border-radius: 2px;
  direction: ltr;
}

.swatch {
  box-shadow: inset 0 0 0 1px rgba(var(--c-black), 0.1);
  display: block;
  height: 16px;
  width: 16px;
  border-radius: 2px;
}

.plugin-ratio {
  display: grid;
  grid-template-columns: 1fr 28px 28px;
  grid-gap: 4px;
}
.plugin-ratio .arrow:last-child {
  transform: scaleY(-1);
}

.score {
  align-items: center;
  padding: 8px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--c-plugin-border);
  display: grid;
}
.score p {
  font-weight: 600;
}
.score span {
  float: right;
  font-weight: normal;
}

.plugin-helper-text p {
  padding: 4px 8px;
  color: var(--c-plugin-helper-text) !important;
}

.contrast-shape {
  position: fixed;
  border-radius: 50%;
  display: block;
}

.contrast-shape-circle-small {
  background: var(--c-one);
  width: 320px;
  height: 320px;
  top: 40px;
  left: 50%;
  transform: translate(-140%, 0);
  z-index: -1;
  animation: float-small 30s infinite ease-in-out;
}

.contrast-shape-circle-big {
  background: var(--c-two);
  width: 1000px;
  height: 1000px;
  top: 120px;
  left: 50%;
  transform: translate(0, 0);
  z-index: -2;
  animation: float 20s infinite ease-in-out;
}

.contrast-shape-interior {
  position: absolute;
  background: var(--c-one);
  width: 320px;
  height: 320px;
  top: 120px;
  left: 50%;
  transform: translate(50%, 0);
  z-index: -1;
  animation: float-interior 30s infinite ease-in-out;
}

@keyframes float-interior {
  0%, 80% {
    transform: translate(50%, 0);
  }
  20%, 60% {
    transform: translate(40%, 40px);
  }
  40% {
    transform: translate(50%, 80px);
  }
}
@keyframes float-small {
  0%, 80% {
    transform: translate(-140%, 0);
  }
  20%, 60% {
    transform: translate(-150%, 40px);
  }
  40% {
    transform: translate(-140%, -40px);
  }
}
@keyframes float {
  0%, 40% {
    transform: translate(0, 0);
  }
  20%, 60% {
    transform: translate(-10%, 40px);
  }
  80% {
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contrast-shape-circle-small,
  .contrast-shape-circle-big,
  .contrast-shape-interior {
    animation: none;
  }
}
.interior {
  padding-bottom: 200px;
}
.interior section {
  padding: 20px 0;
}
.interior p a {
  color: var(--c-primary);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 var(--c-primary);
}
.interior p, .interior ul, .interior ol {
  padding-bottom: 40px;
}
.interior .interior-grid {
  display: grid;
  grid-gap: 0;
}
.interior .interior-grid .interior-grid-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 40px;
  padding-bottom: 0px;
}
.interior .pushed {
  margin-left: 0;
}
@media (min-width: 640px) {
  .interior .pushed {
    margin-left: 180px;
  }
}
.interior .demo-score {
  margin-bottom: 80px;
  display: grid;
  justify-items: center;
  align-items: center;
}
.interior .demo-score p {
  padding: 0 !important;
  font-size: 32px;
}
.interior .contrast-shape-circle-small {
  top: 320px !important;
  right: -120px !important;
  left: unset !important;
}