:root {
  /* `transparent` sometimes renders as a dark shade when used
   * in gradients in some browsers.  Having a variable based
   * on rgba fixes this and makes it convienient to use
   * everywhere.
   * https://stackoverflow.com/a/56548711
   *
   * TODO: Just use RGB instead of HEX
   * https://stackoverflow.com/a/41265350
   */
  --color-transparent: rgba(255, 255, 255, 0);
  --color-gray-darken-20-transparent: rgba(45, 46, 53, 0.2);

  /* Brand colors */
  --color-brand-bright-red: #ff4756;
  --color-brand-orange: #ff8800;
  --color-brand-yellow: #ffc41f;
  --color-brand-purple: #8f228f;
  --color-brand-dark-purple: #520066;

  /* Grays */
  --color-gray-darken-10: #41424b;
  --color-gray-darken-20: #2d2e35;
  --color-gray-darken-25: #22232a;
  --color-gray-darken-30: #18181c;

  --color-gray-base: #515258;

  --color-gray-lighten-20: #818286;
  --color-gray-lighten-30: #bdbfc6;
  --color-gray-lighten-40: #d1d5dc;
  --color-gray-lighten-45: #d9e0e7;
  --color-gray-lighten-50: #e4eaf3;
  --color-gray-lighten-55: #f1f3f5;
  --color-gray-lighten-60: #fafafb;
  --color-gray-lighten-100: #ffffff;

  /* Pinks */
  --color-pink-0: #e51022;
  --color-pink-0-25pct: rgba(229, 16, 34, 0.25);
  --color-pink-1: #ff4756;
  --color-pink-1-25pct: rgba(255, 71, 86, 0.25);
  --color-pink-2: #ff6c78;
  --color-pink-3: #ff9ba3;
  --color-pink-4: #ffc1c6;
  --color-pink-5: #feeef0;

  /* Greens */
  --color-green-0: #10733A;
  --color-green-1: #27ae60;
  --color-green-2: #52d188;
  --color-green-3: #88f3b5;
  --color-green-4: #C6FFDE;
  --color-green-5: #E8F8EF;

  /* Blues */
  --color-blue-1: #225ebe;
  --color-blue-2: #5695f4;
  --color-blue-3: #9ec5ff;
  --color-blue-4: #cbe0ff;
  --color-blue-5: #ecf2fa;

  /* Oranges */
  --color-orange-1: #ff8800;
  --color-orange-2: #ffc41f;
  --color-orange-3: #ffe08b;
  --color-orange-4: #ffeebe;
  --color-orange-5: #fff7df;

  /* Purples */
  /* TODO: SHIFT THESE, 1 should be 0, 2 should be 1 etc.. */
  --color-purple-1: #55377b;
  --color-purple-2: #734da3;
  --color-purple-3: #9a76c8;
  --color-purple-3-25pct: rgba(198, 168, 236, 0.25);
  --color-purple-4: #c6a8ec;
  --color-purple-5: #e2ccfd;
  --color-purple-6: #f1e5ff;
}
 
:root {
  --color-main-fg: var(--color-gray-darken-20);
  --color-main-mg: var(--color-gray-base);
  --color-main-bg: var(--color-gray-lighten-100);
  --color-main-subtle-fg: var(--color-gray-lighten-30);
  --color-main-subtle-fg-em: var(--color-gray-lighten-20);
  --color-main-subtle-bg: var(--color-gray-lighten-60);
  --color-main-border: var(--color-gray-lighten-40);
  --color-main-subtle-border: var(--color-gray-lighten-50);
  --color-main-divider: var(--color-gray-lighten-55);
  --color-main-focus-fg: var(--color-blue-2);
  --color-main-focus-bg: var(--color-blue-2);
  --color-main-alert: var(--color-pink-1);
  --color-main-mark-fg: var(--color-blue-2);
  --color-main-mark-bg: var(--color-transparent);

  /* Layout */
  --color-main-header-fg: var(--color-gray-lighten-20);
  --color-main-header-bg: var(--color-gray-lighten-100);
  --color-main-header-subtle-fg: var(--color-gray-lighten-40);
  --color-main-header-subtle-fg-em: var(--color-gray-lighten-30);
  --color-main-header-border: var(--color-transparent);
  --color-main-header-current-fg: var(--color-gray-darken-10);
  --color-main-header-logo-hover: var(--color-pink-1);

  --color-main-content-fg: var(--color-gray-darken-20);
  --color-main-content-mg: var(--color-gray-base);
  --color-main-content-bg: var(--color-gray-lighten-100);

  /* Doc */
  --color-doc-fg: var(--color-gray-darken-20);
  --color-doc-heading-fg: var(--color-gray-darken-10);
  --color-doc-bg: var(--color-gray-lighten-100);
  --color-doc-aside-bg: var(--color-gray-lighten-60);
  --color-doc-aside-source-bg: var(--color-gray-lighten-55);
  --color-doc-callout-bg: var(--color-blue-5);
  --color-doc-callout-source-bg: var(--color-gray-lighten-50);
  --color-doc-subtle-fg: var(--color-gray-lighten-30);
  --color-doc-source-bg: var(--color-gray-lighten-60);
  --color-doc-source-mg: var(--color-gray-lighten-45);
  --color-doc-fold-hover-fg: var(--color-gray-base);
  --color-doc-fold-hover-bg: var(--color-gray-lighten-45);
  --color-doc-link: var(--color-blue-1);
  --color-doc-link-active: var(--color-pink-1);
  --color-doc-link-hover: var(--color-pink-2);
  --color-doc-content-border: var(--color-gray-lighten-50);
  --color-doc-index-fg: var(--color-gray-lighten-20);
  --color-doc-index-current-fg: var(--color-gray-base);
  --color-doc-index-hover-fg: var(--color-pink-2);

  /* Modal */
  --color-modal-fg: var(--color-main-fg);
  --color-modal-mg: var(--color-gray-lighten-60);
  --color-modal-bg: var(--color-gray-lighten-100);
  --color-modal-inner-border: var(--color-gray-lighten-50);
  --color-modal-separator: var(--color-gray-lighten-55);
  --color-modal-shadow: rgba(24, 24, 28, 0.2); /* 20% gray-darken-30 */
  --color-modal-overlay: rgba(24, 24, 28, 0.5); /* 50% gray-darken-30 */
  --color-modal-border: var(--color-transparent);
  --color-modal-subtle-fg: var(--color-main-subtle-fg);
  --color-modal-subtle-fg-em: var(--color-gray-lighten-20);
  --color-modal-subtle-mg: var(--color-gray-lighten-55);
  --color-modal-subtle-bg: var(--color-gray-lighten-60);
  --color-modal-focus-fg: var(--color-main-fg);
  --color-modal-focus-bg: var(--color-gray-lighten-55);
  --color-modal-focus-subtle-fg: var(--color-gray-base);
  --color-modal-focus-subtle-bg: var(--color-gray-lighten-50);
  --color-modal-title-fg: var(--color-gray-lighten-20);
  --color-modal-title-bg: var(--color-transparent);
  --color-modal-mark-fg: var(--color-blue-2);
  --color-modal-mark-bg: var(--color-transparent);
  --color-modal-error-fg: var(--color-pink-1);

  /* Keyboard shortcut */
  --color-keyboard-shortcut-key-fg: var(--color-gray-base);
  --color-keyboard-shortcut-key-bg: var(--color-gray-lighten-50);
  --color-keyboard-shortcut-then: var(--color-gray-lighten-20);
  --color-keyboard-shortcut-separator: var(--color-gray-lighten-30);

  /* Icons */
  --color-icon-type: var(--color-orange-1);
  --color-icon-data-constructor: var(--color-orange-1);
  --color-icon-test: var(--color-green-1);
  --color-icon-term: var(--color-purple-3);
  --color-icon-ability: var(--color-pink-1);
  --color-icon-ability-constructor: var(--color-pink-1);
  --color-icon-doc: var(--color-orange-2);
  --color-icon-patch: var(--color-blue-2);

  /* FoldToggle */

  --color-fold-toggle-fg: var(--color-gray-lighten-30);
  --color-fold-toggle-bg: var(--color-transparent);
  --color-fold-toggle-hover-fg: var(--color-gray-base);
  --color-fold-toggle-hover-bg: var(--color-gray-lighten-45);

  /* Buttons */

  --color-button-default-fg: var(--color-main-fg);
  --color-button-default-bg: var(--color-gray-lighten-50);
  --color-button-default-hover-fg: var(--color-main-fg);
  --color-button-default-hover-bg: var(--color-gray-lighten-40);

  --color-button-primary-mono-fg: var(--color-gray-lighten-60);
  --color-button-primary-mono-bg: var(--color-gray-darken-20);
  --color-button-primary-mono-hover-fg: var(--color-gray-lighten-60);
  --color-button-primary-mono-hover-bg: var(--color-gray-darken-10);

  --color-button-primary-fg: var(--color-gray-lighten-60);
  --color-button-primary-bg: var(--color-blue-2);
  --color-button-primary-hover-fg: var(--color-gray-lighten-60);
  --color-button-primary-hover-bg: var(--color-blue-1);

  --color-button-share-fg: var(--color-purple-1);
  --color-button-share-bg: var(--color-purple-4);
  --color-button-share-hover-fg: var(--color-purple-2);
  --color-button-share-hover-bg: var(--color-purple-4);

  --color-button-danger-fg: var(--color-gray-lighten-100);
  --color-button-danger-bg: var(--color-pink-1);
  --color-button-danger-hover-fg: var(--color-gray-lighten-100);
  --color-button-danger-hover-bg: var(--color-pink-2);

  /* Badges */
  --color-badge-fg: var(--color-gray-base);
  --color-badge-bg: var(--color-gray-lighten-60);
  --color-badge-border: var(--color-gray-lighten-50);

  --color-option-badge-fg: var(--color-gray-lighten-40);
  --color-option-badge-subtle-fg: var(--color-gray-lighten-20);
  --color-option-badge-icon: var(--color-gray-lighten-30);
  --color-option-badge-hover-icon: var(--color-gray-100);
  --color-option-badge-bg: var(--color-gray-darken-30);
  --color-option-badge-border: var(--color-transparent);

  /* Tooltips */
  --color-tooltip-fg: var(--color-gray-lighten-60);
  --color-tooltip-subtle-fg: var(--color-gray-lighten-20);
  --color-tooltip-bg: var(--color-gray-darken-30);
  --color-tooltip-source-bg: var(--color-gray-darken-20);
  --color-tooltip-source-mg: var(--color-gray-darken-10);
  --color-tooltip-fold-hover-bg: var(--color-gray-darken-10);
  --color-tooltip-link: var(--color-blue-3);
  --color-tooltip-link-active: var(--color-pink-2);
  --color-tooltip-link-hover: var(--color-pink-3);
  --color-tooltip-syntax-base: var(--color-gray-lighten-60);
  --color-tooltip-syntax-subtle: var(--color-gray-lighten-20);
  --color-tooltip-syntax-subtle-em: var(--color-gray-lighten-30);
  --color-tooltip-syntax-keyword: var(--color-pink-3);
  --color-tooltip-syntax-operator: var(--color-gray-lighten-20);
  --color-tooltip-syntax-term: var(--color-purple-3);
  --color-tooltip-syntax-term-namespace: var(--color-purple-4);
  --color-tooltip-syntax-ability: var(--color-pink-2);
  --color-tooltip-syntax-type: var(--color-blue-2);
  --color-tooltip-syntax-type-namespace: var(--color-blue-3);
  --color-tooltip-syntax-constructor: var(--color-blue-2);
  --color-tooltip-syntax-constructor-namespace: var(--color-blue-3);
  --color-tooltip-syntax-text: var(--color-green-2);

  /* ActionMenu (should probably be moved out of tooltip) */
  --color-tooltip-item-fg: var(--color-gray-lighten-60);
  --color-tooltip-item-subtle-fg: var(--color-gray-lighten-20);
  --color-tooltip-item-bg: var(--color-transparent);
  --color-tooltip-item-hover-fg: var(--color-gray-lighten-60);
  --color-tooltip-item-hover-subtle-fg: var(--color-gray-lighten-30);
  --color-tooltip-item-hover-bg: var(--color-gray-darken-10);

  /* Syntax */
  --color-syntax-base: var(--color-main-fg);
  --color-syntax-subtle: var(--color-gray-lighten-20);
  --color-syntax-subtle-em: var(--color-gray-base);
  --color-syntax-keyword: var(--color-pink-2);
  --color-syntax-operator: var(--color-gray-lighten-30);
  --color-syntax-term: var(--color-purple-2);
  --color-syntax-term-namespace: var(--color-purple-3);
  --color-syntax-ability: var(--color-pink-1);
  --color-syntax-type: var(--color-blue-1);
  --color-syntax-type-namespace: var(--color-blue-2);
  --color-syntax-constructor: var(--color-blue-1);
  --color-syntax-constructor-namespace: var(--color-blue-2);
  --color-syntax-text: var(--color-green-1);

  --color-syntax-monochrome-subtle: var(--color-main-subtle-fg);
  --color-syntax-monochrome-base: var(--color-gray-base);
  --color-syntax-monochrome-em: var(--color-main-fg);

  --color-syntax-plain: var(--color-main-fg);
}

a,
a:visited {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--color-main-fg);
}

a:hover {
  text-decoration: underline;
}

input {
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans-serif);
  caret-color: var(--color-main-focus-fg);
}

::placeholder {
  color: var(--color-main-subtle-fg);
}

li::marker {
  color: var(--color-main-subtle-fg-em);
}

h1 {
  font-size: var(--font-size-large);
}

h2 {
  font-size: var(--font-size-base);
}

h3 {
  font-size: var(--font-size-medium);
}

p {
  margin-bottom: 1em;
}

hr {
  background: var(--color-main-divider);
  border: 0;
  margin: 1.5rem 0;
  height: 2px;
  border-radius: 1px;
}

pre {
  font-family: var(--font-monospace);
}

