:root {
  --border-thin: 0.2rem;
  --form-field-height: 2rem;
  --font-headings: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-ratio: 1.33;
  --font-line-height: 1.5;
  --size-300: calc(var(--size-400) / var(--font-ratio));
  --size-400: 1.8rem;
  --size-500: calc(var(--size-400) * var(--font-ratio));
  --size-600: calc(var(--size-500) * var(--font-ratio));
  --size-700: calc(var(--size-600) * var(--font-ratio));
  --size-800: calc(var(--size-700) * var(--font-ratio));
  --size-900: calc(var(--size-800) * var(--font-ratio));
  --space: 0.2rem;
  --border-radius: 0.3rem;
  --animation-time-short: 125ms;
  --animation-time-medium: 250ms;
  --animation-time-long: 360ms;
  --box-shadow-small: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-extra-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --measure: 60ch;
}
:root {
  --black: #000;
  --white: #fff;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --warmGray-50: #fafaf9;
  --warmGray-100: #f5f5f4;
  --warmGray-200: #e7e5e4;
  --warmGray-300: #d6d3d1;
  --warmGray-400: #a8a29e;
  --warmGray-500: #78716c;
  --warmGray-600: #57534e;
  --warmGray-700: #44403c;
  --warmGray-800: #292524;
  --warmGray-900: #1c1917;
  --trueGray-50: #fafafa;
  --trueGray-100: #f5f5f5;
  --trueGray-200: #e5e5e5;
  --trueGray-300: #d4d4d4;
  --trueGray-400: #a3a3a3;
  --trueGray-500: #737373;
  --trueGray-600: #525252;
  --trueGray-700: #404040;
  --trueGray-800: #262626;
  --trueGray-900: #171717;
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
}
html {
  font-size: 62.5%;
}
body {
  background: var(--color-background);
  color: var(--color-text);
  line-height: var(--font-line-height);
  font-family: var(--font-body);
  font-size: var(--size-400);
}
a:not([class]) {
  color: var(--color-interactive);
}
:focus {
  outline: var(--color-focus-outline) 2px dashed;
  outline-offset: 0.16rem;
}
main:focus {
  outline: 0;
}
[href]:hover {
  text-decoration: none;
}
strong {
  font-weight: 600;
}
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like {
  font-family: var(--font-headings);
  line-height: 1.3;
}
h1,
.h1-like,
h2,
.h2-like {
  font-weight: 900;
}
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like {
  font-weight: 600;
}
h1,
.h1-like {
  font-size: var(--size-800);
}
h2,
.h2-like {
  font-size: var(--size-700);
}
h3,
.h3-like {
  font-size: var(--size-600);
}
h4,
.h4-like {
  font-size: var(--size-500);
}
h5,
.h5-like {
  font-size: var(--size-400);
}
p,
li {
  font-size: var(--size-400);
}
img {
  max-width: calc(min(var(--measure), 100%));
  height: auto;
}
.text-container p,
.text-container li,
.text-container pre {
  max-width: var(--measure);
}
.text-container h1,
.text-container .h1-like {
  max-width: calc(var(--measure) / 4);
}
.text-container h2,
.text-container .h2-like {
  max-width: calc(var(--measure) / 2.9);
}
.text-container h3,
.text-container .h3-like {
  max-width: calc(var(--measure) / 1.85);
}
.text-container h4,
.text-container .h4-like,
.text-container h5,
.text-container .h5-like {
  max-width: var(--measure);
}
figcaption {
  font-size: var(--size-300);
  font-style: italic;
  margin-top: 1rem;
}
blockquote {
  padding-left: var(--size-600);
  border-left: 5px solid;
  font-style: italic;
}
::-moz-selection {
  color: #fff;
  background: rgba(0, 0, 0, 0.99);
}
::selection {
  color: #fff;
  background: rgba(0, 0, 0, 0.99);
}
table {
  color: var(--color-text);
}
pre {
  max-height: 36em;
  overflow-y: auto;
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
  padding: 1.2rem;
}
code {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
  border-radius: var(--border-radius);
  line-height: 1.1;
  vertical-align: middle;
  font-size: 0.9em;
}
@media (min-width: 45em) {
  :root {
    --size-400: 2.1rem;
  }
}
table {
  border-collapse: collapse;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}