.loading-placeholder {
  display: inline-block;
  height: calc(var(--font-size-base) * 0.65);
  border-radius: calc(var(--font-size-base) / 2);
  background: var(--main-subtle-fg);
  min-width: calc(var(--font-size-base) * 3);
}

.loading-placeholder-row {
  margin-bottom: 0.5rem;
}

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

.subtle {
  color: var(--color-main-subtle-fg);
}

.badge {
  color: var(--color-badge-fg);
  background: var(--color-badge-bg);
  border: 1px solid var(--color-badge-border);
  font-size: var(--font-size-small);
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: var(--border-radius-base);
}

/* -- Core ------------------------------------------------------------------*/

.tooltip {
  position: absolute;
  z-index: var(--layer-tooltip);

  --tooltip-border-size: 1px;
  --tooltip-arrow-size: 0.375rem;
  --tooltip-arrow-edge-offset-horizontal: 0.75rem;
  --tooltip-arrow-edge-offset-vertical: 0.4rem;

  /* A faux Arrow that is " larger than "arrow-size" such
   * that it appears to give the original arrow a border. All :before styles
   * target this */
  --tooltip-arrow-border-size: calc(
    var(--tooltip-border-size) + var(--tooltip-arrow-size)
  );

  /* Docs (.definition-doc) can exist inside tooltips, but tooltips often have
   * a different background color, so overwrite doc colors to match tooltip */
  --color-doc-link: var(--color-tooltip-link);
  --color-doc-link-active: var(--color-tooltip-link-active);
  --color-doc-link-hover: var(--color-tooltip-link-hover);
  --color-doc-source-bg: var(--color-tooltip-source-bg);
  --color-doc-source-mg: var(--color-tooltip-source-mg);
  --color-doc-fold-hover-bg: var(--color-tooltip-fold-hover-bg);

  /* Syntax (via Docs) can be rendered inside tooltips */
  --color-syntax-base: var(--color-tooltip-syntax-base);
  --color-syntax-subtle: var(--color-tooltip-syntax-subtle);
  --color-syntax-subtle-em: var(--color-tooltip-syntax-subtle-em);
  --color-syntax-keyword: var(--color-tooltip-syntax-keyword);
  --color-syntax-operator: var(--color-tooltip-syntax-operator);
  --color-syntax-term: var(--color-tooltip-syntax-term);
  --color-syntax-term-namespace: var(--color-tooltip-syntax-term-namespace);
  --color-syntax-ability: var(--color-tooltip-syntax-ability);
  --color-syntax-type: var(--color-tooltip-syntax-type);
  --color-syntax-type-namespace: var(--color-tooltip-syntax-type-namespace);
  --color-syntax-constructor: var(--color-tooltip-syntax-constructor);
  --color-syntax-constructor-namespace: var(
    --color-tooltip-syntax-constructor-namespace
  );
  --color-syntax-text: var(--color-tooltip-syntax-text);
  white-space: normal;
}

/* -- Core ------------------------------------------------------------------*/

.tooltip-bubble {
  position: relative;
  font-size: var(--font-size-medium);
  color: var(--color-tooltip-fg);
  background: var(--color-tooltip-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-base);
  min-width: 10rem;
  border: var(--tooltip-border-size) solid var(--color-tooltip-border);
}

.tooltip-bubble:after,
.tooltip-bubble:before {
  border: solid var(--color-transparent);
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip-bubble:after {
  border-width: var(--tooltip-arrow-size);
}

.tooltip-bubble:before {
  border-width: var(--tooltip-arrow-border-size);
}

/* -- Arrows and Positions --------------------------------------------------*/

.tooltip.below {
  padding-top: 0.5rem;
  top: 1.5rem;
}

.tooltip.below .tooltip-bubble:after {
  bottom: 100%;
  border-bottom-color: var(--color-tooltip-bg);
}

.tooltip.below .tooltip-bubble:before {
  bottom: 100%;
  border-bottom-color: var(--color-tooltip-border);
}

.tooltip:is(.below, .above).arrow-middle .tooltip-bubble {
  transform: translateX(-25%);
}

.tooltip:is(.below, .above).arrow-middle .tooltip-bubble:after {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip:is(.below, .above).arrow-middle .tooltip-bubble:before {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.above {
  padding-bottom: 0.5rem;
  bottom: 1.5rem;
}

.tooltip.above .tooltip-bubble:after {
  top: 100%;
  border-top-color: var(--color-tooltip-bg);
}

.tooltip.above .tooltip-bubble:before {
  top: 100%;
  border-top-color: var(--color-tooltip-border);
}

.tooltip:is(.below, .above).arrow-start {
  left: 0;
}

.tooltip:is(.below, .above).arrow-start .tooltip-bubble:after {
  left: var(--tooltip-arrow-edge-offset-horizontal);
}

.tooltip:is(.below, .above).arrow-start .tooltip-bubble:before {
  left: calc(
    var(--tooltip-arrow-edge-offset-horizontal) - var(--tooltip-border-size)
  );
}

.tooltip:is(.below, .above).arrow-end {
  right: 0;
}

.tooltip:is(.below, .above).arrow-end .tooltip-bubble:after {
  right: var(--tooltip-arrow-edge-offset-horizontal);
}

.tooltip:is(.below, .above).arrow-end .tooltip-bubble:before {
  right: calc(
    var(--tooltip-arrow-edge-offset-horizontal) - var(--tooltip-border-size)
  );
}

.tooltip.right-of {
  padding-left: 0.5rem;
  left: 100%;
}

.tooltip.right-of .tooltip-bubble:after {
  right: 100%;
  border-right-color: var(--color-tooltip-bg);
}

.tooltip.right-of .tooltip-bubble:before {
  right: 100%;
  border-right-color: var(--color-tooltip-border);
}

.tooltip.left-of {
  padding-right: 0.5rem;
  right: 100%;
}

.tooltip.left-of .tooltip-bubble:after {
  left: 100%;
  border-left-color: var(--color-tooltip-bg);
}

.tooltip.left-of .tooltip-bubble:before {
  left: 100%;
  border-left-color: var(--color-tooltip-border);
}

.tooltip:is(.right-of, .left-of).arrow-start {
  top: 0;
}

.tooltip:is(.right-of, .left-of).arrow-start .tooltip-bubble:after {
  top: var(--tooltip-arrow-edge-offset-vertical);
}

.tooltip:is(.right-of, .left-of).arrow-start .tooltip-bubble:before {
  top: calc(
    var(--tooltip-arrow-edge-offset-vertical) - var(--tooltip-border-size)
  );
}

.tooltip:is(.right-of, .left-of).arrow-end {
  bottom: 0;
}

.tooltip:is(.right-of, .left-of).arrow-end .tooltip-bubble:after {
  bottom: var(--tooltip-arrow-edge-offset-vertical);
}

.tooltip:is(.right-of, .left-of).arrow-end .tooltip-bubble:before {
  bottom: calc(
    var(--tooltip-arrow-edge-offset-vertical) - var(--tooltip-border-size)
  );
}

.tooltip:is(.right-of, .left-of).arrow-middle {
  transform: translateY(-25%);
}

.tooltip:is(.right-of, .left-of).arrow-middle .tooltip-bubble:after {
  top: 50%;
  transform: translateY(-50%);
}

.tooltip:is(.right-of, .left-of).arrow-middle .tooltip-bubble:before {
  top: 50%;
  transform: translateY(-50%);
}

/* -- Trigger ---------------------------------------------------------------*/

.tooltip-trigger {
  display: inline-flex;
  position: relative;
}

/* -- Content -------------------------------------------------------------- */

.tooltip.content-menu .tooltip-bubble {
  padding: 0.5rem;
}

.tooltip .tooltip-menu-items .tooltip-menu-items {
  display: flex;
  flex-direction: column;
}

.tooltip .tooltip-menu-items .tooltip-menu-item {
  display: flex;
  align-items: center;
  flex: 1;
  height: 2rem;
  color: var(--color-tooltip-item-fg);
  background: var(--color-tooltip-item-bg);
  white-space: nowrap;
  padding: 0 0.5rem;
  line-height: 1rem;
  border-radius: var(--border-radius-base);
}

.tooltip .tooltip-menu-items .tooltip-menu-item .icon {
  font-size: var(--font-size-base);
  margin-right: 0.5rem;
  color: var(--color-tooltip-item-subtle-fg);
  margin-top: -1px;
}

.tooltip .tooltip-menu-items .tooltip-menu-item:hover {
  text-decoration: none;
  color: var(--color-tooltip-item-hover-fg);
  background: var(--color-tooltip-item-hover-bg);
}

.tooltip .tooltip-menu-items .tooltip-menu-item:hover .icon {
  color: var(--color-tooltip-item-hover-subtle-fg);
}

.button {
  display: inline-flex;
  font-family: var(--font-sans-serif);
  border: 0;
  border-radius: var(--border-radius-base);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1em;
  cursor: pointer;
  transition: all 0.1s ease-in;
  justify-content: center;
  align-items: center;
}

a.button,
a.button:hover {
  text-decoration: none;
}

.button:focus {
  outline: none;
  will-change: transform;
}

.button:active {
  transform: translate(0, 0.1rem);
}

/* -- Sizes ---------------------------------------------------------------- */

.button.small {
  height: 1.5rem;
  font-size: var(--font-size-small);
}

.button.small:not(.content-icon) {
  padding: 0 0.5rem;
}

.button.small.content-icon-then-label .icon {
  margin-right: 0.25rem;
}
.button.small.content-icon {
  width: 1.5rem;
}

.button.medium {
  height: 2rem;
  font-size: var(--font-size-medium);
}

.button.medium:not(.content-icon) {
  padding: 0 0.75rem;
}

.button.medium.content-icon-then-label .icon {
  margin-right: 0.375rem;
}

.button.large {
  height: 2.5rem;
  font-size: 1.125rem;
}

.button.large:not(.content-icon) {
  padding: 0 1rem;
}

.button.large.content-icon-then-label .icon {
  margin-right: 0.5rem;
}

/* -- Contained & Colors --------------------------------------------------- */

.button.contained.default {
  color: var(--color-button-default-fg);
  background: var(--color-button-default-bg);
}
.button.contained.default .icon {
  color: var(--color-button-default-fg);
}

.button.contained.default:hover {
  color: var(--color-button-default-hover-fg);
  background: var(--color-button-default-hover-bg);
}

.button.contained.default:hover .icon {
  color: var(--color-button-default-hover-fg);
}

.button.contained.primary-mono {
  color: var(--color-button-primary-mono-fg);
  background: var(--color-button-primary-mono-bg);
}

.button.contained.primary-mono .icon {
  color: var(--color-button-primary-mono-fg);
}

.button.contained.primary-mono:hover {
  color: var(--color-button-primary-mono-hover-fg);
  background: var(--color-button-primary-mono-hover-bg);
}
.button.contained.primary-mono:hover .icon {
  color: var(--color-button-primary-mono-hover-fg);
}

.button.contained.primary {
  color: var(--color-button-primary-fg);
  background: var(--color-button-primary-bg);
}
.button.contained.primary .icon {
  color: var(--color-button-primary-fg);
}

.button.contained.primary:hover {
  color: var(--color-button-primary-hover-fg);
  background: var(--color-button-primary-hover-bg);
}
.button.contained.primary:hover .icon {
  color: var(--color-button-primary-hover-fg);
}

.button.contained.share {
  color: var(--color-button-share-fg);
  background: var(--color-button-share-bg);
}

.button.contained.share .icon {
  color: var(--color-button-share-fg);
}

.button.contained.share:hover {
  color: var(--color-button-share-hover-fg);
  background: var(--color-button-share-hover-bg);
}

.button.contained.share:hover .icon {
  color: var(--color-button-share-hover-fg);
}

.button.contained.danger {
  color: var(--color-button-danger-fg);
  background: var(--color-button-danger-bg);
}
.button.contained.danger .icon {
  color: var(--color-button-danger-fg);
}

.button.contained.danger:hover {
  color: var(--color-button-danger-fg);
  background: var(--color-button-danger-bg);
}
.button.contained.danger:hover .icon {
  color: var(--color-button-danger-fg);
}

/* -- Uncontained & Colors ------------------------------------------------- */
.button.uncontained {
  background: var(--color-transparent);
}

.button.uncontained.default,
.button.uncontained.default .icon {
  color: var(--color-button-default-fg);
}

.button.uncontained.default:hover {
  color: var(--color-button-default-hover-fg);
  background: var(--color-button-default-hover-bg);
}

.button.uncontained.default:hover .icon {
  color: var(--color-button-default-hover-fg);
}

.button.uncontained.primary-mono,
.button.uncontained.primary-mono .icon {
  color: var(--color-button-primary-mono-fg);
}

.button.uncontained.primary-mono:hover {
  color: var(--color-button-primary-mono-hover-fg);
  background: var(--color-button-primary-mono-hover-bg);
}

.button.uncontained.primary-mono:hover .icon {
  color: var(--color-button-primary-mono-hover-fg);
}

.button.uncontained.primary,
.button.uncontained.primary .icon {
  color: var(--color-button-primary-fg);
}

.button.uncontained.primary:hover {
  color: var(--color-button-primary-hover-fg);
  background: var(--color-button-primary-hover-bg);
}
.button.uncontained.primary:hover .icon {
  color: var(--color-button-primary-hover-fg);
}

.button.uncontained.share,
.button.uncontained.share .icon {
  color: var(--color-button-share-fg);
}

.button.uncontained.share:hover {
  color: var(--color-button-share-hover-fg);
  background: var(--color-button-share-hover-bg);
}

.button.uncontained.share:hover .icon {
  color: var(--color-button-share-hover-fg);
}

.button.uncontained.danger,
.button.uncontained.danger .icon {
  color: var(--color-button-danger-fg);
}

.button.uncontained.danger:hover {
  color: var(--color-button-danger-fg);
  background: var(--color-button-danger-bg);
}
.button.uncontained.danger:hover .icon {
  color: var(--color-button-danger-fg);
}

.icon {
  display: inline-block;
  font-size: 0.875rem;
  width: 1em;
  height: 1em;
  color: var(--color-main-fg);
  transition: all 0.2s;
}

.icon.type,
.icon.data-constructor {
  color: var(--color-icon-type);
}

.icon.test {
  color: var(--color-icon-test);
}

.icon.term {
  color: var(--color-icon-term);
}

.icon.ability,
.icon.ability-constructor {
  color: var(--color-icon-ability);
}

.icon.doc {
  color: var(--color-icon-doc);
}

.icon.patch {
  color: var(--color-icon-patch);
}

.fold-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
  line-height: 1;
  border-radius: var(--border-radius-base);
  transition: all 0.2s;
  cursor: pointer;
  background: var(--color-fold-toggle-bg);
}

.fold-toggle.disabled {
  cursor: default;
  opacity: 0.5;
}

/* ▶ */
.fold-toggle .icon {
  color: var(--color-fold-toggle-fg);
  font-size: 1rem;
  transition: color 0.2s, transform 0.1s ease-out;
}

/* rotate ▶ to ▼ */
:not(.is-folded) > .fold-toggle {
  transform: rotate(90deg);
}

.fold-toggle:not(.disabled):hover {
  background: var(--color-fold-toggle-hover-bg);
}

.fold-toggle:not(.disabled):hover .icon {
  color: var(--color-fold-toggle-hover-fg);
}

.card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-card-fg);
  border-radius: var(--border-radius-base);
  background: var(--color-card-bg);
}

.card.contained {
  border: 1px solid var(--color-card-border);
}

.card .card-title {
  color: var(--color-card-title);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  font-weight: normal;
}

.card header img {
  width: 100%;
}
 
/* -- Resets --------------------------------------------------------------- */

body,
h1,
h2,
h3,
h4,
h5,
ul,
p,
ol,
table,
tr,
td,
li {
  margin: 0;
  padding: 0;
}

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

/* -- Base ----------------------------------------------------------------- */

:root {
  --size-base: 16px;
  --main-header-height: 5rem;
  --main-content-height: calc(100vh - var(--main-header-height));
  --main-content-width: 50rem;
  --main-content-top-margin: 4rem;
  --main-content-padding: 2rem;
  /* used to query width further down in page */
  --main-inner-content-width: calc(
    var(--main-content-width) - calc(var(--main-content-padding) * 2)
  );
  --main-footer-height: 3.5rem;
  --border-radius-base: 0.25rem;

  /* -- Layers ------------------------------------------------------------- */
  --layer-base: 1;
  --layer-popover: 50;
  --layer-tooltip: 75;
  --layer-modal-overlay: 99;
  --layer-modal: 100;
  --layer-modal-above: 110;

  /* -- Font --------------------------------------------------------------- */
  --font-sans-serif: "Inter", sans-serif;
  --font-monospace: "Fira Code", monospace;
  --font-size-base: 1rem;
  --font-size-large: 1.5rem;
  --font-size-medium: 0.875rem;
  --font-size-small: 0.75rem;
  --font-size-extra-small: 0.625rem;
}

* {
  box-sizing: border-box;
}

html {
  font-size: var(--size-base);
  font-family: var(--font-sans-serif);
  font-variant-ligatures: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-size: 1rem;
  line-height: 1.4;
  background: var(--color-main-bg);
  color: var(--color-main-fg);
}

/* -- Website -------------------------------------------------------------- */

main {
  display: grid;
  grid-template-rows: var(--main-header-height) auto;
  transition: grid-template-columns 0.3s;
}

main#home {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

main#docs {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

main#article {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

main#page {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

main#blog-index {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

main#blog-post {
  grid-template-columns: auto;
  grid-template-areas: "main-header" "main-content";
}

#main-header {
  grid-area: main-header;
  height: var(--main-header-height);
  background: var(--color-main-header-bg);
  color: var(--color-main-header-fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--color-main-header-border);
  font-size: var(--font-size-medium);
  margin-top: 1rem;
}

#main-header .announcement {
  background: linear-gradient(130deg, var(--color-blue-5), var(--color-blue-3));
  margin-top: -1rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--color-blue-1);
}

#main-header .announcement:hover {
  background: var(--color-blue-4);
  text-decoration: none;
}

#main-header nav {
  width: 64rem;
  height: 1.5rem;
  display: flex;
}

#main-header nav .cloud.tooltip-trigger .tooltip {
  left: -80px;
  transform: none;
}

#main-header nav .navs {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

#main-header nav section,
#main-header nav .social-links {
  display: flex;
  gap: 0.5rem;
}

#main-header nav section > a {
  position: relative;
  color: var(--color-main-header-fg);
  line-height: 1.5rem;
  padding: 0 0.5rem;
  white-space: nowrap;
}

#main-header nav section > a .tooltip {
  width: fit-content;
  max-width: fit-content;
  top: 1.5rem;
  left: -50%;
  transform: translateX(1rem);
}

#main-header nav section > a .tooltip-bubble {
  width: fit-content;
  max-width: fit-content;
  min-width: fit-content;
  white-space: nowrap;
}

#main-header nav section > a:after {
  content: " ";
  position: absolute;
  bottom: -2px;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gray-lighten-45);
  opacity: 0;
  transition: all 0.2s;
}

#main-header nav section > a[aria-current] {
  font-weight: bold;
  color: var(--color-gray-darken-20);
}

#main-header nav section > a[aria-current]:after {
  opacity: 1;
  background: var(--color-pink-1);
}

#main-header nav section > a:hover {
  color: var(--color-gray-darken-30);
  text-decoration: none;
  background: var(--color-gray-lighten-55);
  border-radius: var(--border-radius-base);
}

#main-header nav a#logo:after {
  opacity: 0;
}

#main-header nav a#logo {
  margin-right: 2.5rem;
  font-weight: bold;
  color: var(--color-main-header-current-fg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-base);
}

#main-header nav a#logo:hover {
  color: var(--color-main-header-logo-hover);
  text-decoration: none;
}

#main-header nav #logo-icon {
  width: var(--font-size-base);
  height: var(--font-size-base);
  margin-top: -4px;
}

#main-header nav .aoc-nav {
  position: relative;
}

#main-header nav .aoc-callout {
  position: absolute;
  top: 2.25rem;
  left: -12.5rem;
  font-size: 1.25rem;
  font-family: "Princess Sofia";
  color: var(--color-pink-1);
  transform: rotate(-2.5deg);
  font-weight: bold;
}

#main-header nav img {
  position: absolute;
  top: 0.5rem;
  right: -2rem;
  transform: rotate(-24deg);
}

#main-header #secondary-nav {
  position: relative;
}

#main-header #secondary-nav .social-links {
  padding: 4px;
}

#main-header #secondary-nav .icon {
  font-size: 0.875rem;
  color: var(--color-main-subtle-fg-em);
}

#main-header #secondary-nav a:hover .icon {
  color: var(--color-main-fg);
}

#main-header .newsletter {
  display: none;
  position: absolute;
  top: 2rem;
  right: 8rem;
  min-width: 21rem;
  font-size: var(--font-size-medium);
  background: var(--color-gray-lighten-55);
  padding: 1.5rem;
  z-index: 100;
  border-radius: var(--border-radius-base);
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.25);
  flex-direction: column;
  gap: 0.75rem;
}

#main-header .newsletter.visible {
  display: flex;
}

#main-header .newsletter::after {
	bottom: 100%;
	right: 10%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: var(--color-gray-lighten-55);
	border-width: 0.5rem;
	margin-left: -0.5rem;
}

#main-header .newsletter input {
  height: 2rem;
  width: 12rem;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-medium);
  border-radius: var(--border-radius-base);
  border: 1px solid var(--color-gray-lighten-40);
}

#main-header .newsletter .newsletter-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

#main-header .newsletter p {
  font-weight: bold;
  font-size: var(--font-size-medium);
  color: var(--color-gray-darken-20);
  margin: 0;
}

#main-header .newsletter .no-spam {
  font-weight: normal;
  font-size: var(--font-size-small);
  color: var(--color-gray-lighten-20);
  margin-top: 0.5rem;
}

#main-content {
  position: relative;
  grid-area: main-content;
  background: var(--color-main-bg);
  color: var(--color-main-fg);
  width: var(--main-content-width);
  margin: auto;
  padding: var(--main-content-padding);
  padding-top: 0;
  margin-top: var(--main-content-top-margin);
}

#main-footer {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 0 2rem;
  height: var(--main-footer-height);
  font-size: var(--font-size-small);
  color: var(--color-main-subtle-fg);
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
}

#main-footer .social-links {
  display: flex;
  gap: 0.25rem;
  padding-top: 2px;
}
#main-footer .social-links .icon {
  color: var(--color-main-subtle-fg-em);
}
#main-footer .social-links a:hover .icon {
  color: var(--color-main-fg);
}

body.modal-open {
  height: 100vh;
  overflow-y: hidden;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--layer-modal);
}
.modal-overlay.soft-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.modal-dialog {
  background: var(--color-gray-lighten-100);
  width: 42rem;
  max-height: calc(100vh - 8rem);
  border-radius: var(--border-radius-base);
  position: absolute;
  top: 4rem;
  padding: 0;
  padding-top: 2rem;
  left: 0;
}

.modal-dialog .modal-content {
  overflow: auto;
  max-height: calc(100vh - 10.5rem);
  padding: 0rem 2rem 1rem 2rem;
  scrollbar-width: 0.5rem;
  scrollbar-color: var(--color-doc-subtle-fg) var(--color-transparent);
}
.modal-dialog .modal-content::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
}
.modal-dialog .modal-content::-webkit-scrollbar-track {
  background: var(--color-transparent);
}
.modal-dialog .modal-content::-webkit-scrollbar-thumb {
  background-color: var(--color-doc-subtle-fg);
  border-radius: var(--border-radius-base);
}

.modal-dialog .control {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.modal-dialog .control .icon {
  color: var(--color-gray-lighten-30);
}

.modal-dialog .control:hover .icon {
  color: var(--color-pink-2);
}

.size-small-only {
  display: none;
}

.katex-display {
  padding: 4rem 0;
}

@media only screen and (max-width: 1110px) {
  :root {
    --main-header-height: 1.5rem;
    --main-footer-height: 6rem;
    --main-content-width: 100vw;
  }

  #main-header nav {
    width: var(--main-content-width);
    padding: 0 2rem;
  }

  #main-header .announcement {
    font-size: 0.875rem;
    margin-top: 1rem;
    padding: 1rem;
  }

  #main-header nav .logo {
    margin-right: 0;
  }

  #main-header nav section {
    gap: 0rem;
  }

  #main-footer {
    flex-direction: row;
  }
}

@media only screen and (max-width: 960px) {
  :root {
    --main-content-top-margin: 6rem;
  }

  .aoc-callout {
    display: none;
  }

  #main-header {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }


  #main-header .announcement {
    font-size: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
  }

  #main-header .announcement img,
  #main-header .announcement .button {
    display: none;
  }

  #main-header #main-nav {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  #main-header nav section a#logo {
    margin-right: 0;
  }

  #main-header nav .navs {
    flex-direction: column;
  }

  #main-header #secondary-nav {
    margin: 0.5rem auto 0 auto;
  }

  #main-footer {
    margin: 0;
  }

  #main-footer .public-benefit {
    display: none;
  }

  #main-header .newsletter {
    right: -1rem;
  }

  #main-header .newsletter::after {
    right: auto;
    left: 50%;
  }

  #main-header #main-nav {
    gap: 0.5rem;
  }
}

@media only screen and (max-width: 650px) {
  .size-small-only {
    display: initial;
  }

  .size-medium-plus {
    display: none;
  }

  #main-header .announcement {
    display: none;
  }

  #main-header nav .button .button_label {
    display: none;
  }

  #main-header #secondary-nav .social-links {
    gap: 0.25rem;
  }

  #main-header nav section {
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  #main-content {
    margin-top: 8rem;
  }
}

@media only screen and (max-width: 450px) {
  #main-header nav a#logo {
    margin: 0;
  }

  #main-header nav section > a:hover .tooltip {
    opacity: 0;
  }
}

@media only screen and (max-width: 320px) {
  .aoc-nav {
    display: none;
  }
}
 
.dark {
  --color-syntax-plain: var(--color-gray-base);

  --color-syntax-base: var(--color-gray-lighten-45);
  --color-syntax-subtle: var(--color-gray-lighten-20);
  --color-syntax-subtle-em: var(--color-gray-lighten-30);
  --color-syntax-keyword: var(--color-pink-2);
  --color-syntax-operator: var(--color-gray-lighten-20);
  --color-syntax-term: var(--color-purple-4);
  --color-syntax-term-namespace: var(--color-purple-3);
  --color-syntax-ability: var(--color-pink-2);
  --color-syntax-type: var(--color-blue-3);
  --color-syntax-type-namespace: var(--color-blue-2);
  --color-syntax-constructor: var(--color-blue-3);
  --color-syntax-constructor-namespace: var(--color-blue-2);
  --color-syntax-text: var(--color-green-2);
  --color-syntax-link-hover-bg: var(--color-gray-base);

  --color-syntax-monochrome-subtle: var(--color-gray-lighten-20);
  --color-syntax-monochrome-base: var(--color-gray-lighten-30);
  --color-syntax-monochrome-em: var(--color-gray-lighten-100);
}

pre {
  margin: 0;
}

.inline-code {
  display: inline-block;
  line-height: 1.4;
}

.source {
  font-family: var(--font-monospace);
}

.source.unison:before {
  position: absolute;
  right: 0.5rem;
  font-size: var(--font-size-small);
  content: "unison";
  color: var(--color-main-subtle-fg);
}

.source.ucm:before {
  position: absolute;
  right: 0.5rem;
  font-size: var(--font-size-small);
  content: "ucm";
  color: var(--color-main-subtle-fg);
}

code {
  display: inline-block;
  font-family: var(--font-monospace);
  line-height: 1.6;
}