.table thead {
  text-align: left;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border-light);
  font-weight: 600;
}
.table td,
.table th {
  padding: 0.8rem;
  vertical-align: top;
  border-top: 1px solid var(--color-border-light);
}
.button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  font-size: var(--size-400);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  color: var(--color-text);
  outline-color: var(--color-text);
  transition: color var(--animation-time-short) ease-in-out,
    background-color var(--animation-time-short) ease-in-out,
    border-color var(--animation-time-short) ease-in-out,
    box-shadow var(--animation-time-short) ease-in-out;
}
.button--small {
  font-size: var(--size-400);
  padding: 0.3rem 0.6rem;
}
.button--large {
  font-size: var(--size-600);
  padding: 0.6rem 1.2rem;
}
.button--primary {
  background-color: var(--color-interactive);
  border-color: var(--color-interactive);
  color: var(--color-interactive--reverse);
  outline-color: var(--color-interactive);
}
.button--primary:hover,
.button--primary:focus {
  background-color: var(--color-interactive-dark);
}
.button--success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-interactive--reverse);
  outline-color: var(--color-success);
}
.button--success:hover,
.button--success:focus {
  background-color: var(--color-success-dark);
}
.button--warning {
  background-color: var(--color-warn);
  border-color: var(--color-warn);
  color: var(--color-interactive--reverse);
  outline-color: var(--color-warn);
}
.button--warning:hover,
.button--warning:focus {
  background-color: var(--color-warn-dark);
}
.button--danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-interactive--reverse);
  outline-color: var(--color-error);
}
.button--danger:hover,
.button--danger:focus {
  background-color: var(--color-error-dark);
}
.button--neutral {
  background-color: var(--color-background-dark);
  border-color: var(--color-background-dark);
  color: var(--color-text);
  outline-color: var(--color-text);
}
.button--neutral:hover,
.button--neutral:focus {
  background-color: var(--color-background);
}
.button--reverse {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
  outline-color: var(--color-text);
}
.button--reverse:hover,
.button--reverse:focus {
  background-color: var(--color-text-light);
}
.button--outline {
  background-color: transparent;
}
.button--outline.button--primary {
  color: var(--color-interactive);
}
.button--outline.button--primary:hover,
.button--outline.button--primary:focus {
  background-color: var(--color-interactive);
}
.button--outline.button--success {
  color: var(--color-success);
}
.button--outline.button--success:hover,
.button--outline.button--success:focus {
  background-color: var(--color-success);
}
.button--outline.button--warning {
  color: var(--color-warn);
}
.button--outline.button--warning:hover,
.button--outline.button--warning:focus {
  background-color: var(--color-warn);
}
.button--outline.button--danger {
  color: var(--color-error);
}
.button--outline.button--danger:hover,
.button--outline.button--danger:focus {
  background-color: var(--color-error);
}
.button--outline.button--primary {
  color: var(--color-interactive);
}
.button--outline.button--primary:hover,
.button--outline.button--primary:focus {
  background-color: var(--color-interactive);
}
.button--outline:hover,
.button--outline:focus {
  color: var(--color-interactive--reverse);
}
.button[disabled],
.button:disabled,
.button.disabled,
.button.button--disabled {
  cursor: initial;
  pointer-events: none;
  opacity: 0.62;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--size-400);
  line-height: inherit;
  box-sizing: border-box;
}
select,
input:not([type="checkbox"], [type="button"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]) {
  height: var(--form-field-height);
  padding: 0 0.8rem;
}
select {
  padding: 0 0.4rem;
}
input:is([type="button"], [type="reset"], [type="submit"]),
button:is([type="reset"], [type="submit"]) {
  padding: 0.2rem 0.5rem;
}
textarea {
  padding: 0.2rem 0.4rem;
  resize: vertical;
}
option {
  padding: 0;
  margin: 0;
}
label {
  display: inline-block;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  margin: 0;
  padding: 0;
  font-family: var(--font-headings);
  line-height: 1.3;
  font-weight: 600;
  font-size: var(--size-600);
  max-width: 25ch;
}
.stack {
  --space: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.stack > * + * {
  margin-top: var(--space);
}
.box {
  padding: var(--size-500);
  border: var(--border-thin) solid;
  --color-light: var(--color-background);
  --color-dark: var(--color-text);
  color: var(--color-dark);
  background-color: var(--color-light);
}
.box * {
  color: inherit;
}
.box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}
.center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: var(--measure);
}
.cluster {
  --space: var(--size-500);
  overflow: hidden;
}
.cluster > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: calc(var(--space) / 2 * -1);
}
.cluster > * > * {
  margin: calc(var(--space) / 2);
}
.cluster.cluster--right > * {
  justify-content: flex-end;
}
.with-sidebar {
  overflow: hidden;
}
.with-sidebar > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--size-500) / 2 * -1);
}
.with-sidebar > * > * {
  margin: calc(var(--size-500) / 2);
  flex-grow: 1;
}
.with-sidebar > * > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(55% - var(--size-500));
}
.with-sidebar--right {
  overflow: hidden;
}
.with-sidebar--right > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--size-500) / 2 * -1);
}
.with-sidebar--right > * > * {
  margin: calc(var(--size-500) / 2);
  flex-grow: 1;
}
.with-sidebar--right > * > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(55% - var(--size-500));
}
.switcher > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc((var(--size-500) / 2) * -1);
}
.switcher > * > * {
  flex-grow: 1;
  flex-basis: calc((var(--measure) - (100% - var(--size-500))) * 999);
  margin: calc(var(--size-500) / 2);
}
.switcher > * > :nth-last-child(n + 5),
.switcher > * > :nth-last-child(n + 5) ~ * {
  flex-basis: 100%;
}
.cover {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--size-500);
}
.cover > * {
  margin-top: var(--measure);
  margin-bottom: var(--measure);
}
.cover > :first-child:not(.centered) {
  margin-top: 0;
}
.cover > :last-child:not(.centered) {
  margin-bottom: 0;
}
.cover > .centered {
  margin-top: auto;
  margin-bottom: auto;
}
.grid {
  display: grid;
  grid-gap: var(--size-500);
}
@supports (width: calc(min(12rem, 100%))) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
}
.frame {
  --h: 9;
  --w: 16;
  padding-bottom: calc(var(--h) / var(--w) * 100%);
  position: relative;
}
.frame > * {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.reel {
  display: flex;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--white) var(--black);
}
.reel::-webkit-scrollbar {
  height: 1rem;
}
.reel::-webkit-scrollbar-track {
  background-color: var(--color-text);
}
.reel::-webkit-scrollbar-thumb {
  background-color: var(--color-text);
  background-image: linear-gradient(
    var(--color-text) 0,
    var(--color-text) 0.25rem,
    var(--color-background) 0.25rem,
    var(--color-background) 0.75rem,
    var(--color-text) 0.75rem
  );
}
.reel > * {
  flex: 0 0 auto;
}
.reel > img {
  height: 100%;
  flex-basis: auto;
  width: auto;
}
.reel > * + * {
  margin-left: var(--size-500);
}
.reel.overflowing {
  padding-bottom: var(--size-500);
}
.imposter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.imposter.contain {
  --margin: 0;
  overflow: auto;
  max-width: calc(100% - (var(--margin) * 2));
  max-height: calc(100% - (var(--margin) * 2));
}
.icon {
  width: 0.75em;
  width: 1cap;
  height: 0.75em;
  height: 1cap;
}
.with-icon {
  display: inline-flex;
  align-items: baseline;
}
.with-icon .icon {
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
.text-nowrap {
  white-space: nowrap !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uppercase {
  text-transform: uppercase;
}
.shadow-small {
  box-shadow: var(--box-shadow-small);
}
.shadow-text-small {
  text-shadow: var(--box-shadow-small);
}
.shadow-medium {
  box-shadow: var(--box-shadow-medium);
}
.shadow-text-medium {
  text-shadow: var(--box-shadow-medium);
}
.shadow-large {
  box-shadow: var(--box-shadow-large);
}
.shadow-text-large {
  text-shadow: var(--box-shadow-large);
}
.shadow-extra-large {
  box-shadow: var(--box-shadow-extra-large);
}
.shadow-text-extra-large {
  text-shadow: var(--box-shadow-extra-large);
}
.font-size-300 {
  font-size: var(--size-300);
}
.font-size-400 {
  font-size: var(--size-400);
}
.font-size-500 {
  font-size: var(--size-500);
}
.font-size-600 {
  font-size: var(--size-600);
}
.font-size-700 {
  font-size: var(--size-700);
}
.font-size-800 {
  font-size: var(--size-800);
}
.font-size-900 {
  font-size: var(--size-900);
}
:root,
.theme-default {
  --color-text: var(--warmGray-900);
  --color-text-light: var(--warmGray-700);
  --color-text-lighter: var(--warmGray-600);
  --color-text-dark: var(--warmGray-900);
  --color-background: var(--coolGray-100);
  --color-background-light: var(--coolGray-50);
  --color-background-dark: var(--coolGray-200);
  --color-border: var(--warmGray-400);
  --color-border-light: var(--warmGray-300);
  --color-border-dark: var(--warmGray-500);
  --color-focus-outline: rgba(0, 0, 0, 0.6);
  --color-interactive: var(--pink-400);
  --color-interactive-light: var(--pink-300);
  --color-interactive-lighter: var(--pink-200);
  --color-interactive-dark: var(--pink-500);
  --color-interactive-darker: var(--pink-600);
  --color-interactive--reverse: var(--pink-50);
  --color-success: var(--green-500);
  --color-success-light: var(--green-400);
  --color-success-dark: var(--green-600);
  --color-warn: var(--orange-500);
  --color-warn-light: var(--orange-400);
  --color-warn-dark: var(--orange-600);
  --color-error: var(--red-600);
  --color-error-light: var(--red-500);
  --color-error-dark: var(--red-700);
  background: var(--color-background);
  color: var(--color-text);
}
.theme-dark {
  --color-text: var(--warmGray-100);
  --color-text-light: var(--warmGray-200);
  --color-text-lighter: var(--warmGray-300);
  --color-text-dark: var(--warmGray-100);
  --color-background: var(--warmGray-800);
  --color-background-light: var(--warmGray-900);
  --color-background-dark: var(--warmGray-700);
  --color-border: var(--warmGray-500);
  --color-border-light: var(--warmGray-600);
  --color-border-dark: var(--warmGray-400);
  --color-focus-outline: rgba(255, 255, 255, 0.6);
  --color-interactive: var(--pink-400);
  --color-interactive-light: var(--pink-300);
  --color-interactive-lighter: var(--pink-200);
  --color-interactive-dark: var(--pink-500);
  --color-interactive-darker: var(--pink-600);
  --color-interactive--reverse: var(--pink-50);
  --color-success: var(--green-500);
  --color-success-light: var(--green-600);
  --color-success-dark: var(--green-400);
  --color-warn: var(--orange-500);
  --color-warn-light: var(--orange-600);
  --color-warn-dark: var(--orange-400);
  --color-error: var(--red-600);
  --color-error-light: var(--red-700);
  --color-error-dark: var(--red-500);
  background: var(--color-background);
  color: var(--color-text);
}