code a {
  display: inline-block;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  border-radius: var(--border-radius-base);
  line-height: 1.4;
  will-change: transform;
}

code a:hover {
  background: var(--color-gray-lighten-50);
  text-decoration: none;
}

code a:active {
  transform: translate(0, 0.1rem);
}

.rich .fqn .sep {
  color: var(--color-syntax-subtle-em);
}
.rich .text-literal,
.rich .bytes-literal,
.rich .char-literal {
  color: var(--color-syntax-text);
}

.rich .boolean-literal,
.rich .data-constructor-reference {
  color: var(--color-syntax-constructor);
}

.rich .data-constructor-reference .segment {
  color: var(--color-syntax-constructor-namespace);
}

.rich .data-constructor-reference .segment:last-child {
  color: var(--color-syntax-constructor);
}

.rich .var,
.rich .data-type-params {
  color: var(--color-syntax-base);
}

.rich .numeric-literal,
.rich .type-reference,
.rich .data-type-modifier {
  color: var(--color-syntax-type);
}

.rich .type-reference .fqn .segment {
  color: var(--color-syntax-type-namespace);
}

.rich .type-reference .fqn .segment:last-child {
  color: var(--color-syntax-type);
}

.rich .term-reference,
.rich .ability-constructor-reference,
.rich .hash-qualifier {
  color: var(--color-syntax-term);
}

.rich .term-reference .fqn .segment,
.rich .ability-constructor-reference .fqn .segment,
.rich .hash-qualifier .fqn .segment {
  color: var(--color-syntax-term-namespace);
}

.rich .term-reference .fqn .segment:last-child,
.rich .ability-constructor-reference .fqn .segment:last-child,
.rich .hash-qualifier .fqn .segment:last-child {
  color: var(--color-syntax-term);
}

.rich .op.cons,
.rich .op.snoc,
.rich .op.concat,
.rich .type-operator,
.rich .binding-equals,
.rich .type-ascription-colon {
  color: var(--color-syntax-operator);
}

.rich .delay-force-char {
  color: var(--color-syntax-ability);
  font-weight: bold;
}

.rich .control-keyword,
.rich .data-type-keyword,
.rich .link-keyword,
.rich .doc-keyword {
  color: var(--color-syntax-keyword);
}

.rich .delimeter-char {
  color: var(--color-syntax-subtle);
}

.rich .comment,
.rich .ability-braces,
.rich .unit,
.rich .use-keyword,
.rich .use-prefix,
.rich .use-suffix,
.rich .blank,
.rich .parenthesis,
.rich .arrow,
.rich .doc-delimeter {
  color: var(--color-syntax-subtle);
}

.monochrome .text-literal,
.monochrome .bytes-literal,
.monochrome .char-literal,
.monochrome .blank,
.monochrome .var,
.monochrome .data-type-params {
  color: var(--color-syntax-monochrome-base);
}

.monochrome .type-reference,
.monochrome .boolean-literal,
.monochrome .data-constructor-reference,
.monochrome .numeric-literal,
.monochrome .term-reference,
.monochrome .data-type-modifier,
.monochrome .hash-qualifier,
.monochrome .ability-constructor-reference {
  color: var(--color-syntax-monochrome-em);
}

.monochrome .delay-force-char {
  color: var(--color-syntax-monochrome-em);
  font-weight: bold;
}

.monochrome .op.cons,
.monochrome .op.snoc,
.monochrome .op.concat,
.monochrome .type-operator,
.monochrome .type-ascription-colon,
.monochrome .control-keyword,
.monochrome .data-type-keyword,
.monochrome .link-keyword,
.monochrome .doc-keyword,
.monochrome .comment,
.monochrome .ability-braces,
.monochrome .binding-equals,
.monochrome .unit,
.monochrome .use-keyword,
.monochrome .use-prefix,
.monochrome .use-suffix,
.monochrome .delimeter-char,
.monochrome .parenthesis,
.monochrome .doc-delimeter {
  color: var(--color-syntax-monochrome-subtle);
}

.plain .text-literal,
.plain .bytes-literal,
.plain .char-literal,
.plain .boolean-literal,
.plain .data-constructor-reference,
.plain .blank,
.plain .var,
.plain .data-type-params,
.plain .numeric-literal,
.plain .term-reference,
.plain .data-type-modifier,
.plain .hash-qualifier,
.plain .ability-constructor-reference,
.plain .type-reference,
.plain .op.cons,
.plain .op.snoc,
.plain .op.concat,
.plain .type-operator,
.plain .type-ascription-colon,
.plain .delay-force-char,
.plain .control-keyword,
.plain .data-type-keyword,
.plain .link-keyword,
.plain .doc-keyword,
.plain .comment,
.plain .ability-braces,
.plain .binding-equals,
.plain .unit,
.plain .use-keyword,
.plain .use-prefix,
.plain .use-suffix,
.plain .delimeter-char,
.plain .parenthesis,
.plain .doc-delimeter {
  color: var(--color-syntax-plain);
}

.rich.source.code.unison {
  color: var(--color-syntax-subtle);
}

.hljs-meta.prompt_ {
  color: var(--color-syntax-subtle);
}

.rich .fqn .sep {
  color: var(--color-syntax-subtle-em);
}

.hljs-string {
  color: var(--color-syntax-text);
}

.hljs-literal,
.hljs-symbol,
.rich .data-constructor-reference {
  color: var(--color-syntax-constructor);
}

.rich .data-constructor-reference .segment {
  color: var(--color-syntax-constructor-namespace);
}

.rich .data-constructor-reference .segment:last-child {
  color: var(--color-syntax-constructor);
}

.hljs-variable,
.hljs-params {
  color: var(--color-syntax-base);
}

.hljs-number,
.hljs-title.class_,
.hljs-variable.constant_,
.hljs-type {
  color: var(--color-syntax-type);
}

.rich .type-reference .fqn .segment {
  color: var(--color-syntax-type-namespace);
}

.rich .type-reference .fqn .segment:last-child {
  color: var(--color-syntax-type);
}

.hljs-title,
.hljs-title.function_,
.rich .ability-constructor-reference,
.rich .hash-qualifier {
  color: var(--color-syntax-term);
}

.rich .term-reference .fqn .segment,
.rich .ability-constructor-reference .fqn .segment,
.rich .hash-qualifier .fqn .segment {
  color: var(--color-syntax-term-namespace);
}

.rich .term-reference .fqn .segment:last-child,
.rich .ability-constructor-reference .fqn .segment:last-child,
.rich .hash-qualifier .fqn .segment:last-child {
  color: var(--color-syntax-term);
}

.rich .op.cons,
.rich .op.snoc,
.rich .op.concat,
.hljs-operator,
.rich .binding-equals {
  color: var(--color-syntax-operator);
}

.rich .delay-force-char {
  color: var(--color-syntax-ability);
  font-weight: bold;
}

.hljs-keyword,
.hljs-variable.language_,
.hljs-built_in,
.rich .control-keyword,
.rich .data-type-keyword,
.rich .link-keyword,
.rich .doc-keyword {
  color: var(--color-syntax-keyword);
}

.hljs-punctuation {
  color: var(--color-syntax-subtle);
}

.hljs-comment,
.rich .ability-braces,
.rich .unit,
.hljs-import,
.hljs-import .hljs-keyword,
.hljs-import .hljs-title,
.hljs-import .hljs-operator,
.rich .blank,
.rich .parenthesis,
.rich .arrow,
.rich .doc-delimeter {
  color: var(--color-syntax-subtle);
}

.unison-doc {
  position: relative;
  display: flex;
  line-height: 1.5;
  flex-direction: column;
  font-size: var(--font-size-base);
  color: var(--color-doc-fg);
  background: var(--color-doc-bg);

  --fold-toggle-column-width: 1.75rem;
  --doc-aside-width: 15rem;
  --doc-aside-margin: 1rem;
}

.unison-doc .group .join {
  white-space: nowrap;
}

.unison-doc .source.code,
.unison-doc .sources .source,
.unison-doc .folded-sources .source,
.unison-doc .source.example,
.unison-doc .source.eval,
.unison-doc .source.signatures .signature {
  padding: 0.5rem 0.75rem;
  background: var(--color-doc-source-bg);
  border-radius: var(--border-radius-base);
  margin-bottom: 1rem;
  scrollbar-width: auto;
  scrollbar-color: var(--color-doc-subtle-fg) var(--color-transparent);
  overflow: auto;
  max-width: 100%;
}

.unison-doc .folded .source.code,
.unison-doc .folded .sources .source,
.unison-doc .folded .folded-sources .source,
.unison-doc .folded .source.example,
.unison-doc .folded .source.eval,
.unison-doc .folded .source.signatures .signature {
  max-width: calc(
    var(--main-inner-content-width) - var(--fold-toggle-column-width)
  );
}

.unison-doc .folded .callout .folded .source.code,
.unison-doc .folded .callout .folded .sources .source,
.unison-doc .folded .callout .folded .folded-sources .source,
.unison-doc .folded .callout .folded .source.example,
.unison-doc .folded .callout .folded .source.eval,
.unison-doc .folded .callout .folded .source.signatures .signature {
  max-width: calc(
    calc(
        var(--main-inner-content-width) -
          calc(var(--fold-toggle-column-width) * 2)
      ) - 3.75rem
  );
}

.unison-doc .folded-sources .source {
  padding: 0.5rem;
}
.unison-doc .folded-sources .fold-toggle {
  margin-top: 1px;
}

.unison-doc .source.code::-webkit-scrollbar,
.unison-doc .sources .source::-webkit-scrollbar,
.unison-doc .folded-sources .source::-webkit-scrollbar,
.unison-doc .source.example::-webkit-scrollbar,
.unison-doc .source.eval::-webkit-scrollbar,
.unison-doc .source.signatures .signature::-webkit-scrollbar {
  height: 0.375rem;
}
.unison-doc .source.code::-webkit-scrollbar-track,
.unison-doc .sources .source::-webkit-scrollbar-track,
.unison-doc .folded-sources .source::-webkit-scrollbar-track,
.unison-doc .source.example::-webkit-scrollbar-track,
.unison-doc .source.eval::-webkit-scrollbar-track,
.unison-doc .source.signatures .signature::-webkit-scrollbar-track {
  background: var(--color-transparent);
}
.unison-doc .source.code::-webkit-scrollbar-thumb,
.unison-doc .sources .source::-webkit-scrollbar-thumb,
.unison-doc .folded-sources .source::-webkit-scrollbar-thumb,
.unison-doc .source.example::-webkit-scrollbar-thumb,
.unison-doc .source.eval::-webkit-scrollbar-thumb,
.unison-doc .source.signatures .signature::-webkit-scrollbar-thumb {
  background-color: var(--color-doc-subtle-fg);
  border-radius: var(--border-radius-base);
}

.unison-doc .source code {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.unison-doc
  .source:is(.inline-code, .example-inline, .eval-inline, .signature-inline) {
  display: inline-flex;
  padding: 0 0.25rem;
  margin-right: 0.5ch;
  background: var(--color-doc-source-bg);
  border-radius: var(--border-radius-base);
  white-space: nowrap;
  overflow: auto;
  max-width: 100%;
}

.unison-doc
  .group
  .join
  .source:is(.inline-code, .example-inline, .eval-inline, .signature-inline)
  :is(.inline-code, code) {
  margin-right: 0;
}

/* code and inline-code render sub unison-docs, not syntax */
:is(.unison-doc .source.code, .unison-doc .source.inline-code)
  .word:last-child {
  margin-right: 0;
}

.unison-doc .eval .result,
.unison-doc .eval-inline .result {
  color: var(--color-doc-subtle-fg);
}

.unison-doc strong {
  font-weight: bold;
}

.unison-doc .italic {
  font-style: italic;
}

.unison-doc .strikethrough {
  text-decoration: line-through;
}

.unison-doc .named-link {
  white-space: normal;
}

.unison-doc .named-link:not(.invalid-href),
.unison-doc .named-link:not(.invalid-href):visited {
  color: var(--color-doc-link);
}
.unison-doc .named-link:not(.invalid-href):active {
  color: var(--color-doc-link-active);
}
.unison-doc .named-link:not(.invalid-href):hover {
  color: var(--color-doc-link-hover);
  text-decoration: none;
}

.unison-doc blockquote {
  position: relative;
  padding: 0.5rem 1.25rem;
  padding-right: 0;
  margin: 0rem;
  margin-bottom: 1rem;
}

.unison-doc blockquote:before {
  position: absolute;
  content: " ";
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--color-doc-content-border);
  width: 0.25rem;
  border-radius: var(--border-radius-base);
}

.unison-doc hr {
  background: var(--color-doc-content-border);
  margin: 1.5rem 0;
}

.unison-doc .tooltip-trigger {
  border-bottom: 1px dotted var(--color-doc-subtle-fg);
}

.unison-doc .tooltip {
  width: 24rem;
  top: 1rem;
}

.unison-doc .tooltip-bubble {
  width: 24rem;
}

.unison-doc .tooltip-bubble > section:only-child {
  margin: 0;
}
.unison-doc .tooltip-bubble > section:only-child > :is(h1, h2, h3, h4, h5) {
  margin-top: 0;
}

.unison-doc .tooltip-bubble :is(h1, h2, h3, h4, h5) {
  color: var(--color-tooltip-fg);
}

.unison-doc aside {
  position: absolute;
  right: calc(calc(var(--doc-aside-width) + var(--doc-aside-margin)) * -1);
  width: var(--doc-aside-width);
  font-size: var(--font-size-medium);
  background: var(--color-doc-aside-bg);
  padding: 0.5rem 0.75rem;
  margin-left: 1rem;
  border-radius: var(--border-radius-base);
  white-space: normal;
}

.unison-doc aside > section:first-child {
  margin: 0;
}

.unison-doc aside .source.code,
.unison-doc aside .sources .source,
.unison-doc aside .folded-sources .source,
.unison-doc aside .source.example,
.unison-doc aside .source.eval,
.unison-doc aside .source.signatures .signature {
  background: var(--color-doc-aside-source-bg);
  padding: 0.375rem;
  max-width: 14rem; /* accounting for the aside padding */
  overflow: auto;
}
.unison-doc
  aside
  .source:is(.inline-code, .example-inline, .eval-inline, .signature-inline) {
  background: var(--color-doc-aside-source-bg);
  white-space: wrap;
}

.unison-doc .callout {
  background: var(--color-doc-callout-bg);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius-base);
  display: flex;
  flex-direction: row;
}

.unison-doc .callout .callout-content section .folded:last-child {
  margin-bottom: 0.25rem;
}

.unison-doc .folded-details .callout {
  width: calc(
    var(--main-inner-content-width) - var(--fold-toggle-column-width)
  );
}

.unison-doc .folded-details .callout:nth-child(2) {
  margin-top: 1rem;
}

.unison-doc .callout.callout-with-icon .callout-content {
  padding-top: 1px;
  width: 100%;
}

.unison-doc .callout .callout-icon {
  margin-right: 0.5rem;
  font-size: var(--font-size-base);
}
.unison-doc .callout .source.code,
.unison-doc .callout .sources .source,
.unison-doc .callout .folded-sources .source,
.unison-doc .callout .source.example,
.unison-doc .callout .source.eval,
.unison-doc .callout .source.signatures .signature,
.unison-doc
  .callout
  .source:is(.inline-code, .example-inline, .eval-inline, .signature-inline) {
  background: var(--color-doc-callout-source-bg);
}

.unison-doc table {
  margin-bottom: 1rem;
  table-layout: fixed;
  border-collapse: collapse;
}

.unison-doc table td {
  border: 1px solid var(--color-doc-content-border);
  padding: 0.5rem;
  vertical-align: top;
}

.unison-doc .folded {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
}

.unison-doc .folded-summary,
.unison-doc .folded-details > div .word {
  cursor: pointer;
}

.unison-doc .folded.is-folded > .folded-content > .folded-details {
  display: none;
}

.unison-doc .folded:not(.is-folded) > .folded-content > .folded-summary {
  display: none;
}

.unison-doc .folded .folded-content {
  flex: 1;
}

.unison-doc .folded .builtin-summary {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}

.unison-doc .source.folded .badge {
  margin-left: auto;
  justify-self: flex-end;
  background: var(--color-doc-source-mg);
  border: 0;
  font-size: 0.75rem;
  height: 1.25rem;
  padding: 0 0.25rem;
}

.unison-doc p {
  margin-bottom: 1em;
}

.unison-doc p:last-child {
  margin: 0;
}

.unison-doc ol,
.unison-doc ul {
  margin-left: 1.5rem;
  margin-bottom: 1em;
}


.unison-doc ol:last-child,
.unison-doc ul:last-child {
  margin-bottom: 0;
}

.unison-doc ol li,
.unison-doc ul li {
  margin-bottom: 0.5em;
}

.unison-doc ol li:last-child,
.unison-doc ul li:last-child {
  margin-bottom: 0;
}

.unison-doc section {
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}
.unison-doc section:first-child {
  margin-top: 0;
}
.unison-doc section:last-child {
  margin-bottom: 0;
}

.unison-doc :is(h1, h2, h3, h4, h5, h6) p {
  margin: 0;
}

.unison-doc :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-doc-heading-fg);
  cursor: pointer;
  scroll-margin-top: 1.5rem;
}

.unison-doc :is(h1, h2, h3, h4, h5, h6):hover {
  color: var(--color-doc-link-hover);
}

.unison-doc :is(h1, h2, h3, h4, h5, h6) a {
  scroll-margin-top: 1.5rem;
}

.unison-doc h1 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.unison-doc h1:first-child {
  margin-top: 0;
  line-height: 1.1;
}

.unison-doc h2 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.unison-doc h3 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.unison-doc h4 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.unison-doc h5 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.unison-doc h6 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.unison-doc img {
  margin-bottom: 1rem;
  max-width: 100%;
}

.unison-doc .image-with-caption {
  width: 100%;
}

.unison-doc .image-with-caption .caption {
  text-align: center;
  font-style: italic;
}

.unison-doc .embed {
}

.unison-doc .embed-inline {
}

.unison-doc .column {
  margin: 0;
  list-style-type: none;
}

.unison-doc .group {
}

@media only screen and (max-width: 1024px) {
  .unison-doc aside {
    position: relative;
    right: auto;
    width: auto;
    margin: 1.5rem 1.5rem 1.5rem 1.5rem;
  }

  .unison-doc .group .join {
    white-space: normal;
  }

  .unison-doc aside .source.code,
  .unison-doc aside .sources .source,
  .unison-doc aside .folded-sources .source,
  .unison-doc aside .source.example,
  .unison-doc aside .source.eval,
  .unison-doc aside .source.signatures .signature {
    max-width: none;
    width: min(40rem, calc(calc(100vw - 5rem)) - 3rem);
  }

  .unison-doc {
    width: calc(100vw - 4rem);
  }
  .unison-doc .source.code,
  .unison-doc .sources .source,
  .unison-doc .folded-sources .source,
  .unison-doc .source.example,
  .unison-doc .source.eval,
  .unison-doc .source.signatures .signature {
  }
  .unison-doc .source.code,
  .unison-doc .sources .source,
  .unison-doc .folded-sources .source,
  .unison-doc .source.example,
  .unison-doc .source.eval,
  .unison-doc .source.signatures .signature {
    width: auto;
  }
}

@media only screen and (max-width: 400px) {
  .unison-doc .tooltip {
    width: 18rem;
  }

  .unison-doc .tooltip-bubble {
    width: auto;
  }
}

#page {
  --main-content-width: 50rem;
}

#page h1 {
  letter-spacing: 0.1rem;
  font-size: 2.5rem;
  margin: 0rem 0 2rem 0;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--color-gray-darken-10);
}

#page .app-error {
  font-size: 1rem;
  text-align: center;
}

@media only screen and (max-width: 1264px) {
  #page {
    --main-footer-height: 6rem;
    --main-content-width: 100vw;
  }

  #page #main-content {
    padding: 0 1.5rem;
  }
}
 
#home {
  --main-content-width: auto;
  --hero-width: 64rem;
  --examples-width: 64rem;
  --flow-width: 64rem;
}

#home #main-content {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* -- Hero ----------------------------------------------------------------- */

#home #hero {
  background: var(--color-green-3);
  color: var(--color-gray-darken-10);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background 0.4s;
  width: var(--hero-width);
}

#home #hero h1 {
  margin-top: 6rem;
  font-size: 3.5rem;
  font-weight: 900;
}

#home #hero hr {
  width: 6rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: var(--color-gray-base);
  opacity: 0.25;
}

#home #hero h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1.5;
  font-size: 3.5rem;
  font-weight: 900;
}

/* -- Hero/Carousel -------------------------------------------------------- */

#home #hero.slide-1 {
  background: var(--color-green-3);
}
#home #hero.slide-1 .slide-content h2 {
  color: var(--color-purple-3);
}

#home #hero.slide-2 {
  background: var(--color-orange-3);
}
#home #hero.slide-2 .slide-content h2 {
  color: var(--color-purple-3);
}

#home #hero.slide-3 {
  background: var(--color-pink-3);
}
#home #hero.slide-3 .slide-content h2 {
  color: var(--color-gray-lighten-100);
}

#home #hero.slide-4 {
  background: var(--color-blue-3);
}
#home #hero.slide-4 .slide-content h2 {
  color: var(--color-gray-lighten-100);
}

#home #hero.slide-5 {
  background: var(--color-purple-4);
}
#home #hero.slide-5 .slide-content h2 {
  color: var(--color-gray-lighten-100);
}

#home #hero .carousel {
  font-size: 1.5rem;
  overflow: hidden;
  width: var(--hero-width);
}

#home #hero .carousel p {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  align-self: center;
  padding: 0 9rem;
}

#home #hero .carousel .button {
  margin-bottom: 4rem;
}

#home #hero .carousel .slides {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: transform 0.8s cubic-bezier(0.68, -0.4, 0.32, 1);
}

#home #hero .carousel .slide-content {
  width: 100%;
  flex-shrink: 0;
}

#home #hero .carousel .slide-indicators {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.375rem;
  gap: 0.25rem;
}

#home #hero .carousel .slide-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.25;
  transition: all 0.2s;
  cursor: pointer;
}

#home #hero .carousel .slide-indicator:hover {
  opacity: 1;
}

#home #hero .carousel .slide-indicator .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--color-gray-base);
}

#home #hero.slide-1 .carousel .slide-1-indicator {
  opacity: 0.75;
}

#home #hero.slide-2 .carousel .slide-2-indicator {
  opacity: 0.75;
}
#home #hero.slide-3 .carousel .slide-3-indicator {
  opacity: 0.75;
}
#home #hero.slide-4 .carousel .slide-4-indicator {
  opacity: 0.75;
}
#home #hero.slide-5 .carousel .slide-5-indicator {
  opacity: 0.75;
}

#home #install-instructions {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  padding: 3.25rem 14rem;
  font-size: 1.125rem;
  align-items: center;
  text-align: center;
  margin-top: 1.5rem;
  transition: background 0.4s;
  width: var(--hero-width);
  background: var(--color-blue-5);
  position: relative;
  border-radius: 0.75rem;
}

#home #install-instructions .ucm-desktop {
  border-radius: 0.75rem;
  position: absolute;
  height: 12rem;
  background: linear-gradient(
    to bottom,
    var(--color-blue-5),
    var(--color-blue-5),
    var(--color-purple-5)
  );
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}

#home #install-instructions .ucm-desktop .callout {
  position: relative;
  margin-bottom: 1rem;
  font-size: 1rem;
  z-index: 3;
}

#home #install-instructions .ucm-desktop .callout a {
  text-decoration: underline;
  font-weight: bold;
}

#home #install-instructions .ucm-desktop .screenshot {
  overflow: hidden;
  margin: 0 auto;
  height: 12rem;
}

#home #install-instructions .ucm-desktop .download-ucm-desktop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3rem;
  text-align: center;
  z-index: 2;
}

#home #install-instructions .ucm-desktop .screenshot:after {
  position: absolute;
  height: 16rem;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    transparent,
    var(--color-blue-4)
  );
  z-index: 1;
  content: " ";
}

#home #install-instructions .install {
  position: relative;
  text-align: center;
  width: 32rem;
  height: 16rem;
}

#home #install-instructions .install.install-mac,
#home #install-instructions .install.install-linux {
  display: none;
}

#home #install-instructions .install.install-mac .apple-silicon {
  font-size: 0.875rem;
  margin-top: 1rem;
  opacity: 0.75;
}

#home #install-instructions .install.install-mac .apple-silicon abbr {
  cursor: help;
}
#home #install-instructions .install.install-mac .apple-silicon a {
  text-decoration: underline;
}

#home #install-instructions .install .prompt {
  height: 2.5rem;
  position: absolute;
  top: 0;
  left: 0.875rem;
  font-size: 1rem;
  font-weight: 900;
  font-family: var(--font-monospace);
  display: flex;
  align-items: center;
}

#home #install-instructions .install input {
  height: 2.5rem;
  padding: 0 2.75rem 0 2rem;
  background: var(--color-transparent);
  color: var(--color-gray-darken-10);
  border: 1px solid rgba(81, 82, 88, 0.5);
  font-size: 1rem;
  font-weight: 900;
  font-family: var(--font-monospace);
  border-radius: var(--border-radius-base);
  position: relative;
}

#home #install-instructions .install.install-mac input {
  width: 32rem;
}

#home #install-instructions .install.install-linux input {
  width: 40rem;
}

#home #install-instructions .install .copy-installation-command {
  position: absolute;
  top: 0;
  right: 0;
  height: 2.5rem;
  padding: 0 0.375rem;
  border-left: 1px solid rgba(81, 82, 88, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

#home #install-instructions .install .copy-installation-command:hover {
  background: rgba(81, 82, 88, 0.1);
}

#home #install-instructions .install .copy-installation-command:hover .icon {
  color: var(--color-gray-darken-30);
}

#home #install-instructions .install .copy-installation-command .icon {
  color: var(--color-gray-darken-10);
  width: 1.5rem;
  height: 1.5rem;
}
#home #install-instructions .install .copy-installation-command .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.modal-dialog {
  width: 32rem;
}

/* -- Unison Examples ------------------------------------------------------ */

#home .unison-examples {
  margin-top: 10rem;
  width: var(--examples-width);
}

#home .unison-examples header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
  font-size: 1rem;
  color: var(--color-gray-base);
  text-align: center;
  padding: 0 1rem;
}

#home .unison-examples header h1 {
  font-size: 2.5rem;
  text-align: center;
  display: inline-flex;
  background: var(--color-gray-lighten-100);
  color: var(--color-gray-darken-10);
  position: relative;
  padding: 0 1.5rem;
  z-index: 1;
  font-weight: 900;
  margin-bottom: 1rem;
}

#home .unison-examples .examples .unison-doc > section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

#home .unison-examples .examples .hello-world,
#home .unison-examples .examples .distributed-map-reduce,
#home .unison-examples .examples .http-request {
  background: var(--color-gray-lighten-60);
  color: var(--color-gray-darken-25);
  border-radius: 0.75rem;
  padding: 2rem;
}

#home .unison-examples .examples .hello-world h1,
#home .unison-examples .examples .distributed-map-reduce h1,
#home .unison-examples .examples .http-request h1 {
  color: var(--color-gray-base);
  font-size: 1.75rem;
  font-weight: 900;
}

#home .unison-examples .examples .hello-world,
#home .unison-examples .examples .distributed-map-reduce {
  display: flex;
  width: calc(50% - 0.75rem);
}

#home .unison-examples .examples .hello-world .folded.source,
#home .unison-examples .examples .distributed-map-reduce .folded.source {
  margin-bottom: 2rem;
}

#home .unison-examples .examples .hello-world p,
#home .unison-examples .examples .distributed-map-reduce p {
  margin-bottom: 2rem;
}
#home .unison-examples .examples .hello-world p:last-child,
#home .unison-examples .examples .hello-world p:last-child,
#home .unison-examples .examples .distributed-map-reduce p:last-child {
  margin-bottom: 0;
}

#home .unison-examples .hello-world {
  font-size: 1rem;
}

#home .unison-examples .hello-world .folded.source,
#home .unison-examples .distributed-map-reduce .folded.source,
#home .unison-examples .http-request .folded.source {
  font-size: 1rem;
}

#home .unison-examples .hello-world .delayed-computation {
  display: inline-flex;
  font-weight: bold;
  color: var(--color-pink-1);
}

#home .unison-examples .examples .http-request {
  display: flex;
  width: 100%;
}
#home .unison-examples .examples .http-request section {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

#home .unison-examples .examples .http-request .folded.source {
  margin-bottom: 0;
}

#home .unison-examples p {
  font-size: 1rem;
}

#home .unison-examples p * {
  white-space: normal;
}

#home .unison-examples .folded.source {
  padding: 1.125rem;
  background: var(--color-gray-lighten-100);
  border: 1px solid var(--color-gray-lighten-50);
}

#home .unison-examples .folded-sources {
  width: auto;
  flex-shrink: 0;
  margin: 0 -0.5rem;
}

#home .unison-examples .fold-toggle {
  display: none;
}

/* -- Unison Dev Flow ------------------------------------------------------ */

#home .unison-dev-flow {
  display: flex;
  flex-direction: column;
  width: var(--flow-width);
  margin: 4rem 0;
}

#home .unison-dev-flow > header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
  gap: 1rem;
  font-size: 1rem;
  color: var(--color-gray-base);
  text-align: center;
  padding: 0 1rem;
}

#home .unison-dev-flow > header h1 {
  font-size: 2.5rem;
  text-align: center;
  display: inline-flex;
  background: var(--color-gray-lighten-100);
  color: var(--color-gray-darken-10);
  position: relative;
  padding: 0 1.5rem;
  z-index: 1;
  font-weight: 900;
}

#home .unison-dev-flow .unison-dev-flow_editor-and-ucm {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  position: relative;
}

#home .unison-dev-flow .unison-dev-flow_window {
  width: 50%;
  border: 1px solid var(--color-gray-lighten-45);
  border-radius: var(--border-radius-base);
  height: 35.5rem;
  opacity: 0.5;
  background: var(--color-gray-lighten-60);
  transition: all 0.2s;
  overflow: clip;
}

#home .unison-dev-flow .media-controls {
  position: absolute;
  z-index: 1000;
  left: 1rem;
  bottom: 1rem;
  place-items: center;
  display: flex;
  flex-direction: column;
}

#home .unison-dev-flow .media-button {
  height: 3.25rem;
  border-radius: 2rem;
  background: var(--color-gray-darken-20);
  border: 0;
  line-height: 1;
  place-items: center;
  display: flex;
  transition: all 0.2s;
  cursor: pointer;
  border: 0.25rem solid var(--color-gray-lighten-100);
  color: var(--color-gray-lighten-100);
  padding: 0 1.25rem 0 0.35rem;
  font-weight: bold;
}

#home .unison-dev-flow .media-button .icon {
  font-size: 2.5rem;
  color: var(--color-gray-lighten-100);
  line-height: 1;
}

#home .unison-dev-flow .media-button:hover {
  background: var(--color-blue-2);
}

#home .unison-dev-flow .media-button .icon .media-outline {
  opacity: 0;
}

#home .unison-dev-flow[data-play-state="idle"] .media-button.button-stop,
#home .unison-dev-flow[data-play-state="idle"] .media-button.button-restart {
  display: none;
}

#home .unison-dev-flow[data-play-state="playing"] .media-button.button-play,
#home .unison-dev-flow[data-play-state="playing"] .media-button.button-restart {
  display: none;
}

#home .unison-dev-flow[data-play-state="stopped"] .media-button.button-play,
#home .unison-dev-flow[data-play-state="stopped"] .media-button.button-stop {
  display: none;
}

#home .unison-dev-flow .unison-dev-flow_window.unison-dev-flow_window-focus {
  box-shadow: 0 0 0 4px var(--color-blue-5);
  border: 1px solid var(--color-blue-1);
  opacity: 1;
  background: var(--color-gray-lighten-100);
}

#home .unison-dev-flow .unison-dev-flow_window-header {
  padding: 0.75rem 1rem;
  line-height: 1;
  font-size: var(--font-size-small);
  border-bottom: 1px solid var(--color-gray-lighten-45);
  color: var(--color-gray-lighten-20);
  background: var(--color-gray-lighten-60);
}

#home .unison-dev-flow .unison-dev-flow_window-body {
  padding: 1rem;
  font-family: var(--font-monospace);
  font-weight: 300;
}

#home .unison-dev-flow .unison-dev-flow_ucm .ucm-file {
  color: var(--color-blue-1);
}

#home .unison-dev-flow .unison-dev-flow_ucm .ucm-delayed {
  font-weight: bold;
  color: var(--color-pink-1);
}

#home .unison-dev-flow .unison-dev-flow_ucm .ucm-emphasized {
  font-weight: bold;
}

#home .unison-dev-flow .unison-dev-flow_ucm .ucm-subdued {
  color: var(--color-gray-lighten-30);
}

#home .unison-dev-flow .unison-dev-flow_ucm .ucm-add {
  color: var(--color-green-1);
}

#home .at-a-glance-banner {
  background: var(--color-orange-5);
  padding: 1rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
}

#home .at-a-glance-banner p {
  font-size: 1rem;
}

#home .at-a-glance-banner .button {
  white-space: nowrap;
  margin-left: 1rem;
  font-size: 1rem;
}

/* -- Responsive ----------------------------------------------------------- */

/* smaller laptop */
@media only screen and (max-width: 1264px) {
  #home #main-content {
    margin-left: auto;
  }

  #home {
    --hero-width: 60rem;
    --examples-width: 64rem;
    --flow-width: 64rem;
  }
}

/* tablet */
@media only screen and (max-width: 1110px) {
  #home {
    --main-content-width: 60rem;
    --hero-width: 60rem;
    --examples-width: 60rem;
    --flow-width: 60rem;
  }

  #home #hero .carousel p {
    padding: 0 7.25rem;
  }
}

/* phone */
@media only screen and (max-width: 960px) {
  #home {
    --main-content-width: 100vw;
    --hero-width: 100vw;
    --examples-width: 100vw;
    --flow-width: 100vw;
  }

  #home #hero,
  #home #install-instructions {
    border-radius: 0;
  }

  #home #install-instructions {
    margin-top: 1px;
    padding: 1rem;
  }

  #home #install-instructions .ucm-desktop {
    display: none;
  }

  #home #install-instructions .install {
    height: auto;
  }

  #home #hero h1 {
    margin-top: 3.25rem;
  }

  #home #hero h1,
  #home #hero h2 {
    font-size: 2.625rem;
    line-height: 1.3;
  }

  #home #hero .approach-to {
    white-space: nowrap;
  }

  #home #hero .carousel {
    margin-top: 1rem;
  }

  #home #hero .carousel p {
    padding: 0 1.25rem;
    font-size: 1.125rem;
  }

  #home #hero .sub-text {
    padding: 2rem 1.25rem 3.25rem 1.25rem;
    font-size: 1.125rem;
  }
  #home #hero .install {
    width: auto;
  }

  #home .unison-examples {
    margin-top: 6rem;
  }

  #home .unison-examples header {
    margin-bottom: 2rem;
  }

  #home .unison-examples header h1 {
    font-size: 2rem;
  }

  #home .unison-examples .examples {
    margin: 0 2rem;
  }

  #home .unison-examples .unison-doc {
    width: 100%;
  }

  #home .unison-examples .examples .hello-world,
  #home .unison-examples .examples .distributed-map-reduce,
  #home .unison-examples .examples .http-request {
    padding: 1rem;
  }

  #home .unison-examples .examples .hello-world h1,
  #home .unison-examples .examples .distributed-map-reduce h1,
  #home .unison-examples .examples .http-request h1 {
    font-size: 1.5rem;
  }

  #home .unison-examples .examples .hello-world,
  #home .unison-examples .examples p {
    font-size: 0.875rem;
  }

  #home .unison-examples .examples .hello-world p,
  #home .unison-examples .examples .distributed-map-reduce p,
  #home .unison-examples .examples .http-request p {
    margin-bottom: 1rem;
  }

  #home .unison-examples .hello-world .folded.source,
  #home .unison-examples .distributed-map-reduce .folded.source,
  #home .unison-examples .http-request .folded.source {
    font-size: 0.875rem;
    padding: 0.5rem;
  }

  #home .unison-examples .examples .hello-world .folded.source,
  #home .unison-examples .examples .distributed-map-reduce .folded.source {
    margin-bottom: 1rem;
  }

  #home .at-a-glance-banner p {
    font-size: 0.875rem;
  }
  #home .at-a-glance-banner .button {
    font-size: 1rem;
  }

  #home .unison-dev-flow > header {
    margin-bottom: 2rem;
  }

  #home .unison-dev-flow > header h1 {
    font-size: 1.8rem;
  }

  #home .unison-dev-flow {
    margin-bottom: 2rem;
  }

  #home .unison-dev-flow .unison-dev-flow_editor-and-ucm {
    margin: 0 2rem;
  }

  #home .unison-dev-flow .unison-dev-flow_window {
    font-size: 0.875rem;
  }
}

@media only screen and (max-width: 800px) {
  #home .unison-examples header h1 {
    font-size: 1.8rem;
  }
  #home .unison-examples .examples {
    margin: 0;
  }
  #home .unison-examples .examples .hello-world,
  #home .unison-examples .examples .distributed-map-reduce,
  #home .unison-examples .examples .http-request {
    width: 100%;
    border-radius: 0;
    padding: 2rem;
  }

  #home .unison-examples .examples .http-request section {
    flex-direction: column;
  }

  #home .unison-examples .hello-world .folded.source,
  #home .unison-examples .distributed-map-reduce .folded.source,
  #home .unison-examples .http-request .folded.source {
    width: calc(100vw - 3rem);
    overflow: auto;
  }

  #home .unison-examples .examples .http-request section {
    gap: 0;
  }

  #home .unison-examples .examples .hello-world,
  #home .unison-examples .examples p {
    font-size: 1rem;
  }

  #home .unison-examples .hello-world .folded.source,
  #home .unison-examples .distributed-map-reduce .folded.source,
  #home .unison-examples .http-request .folded.source {
    font-size: 1rem;
    padding: 1rem;
  }

  #home .at-a-glance-banner p {
    font-size: 1rem;
  }

  #home .at-a-glance-banner {
    width: var(--examples-width);
    border-radius: 0;
  }

  #home .unison-dev-flow .unison-dev-flow_editor-and-ucm {
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
  }

  #home .unison-dev-flow .unison-dev-flow_window {
    width: 100%;
    height: auto;
    font-size: 0.75rem;
  }

  #home .unison-dev-flow .media-controls {
    bottom: auto;
    left: auto;
    top: -1.25rem;
    right: 0.5rem;
  }

  #home .unison-dev-flow .media-button {
    height: 2.5rem;
    padding: 0 1rem 0 0.15rem;
  }

  #home .unison-dev-flow .media-button .icon {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 390px) {
  #home .unison-examples .examples .hello-world,
  #home .unison-examples .examples p {
    font-size: 0.875rem;
  }

  #home .unison-examples .hello-world .folded.source,
  #home .unison-examples .distributed-map-reduce .folded.source,
  #home .unison-examples .http-request .folded.source {
    font-size: 0.875rem;
    padding: 0.875rem;
  }

  #home .at-a-glance-banner p {
    font-size: 0.875rem;
  }
}

#article {
  --main-content-width: 50rem;
}

main#article #overall-title {
  font-size: var(--font-size-medium);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.1rem;
}
main#article #overall-title a {
  color: var(--color-gray-lighten-30);
}
main#article #overall-title a:hover {
  color: var(--color-gray-base);
  text-decoration: none;
}

main#article #title {
  font-size: 4rem;
  margin: 1.5rem 0 4rem 0;
  line-height: 1.1;
  text-align: center;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--color-pink-2);
}

main#article #title::first-letter {
  letter-spacing: -3px;
}

main#article #byline {
  text-align: center;
  color: var(--color-main-subtle-fg);
  font-size: var(--font-size-small);
  margin-bottom: 2rem;
  margin-top: -2rem;
}

main#article #byline .by {
  margin-right: 0.2ch;
}
main#article #byline .authors {
  display: inline;
  list-style: none;
}

main#article #byline .author {
  color: var(--color-main-subtle-fg-em);
  display: inline;
}

main#article #byline .author:after {
  color: var(--color-main-subtle-fg);
  content: ", ";
}

main#article #byline .author:last-child:after {
  content: "";
}

main#article
  #byline
  .authors
  .author:nth-last-child(3)
  ~ main#article
  #byline
  .author:nth-last-child(2):after {
  color: var(--color-main-subtle-fg);
  content: ", and ";
}

main#article nav#index {
  position: absolute;
  left: 0;
  width: 20.5rem;
  transform: translateX(-100%);
  font-size: var(--font-size-medium);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  padding-top: 0.2rem;
  border-right: 1px solid var(--color-doc-content-border);
}

main#article nav#index .links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main#article nav#index .links .in-this-article {
  display: none;
  font-weight: normal;
  font-size: var(--font-size-small);
  text-align: right;
  color: var(--color-doc-subtle-fg);
}

main#article nav#index .links a {
  display: flex;
  flex: 1;
  height: 1.5rem;
  align-items: center;
  justify-content: right;
  text-align: right;
  position: relative;
  color: var(--color-doc-index-fg);
}

main#article nav#index .links a:hover {
  color: var(--color-doc-index-hover-fg);
  text-decoration: none;
}

main#article nav#index .links a[aria-current] {
  font-weight: bold;
  color: var(--color-doc-index-current-fg);
}
main#article nav#index .links a[aria-current]:hover {
  color: var(--color-doc-index-current-fg);
}

main#article nav#index .links a[aria-current]:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.5rem;
  margin-right: -3px;
  background: var(--color-pink-1);
  box-shadow: 0 0 0 4px var(--color-main-bg);
  border-radius: 4px;
  width: 5px;
  content: " ";
}

main#article nav#index .compositional-distributed-systems-cta {
  margin-top: 6rem;
  text-align: right;
  color: var(--color-doc-subtle-fg);
  font-size: var(--font-size-small);
  width: 15rem;
  align-self: flex-end;
}

main#article nav#index .compositional-distributed-systems-cta a {
  color: var(--color-gray-base);
  display: inline-flex;
  justify-self: flex-end;
  text-align: right;
  margin-top: 1rem;
}

main#article footer.article-pagination {
  border-bottom: 1px solid var(--color-doc-content-border);
  margin-top: 3rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 1rem;
  height: min-content;
}

main#article footer.article-pagination a {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.25rem;
  font-size: var(--font-size-medium);
  color: var(--color-doc-fg);
  flex-grow: 1;
  flex: 1;
  height: 100%;
  border-radius: var(--border-radius-base);
  background: var(--color-doc-aside-bg);
  padding: 0.75rem;
  max-width: 50%;
}

main#article footer.article-pagination .article-title {
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline;
}

main#article footer.article-pagination a.prev {
  align-items: flex-end;
  text-align: right;
}
main#article footer.article-pagination a.next {
  align-self: flex-end;
  margin-left: auto;
}
main#article footer.article-pagination a .direction {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--color-doc-subtle-fg);
  text-transform: uppercase;
  font-weight: normal;
  font-size: var(--font-size-small);
  height: 1.5rem;
  gap: 0.5rem;
}
main#article footer.article-pagination a .direction .icon {
  color: var(--color-doc-subtle-fg);
  font-size: var(--font-size-medium);
  margin-bottom: 3px;
}

main#article footer.article-pagination a:hover {
  text-decoration: none;
  background: var(--color-doc-aside-bg);
  color: var(--color-pink-1);
}

main#article .unison-at-work-cta {
  background: var(--color-blue-5);
  color: var(--color-gray-darken-20);
  padding: 1rem;
  border-radius: var(--border-radius-base);
  font-size: 1rem;
  margin: 2rem 6rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}

main#article .unison-at-work-cta p {
  width: 70%;
}

main#article .unison-at-work-cta .button {
  margin-left: auto;
}

@media only screen and (max-width: 1439px) {
  main#article nav#index {
    position: static;
    transform: none;
    border: none;
    padding: 2rem 0;
    margin-bottom: 2rem;
    width: auto;
    border-top: 1px solid var(--color-doc-content-border);
    border-bottom: 1px solid var(--color-doc-content-border);
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }

  main#article nav#index .links,
  main#article nav#index .compositional-distributed-systems-cta {
    align-self: stretch;
  }

  main#article nav#index .links a[aria-current]:before {
    position: absolute;
    content: " ";
    left: -1.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--color-pink-1);
  }

  main#article nav#index .compositional-distributed-systems-cta {
    margin-top: 0;
    margin-left: auto;
    justify-self: flex-start;
  }

  main#article nav#index .links .in-this-article {
    display: block;
  }

  main#article nav#index .links .in-this-article,
  main#article nav#index .links a {
    justify-content: flex-start;
    text-align: left;
  }

  main#article nav#index a[aria-current]:after {
    display: none;
  }
}

@media only screen and (max-width: 1264px) {
  #main-content {
    margin-left: 2rem;
  }
}

@media only screen and (max-width: 1110px) {
  #main-content {
    margin-left: 0;
  }
}

@media only screen and (max-width: 1024px) {
  main#article .unison-at-work-cta {
    margin: 2rem auto;
  }

  main#article footer.article-pagination {
    flex-direction: column;
  }
  main#article footer.article-pagination a {
    max-width: none;
  }

  main#article footer.article-pagination a.prev {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  main#article footer.article-pagination a.next {
    align-self: flex-start;
    margin-left: 0;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  main#article #title {
    font-size: 3rem;
  }

  main#article nav#index {
    flex-direction: column;
    align-items: flex-start;
  }

  main#article nav#index .links,
  main#article nav#index .compositional-distributed-systems-cta {
    height: auto;
  }

  main#article nav#index .compositional-distributed-systems-cta {
    justify-content: flex-start;
    align-self: flex-start;
    text-align: left;
    margin: 0;
    margin-top: 4rem;
  }

  main#article .unison-at-work-cta {
    margin: 2rem 0;
    flex-direction: column;
    text-align: center;
  }
  main#article .unison-at-work-cta p {
    width: auto;
  }
  main#article .unison-at-work-cta .button {
    margin-left: 0;
    margin-top: 1rem;
  }
}
 
main#docs {
  --main-content-width: 50rem;
  margin: auto;
}

main#docs #toggle-index {
  position: absolute;
  width: 2rem;
  height: 2rem;
  background: var(--color-gray-lighten-50);
  border-radius: var(--border-radius-base);
  display: none;
  align-items: center;
  justify-content: center;
}

main#docs #toggle-index .icon {
  width: 1.5rem;
  height: 1.5rem;
}

main#docs #toggle-index .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

main#docs #title {
  letter-spacing: 0.1rem;
  font-size: 2.2rem;
  margin: 0rem 0 2rem 0;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--color-gray-darken-10);
}

main#docs #index {
  position: absolute;
  left: 0;
  width: 18.5rem;
  background: var(--color-gray-lighten-60);
  transform: translateX(-100%);
  font-size: var(--font-size-medium);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 0 1rem;
  border-radius: var(--border-radius-base);
}

main#docs #index #search-button {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
  justify-content: flex-start;
  width: max-content;
  border: 1px solid var(--color-gray-lighten-45);
}

main#docs #index #search-button:hover {
  border: 1px solid var(--color-gray-lighten-30);
}

main#docs #index .unison-doc {
  color: var(--color-gray-lighten-20);
  font-size: var(--font-size-medium);
  background: var(--color-gray-lighten-60);
}

main#docs #index section {
  margin-top: 0;
}

main#docs #index h1 {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  color: var(--color-gray-base);
  transition: all 0.2s;
}

main#docs #index h1 .icon {
  font-size: 1.125rem;
  color: var(--color-gray-lighten-20);
}

main#docs #index .is-expanded h1 {
  color: var(--color-gray-darken-20);
}

main#docs #index .is-expanded h1 .icon {
  color: var(--color-gray-darken-20);
}

main#docs #index .is-expanded h1 .icon {
  transform: rotate(90deg);
}

main#docs #index h1:hover {
  color: var(--color-pink-1);
}

main#docs #index h1:hover .icon {
  color: var(--color-pink-2);
}

main#docs #index ul {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: 1rem;
}

main#docs #index ul li {
  margin-bottom: 0.25rem;
}

main#docs #index a {
  color: var(--color-main-fg);
}

main#docs #index a:hover {
  color: var(--color-pink-1);
}

main#docs #index a[aria-current] {
  color: var(--color-gray-darken-30);
  font-weight: bold;
}

main#docs #index a[aria-current]:before {
  position: absolute;
  left: -1rem;
  content: " ";
  width: 0.25rem;
  height: 1.5rem;
  background: var(--color-pink-1);
  border-radius: var(--border-radius-base);
}

main#docs #index ul {
  display: none;
}

main#docs #index .is-expanded ul {
  display: block;
}

main#docs #index .is-expanded > ul > li {
  margin-left: 0.5rem;
}

main#docs #index section > ul > li {
  margin-left: 1rem;
}
main#docs #index ul.column ul {
  margin-left: 1rem;
}

main#docs #index .welcome {
  margin-bottom: 2rem;
}

main#docs #index .welcome h1 {
  display: none;
}

main#docs #index .welcome ul {
  display: block;
}

main#docs #index .welcome ul li {
  margin-left: 0;
}

main#docs .where-to-next {
  border-top: 1px solid var(--color-main-divider);
  margin-top: 2.5rem;
}
main#docs .where-to-next h2 {
  margin-bottom: 1rem;
}

/* -- Autocomplete Search -------------------------------------------------- */

#autocomplete {
  --autocomplete-width: 40rem;
}

#autocomplete-search {
  z-index: var(--layer-modal-above);
  position: absolute;
  top: 0rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gray-lighten-100);
  display: none;
  width: var(--autocomplete-width);
  box-shadow: 0 0.375rem 1rem var(--color-modal-shadow),
    0 0 0 1px var(--color-modal-border);
  margin-top: -1.85rem;
  margin-left: -1px;
  border-radius: var(--border-radius-base);
}

#autocomplete.show-search #autocomplete-search {
  display: flex;
  flex-direction: column;
}

#autocomplete.show-search #autocomplete-search li {
  width: var(--autocomplete-width);
  list-style-type: none;
}

#autocomplete.show-search #autocomplete-search .aa-Form {
  display: flex;
  flex-direction: row;
  background: var(--color-gray-lighten-60);
  border-radius: var(--border-radius-base);
  height: 3rem;
  align-items: center;
}

#autocomplete.show-search #autocomplete-search .aa-InputWrapperPrefix {
  position: absolute;
}

#autocomplete.show-search #autocomplete-search .icon-search {
  font-size: 1.5rem;
  line-height: 3rem;
  margin-left: 1rem;
  margin-right: 0.75rem;
  margin-top: -3px;
  color: var(--color-modal-subtle-fg);
}

#autocomplete.show-search #autocomplete-search .aa-InputWrapper {
  height: 3rem;
}

#autocomplete.show-search #autocomplete-search input {
  background: var(--color-gray-lighten-60);
  width: calc(var(--autocomplete-width) - 2px);
  height: 3rem;
  border-radius: var(--border-radius-base);
  padding-right: 0.75rem;
  padding-left: 3.25rem;
  line-height: 3rem;
  font-size: var(--font-size-base);
  font-weight: bold;
  appearance: none !important;
}
#autocomplete.show-search #autocomplete-search input::placeholder {
  font-weight: normal;
}
#autocomplete.show-search #autocomplete-search input:focus {
  outline: none;
}

#autocomplete.show-search
  #autocomplete-search
  input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: relative;
  height: 0.875rem;
  width: 0.875rem;
  right: 0;
  background: url(/assets/icon-x.svg);
  opacity: 0.4;
}

#autocomplete.show-search #autocomplete-search mark {
  background: none;
  color: var(--color-blue-2);
}

#autocomplete.show-search #autocomplete-panel .aa-Panel {
  border-top: 1px solid var(--color-modal-inner-border);
}

#autocomplete.show-search #autocomplete-search .match {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.375rem 0.75rem;
  margin: 0.75rem;
  border-radius: var(--border-radius-base);
}

#autocomplete.show-search #autocomplete-search [aria-selected="true"] .match {
  background: var(--color-gray-lighten-55);
}
#autocomplete.show-search #autocomplete-search .match:hover {
  text-decoration: none;
  background: var(--color-gray-lighten-55);
}

#autocomplete.show-search #autocomplete-search .match .match-title {
  font-size: var(--font-size-medium);
  font-weight: bold;
  color: var(--color-gray-darken-20);
  line-height: 1.5rem;
}
#autocomplete.show-search #autocomplete-search .match .match-content {
  font-size: var(--font-size-small);
  color: var(--color-gray-darken-20);
  line-height: 1.5rem;
}

/* removing some default algolia ui */
#autocomplete-search .aa-SubmitButton,
#autocomplete-search .aa-ClearButton {
  display: none;
}


@media only screen and (max-width: 1439px) {
  main#docs #main-content {
    position: static;
  }

  main#docs #toggle-index {
    display: flex;
    left: 2rem;
    top: calc(var(--main-header-height) + var(--main-content-top-margin));
    margin-top: 0.35rem;
  }

  main#docs #index {
    position: absolute;
    top: calc(var(--main-header-height) + var(--main-content-top-margin));
    margin-top: 0.35rem;
    left: 4.5rem;
    bottom: 2rem;
    transform: none;
    background: var(--color-gray-lighten-50);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
  }

  main#docs.show-index #index {
    display: block;
  }

  main#docs #index .unison-doc {
    background: var(--color-gray-lighten-50);
  }
}

@media only screen and (max-width: 1264px) {
  main#docs #toggle-index {
    left: 1rem;
  }

  main#docs #index {
    left: 3.5rem;
  }
}

@media only screen and (max-width: 1110px) {
  main#docs #toggle-index {
    left: 2rem;
    top: 0.25rem;
  }

  main#docs #index {
    left: 2rem;
    top: 3rem;
  }
}

@media only screen and (max-width: 960px) {
  main#docs {
    --main-content-width: 100vw;
  }

  #autocomplete {
    --autocomplete-width: 100vw - 6rem;
  }

  #autocomplete-search {
    top: 3rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  main#docs #toggle-index {
    left: 1rem;
    top: 0.75rem;
  }

  main#docs #index {
    left: 1rem;
    top: 3.5rem;
    bottom: 1rem;
  }
}

@media only screen and (max-width: 600px) {
  main#docs #index {
    width: calc(100vw - 2rem);
  }
}
 
#blog-index {
  --main-content-width: 64rem;
}

#blog-index .post-summaries {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 2rem;
  column-gap: 2rem;
  padding-left: 2rem;
}

#blog-index .post-summaries .card {
  width: calc(50% - 2rem);
  transition: all 0.2s;
}

#blog-index .post-summaries .card:hover {
  background: var(--color-gray-lighten-50);
  text-decoration: none;
}

#blog-index .post-summaries .card img {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

#blog-index .post-summaries .card .categories {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  font-size: var(--font-size-small);
  color: var(--color-main-subtle-fg-em);
  text-transform: capitalize;
  margin-bottom: 0.5rem;
}

#blog-index .categories .category:after {
  content: ", ";
}

#blog-index .categories .category:last-child:after {
  content: "";
}

#blog-index .post-summaries .card h2 {
  font-size: 1.3rem;
  line-height: 1.3;
}

#blog-index .post-summaries .card p {
  font-size: var(--font-size-medium);
}

#blog-index .post-summaries .card footer {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  font-size: var(--font-size-small);
  color: var(--color-main-subtle-fg-em);
}

#blog-index .post-summaries .card footer .authors {
  padding-right: 0.5rem;
  border-right: 1px solid var(--color-main-border);
  color: var(--color-main-fg);
  display: flex;
  gap: 0.25rem;
}

#blog-index .post-summaries .authors .author:after {
  content: ", ";
}
#blog-index .post-summaries .authors .author:last-child:after {
  content: "";
}

#blog-index .post-summaries .card:first-child h2 {
  color: var(--color-pink-1);
}

@media only screen and (max-width: 1264px) {
  #blog-index {
    --main-footer-height: 6rem;
    --main-content-width: 100vw;
  }

  #blog-index #main-content {
    padding: 0 1.5rem;
  }
}

@media only screen and (max-width: 768px) {
  #blog-index .post-summaries .card {
    width: 100%;
  }
}

#blog-post {
  --main-content-width: min(100vw, 64rem);
}

#blog-post #main-content video {
  width: 100%;
}

#blog-post #main-content img {
  max-width: 100%;
  max-height: 33.375rem;
}

#blog-post #main-content iframe {
  margin: auto;
  display: flex;
}

/* header */

#blog-post header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#blog-post h1#title {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 900;
  color: var(--color-gray-base);
  margin: 1rem 0 1.25rem 0;
}

#blog-post .categories-and-date {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  font-size: var(--font-size-small);
  color: var(--color-main-subtle-fg-em);
}

#blog-post .categories {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  text-transform: capitalize;
  padding-right: 0.5rem;
  border-right: 1px solid var(--color-main-border);
}

#blog-post .categories .category:after {
  content: ", ";
}
#blog-post .categories .category:last-child:after {
  content: "";
}

#blog-post .authors {
  display: flex;
  flex-direction: row;
  font-size: var(--font-size-medium);
  gap: 0.25rem;
}

#blog-post .authors .author:after {
  content: ", ";
}
#blog-post .authors .author:last-child:after {
  content: "";
}

#blog-post #main-content img.featured-image {
  display: flex;
  margin: 2rem auto;
}

/* content */

#blog-post .post-header,
#blog-post .unison-doc {
  width: min(100%, 50rem);
  margin: auto;
}
 
#unison-forall-2022 {
  display: flex;
  flex-direction: column;
}

#unison-forall-2022 .hero {
  width: 60rem;
  margin: 1rem auto;
  background: var(--color-gray-darken-10);
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  overflow: clip;
}

#unison-forall-2022 .hero footer {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

#unison-forall-2022 .hero footer img {
  margin: auto;
  width: 42rem;
}

#unison-forall-2022 .hero hr {
  opacity: 0.25;
  width: 20rem;
  margin: auto;
}

#unison-forall-2022 .hero .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--color-gray-lighten-40);
}
#unison-forall-2022 .hero .text h2,
#unison-forall-2022 .hero .text h3 {
  font-size: 1.25rem;
  font-weight: normal;
}
#unison-forall-2022 .hero .text h3 {
  font-weight: bold;
  color: var(--color-gray-lighten-60);
}
#unison-forall-2022 .hero .text hr {
  margin: 1.5rem 0;
  width: 2rem;
}

@media only screen and (max-width: 600px) {
  #unison-forall-2022 .hero {
    width: 100%;
    border-radius: 0;
    margin-top: 4rem;
  }
  #unison-forall-2022 .hero footer {
    font-size: 0.875rem;
  }
  #unison-forall-2022 .hero footer img {
    max-width: 75%;
  }
  #unison-forall-2022 .hero .text h2,
  #unison-forall-2022 .hero .text h3 {
    font-size: 0.875rem;
    font-weight: normal;
  }
}

#unison-forall-2024 {
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
}

#unison-forall-2024 .conference-content a:not(.button),
#unison-forall-2024 .conference-content a:not(.button):visited {
  color: var(--color-blue-1);
}

#unison-forall-2024 hr {
  height: 1px;
  background: var(--color-gray-lighten-50);
}

.card {
  padding: 1.5rem;
  background: var(--color-gray-lighten-55);
  border-radius: 0.5rem;
}

#unison-forall-2024 .hero {
  width: 60rem;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  overflow: clip;
}

#unison-forall-2024 .hero .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--color-gray-darken-30);
}

#unison-forall-2024 .hero .text h2 {
  font-size: 1.25rem;
  font-weight: normal;
}

.conference-title {
  font-size: 3rem;
  color: var(--color-gray-darken-10);
  font-weight: 900;
  margin-top: 2rem;
}

.conference-description {
  width: 54rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.conference-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-gray-base);
}


.conference-description .card {
  background: var(--color-blue-5);
  text-align: center;
  text-wrap: pretty;
  font-size: 1.125rem;
}

.conference-description .actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.conference-details {
  width: 54rem;
  margin: auto;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.125rem;
}

.conference-details .card {
  background: var(--color-gray-lighten-100);
  border: 1px solid var(--color-gray-lighten-40);
}

.conference-details h3 {
  font-size: 1.25rem;
  font-weight: bold;
}

.conference-details h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.conference-details .expectation {
  margin: 0 1.5rem;
}

.conference-details .expectation p {
  margin-left: 1.5rem;
  text-wrap: pretty;
}

.schedule {
  width: 54rem;
  margin: auto;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.125rem;
}

.schedule-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schedule-slot {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
}

.schedule-slot.break {
  align-items: center;
}

.schedule-slot.break .schedule-time-range {
  margin-top: 0;
}

.schedule-slot.break h3 {
  margin-bottom: 0;
}

.schedule-time-range {
  width: 15%;
  font-size: var(--font-size-medium);
  margin-top: 0.25rem;
}

.schedule-description {
  width: 65%;
  font-size: var(--font-size-medium);
}

.schedule-description h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.schedule-speaker {
  width: 20%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.speaker-photo {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  background-size: cover;
}

.schedule-speaker h4 {
  font-size: var(--font-size-medium);
}

@media only screen and (max-width: 1024px) {
  #unison-forall-2024 .hero,
  .conference-details,
  .schedule {
    width: 100%;
    padding: 0 1.5rem;
  }

  .conference-description {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  #unison-forall-2024 .hero {
    margin-top: 4rem;
  }

  #unison-forall-2024 .hero footer {
    font-size: 0.875rem;
  }

  #unison-forall-2024 .hero footer img {
    max-width: 75%;
  }

  #unison-forall-2024 .hero .text h2 {
    font-size: 0.875rem;
    font-weight: normal;
  }

  #unison-forall-2024 .schedule-slot {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  #unison-forall-2024 .schedule-time-range,
  #unison-forall-2024 .schedule-description,
  #unison-forall-2024 .schedule-speaker {
    width: auto;
  }

  #unison-forall-2024 .schedule-speaker {
    flex-direction: row;
    gap: 0.5rem;
  }

  #unison-forall-2024 .schedule-speaker .speaker-photo {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
  }
}

#adventofcode2024 {
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
}

#adventofcode2024 hr {
  height: 1px;
  background: var(--color-gray-lighten-50);
}

#adventofcode2024 ul {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}

#adventofcode2024 ul + h3 {
  margin-top: 1rem;
}

#adventofcode2024 h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: bold;
}

#adventofcode2024 pre code {
  background: var(--color-gray-lighten-55);
  width: 100%;
  border-radius: var(--border-radius-base);
  padding: 1rem;
}

#adventofcode2024 .hero {
  width: 60rem;
  margin: 3rem auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  overflow: clip;
}

#adventofcode2024 .hero .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--color-gray-darken-30);
}

.description.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  margin-top: 0.5rem;
  background: var(--color-green-5);
  max-width: 32rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.details {
  max-width: 38rem;
  margin: auto;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.125rem;
  padding: 0 1.5rem;
}

.details a {
  color: var(--color-green-1);
}

@media only screen and (max-width: 1024px) {
  #adventofcode2024 .hero {
    width: 100%;
    padding: 0 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #adventofcode2024 .hero {
    margin-top: 4rem;
  }

  #adventofcode2024 .hero footer {
    font-size: 0.875rem;
  }

  #adventofcode2024 .hero footer img {
    max-width: 75%;
  }
}

#unison-share-next {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 30rem;
}
#unison-share-next h1 {
  letter-spacing: 0.1rem;
  font-size: 2.5rem;
  margin: 3rem 0 2rem 0;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--color-gray-darken-10);
}

#unison-share-next p {
  margin-bottom: 1rem;
}

#unison-share-next form {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  background: var(--color-gray-lighten-60);
  padding: 1rem;
  border-radius: var(--border-radius-base);
  margin-top: 2rem;
}

#unison-share-next input {
  border: 1px solid var(--color-gray-lighten-30);
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-medium);
  border-radius: var(--border-radius-base);
  width: 100%;
}

@media only screen and (max-width: 600px) {
  #unison-share-next {
    width: 100%;
    padding: 1rem;
  }

  #unison-share-next h1 {
    font-size: 2rem;
    margin-top: 4rem;
  }
}

#roadmap {
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* hack */
}

#roadmap #hero {
  border-radius: 0.75rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  width: 64rem;
  margin: auto;
  margin-top: calc(var(--main-content-top-margin) - 1rem);
  background: url(/assets/roadmap-hero.svg) no-repeat center;
  height: 22.25rem;
  background-size: contain;
}

#roadmap #hero h1 {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-blue-2);
  max-width: 40rem;
  margin: auto;
  text-shadow: white 0 0 2px;
  line-height: 1.2;
  padding-top: 1rem;
}

#roadmap #hero h1 .hero-roadmap {
  color: var(--color-gray-darken-10);
}

#roadmap #hero h2 {
  color: var(--color-gray-lighten-20);
  font-size: 2rem;
  text-shadow: white 0 0 2px;
}

#roadmap .main-content {
  width: 64rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;
}

#roadmap .main-content .divider {
  margin: 0;
}

.roadmap_intro {
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  font-size: 1;
  text-align: center;
  color: var(--color-gray-base);
  line-height: 1.5;
}

.roadmap_intro .subtle {
  color: var(--color-gray-lighten-20);
}

.roadmap_section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.roadmap_section .roadmap_section_header {
  padding: 0 1.5rem;
}
.roadmap_section .roadmap_section_header p {
  color: var(--color-gray-lighten-20);
}

.roadmap_section h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.roadmap_items {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

.roadmap_item {
  background: var(--color-gray-lighten-60);
  padding: 1.5rem;
  width: calc(33% - 0.5rem);
  border-radius: var(--border-radius-base);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.roadmap_item header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.roadmap_item header h3 {
  font-size: 1.25rem;
}

.roadmap_item .roadmap_areas {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.roadmap_item .roadmap_areas li {
  border-radius: var(--border-radius-base);
  font-size: 0.625rem;
  font-weight: bold;
  line-height: 1;
  padding: 0.25rem 0.375rem;
  background: var(--color-gray-lighten-40);
  color: var(--color-gray-base);
  height: 1.125rem;
  white-space: nowrap;
}

.roadmap_item .roadmap_areas li.unison-share {
  background: var(--color-purple-5);
  color: var(--color-purple-1);
}

.roadmap_item .roadmap_areas li.ucm,
.roadmap_item .roadmap_areas li.performance {
  background: var(--color-orange-3);
  color: #d37100;
}

.roadmap_item .roadmap_areas li.core-language,
.roadmap_item .roadmap_areas li.runtime {
  background: var(--color-green-3);
  color: #158745;
}

.roadmap_item .roadmap_areas li.cloud,
.roadmap_item .roadmap_areas li.services {
  background: var(--color-blue-4);
  color: var(--color-blue-1);
}

.roadmap_item .roadmap_item_description {
  font-size: 1rem;
}

.roadmap_item_list {
  flex-direction: column;
}

.roadmap_item_list .roadmap_item {
  width: 100%;
  padding: 1rem 1.5rem;
  position: relative;
  transition: all 0.2s;
}

.roadmap_item_list .roadmap_item .tooltip {
  opacity: 0;
  display: absolute;
  top: 3rem;
  background: var(--color-gray-lighten-40);
  color: var(--color-gray-darken-30);
  max-width: 19rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-base);
  transition: all 0.2s;
  pointer-events: none;
}
.roadmap_item_list .roadmap_item:hover {
  background: var(--color-gray-lighten-55);
}
.roadmap_item_list .roadmap_item:hover .tooltip {
  opacity: 1;
}

.roadmap_item_list .roadmap_item .tooltip:after {
  bottom: 100%;
  left: 1rem;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: var(--color-gray-lighten-40);
  border-width: 0.5rem;
  margin-left: -0.5rem;
}

.roadmap_item_small header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.roadmap_item_small header h3 {
  font-size: 1rem;
}

@media only screen and (max-width: 1056px) {
  #roadmap #hero {
    height: auto;
  }

  #roadmap #hero,
  #roadmap .main-content {
    width: 100%;
  }

  #roadmap .main-content {
    padding: 0 2rem;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 720px) {
  #roadmap #hero {
    background: 0;
    padding: 0 2rem;
  }
  #roadmap #hero h1 {
    font-size: 3rem;
  }
  #roadmap #hero h2 {
    font-size: 1.5rem;
  }
  #roadmap .main-content {
    margin-top: 3rem;
    padding: 0 1.5rem;
  }

  .roadmap_section .roadmap_section_header {
    padding: 0;
  }

  .roadmap_items {
    flex-direction: column;
  }
  .roadmap_items .roadmap_item {
    width: 100%;
  }

  .roadmap_items .roadmap_item .tooltip {
    max-width: 10rem;
  }
}