html,
body {
  margin: 0;
  padding: 0;
}

:root {
  --ember-brand: #e04e39;
  --ember-black: #212121;
  --ember-burnt-ember: #9b2918;
  --ember-gray: #817f7f;
  --ember-blue: #1e719b;
  --ember-faint-gray: #efebea;
  --ember-light-blue: #74b0ce;
  --ember-linen: #fdf7f6;
  --ember-yellow: #fbc840;
  --ember-white: #fdfdfd;

  /* "Dark" */
  --horizon-lavender: #b877db;
  --horizon-turquoise: #25b2bc;
  --horizon-cranberry: #e95678;
  --horizon-apricot: #f09383;
  --horizon-rosebud: #fab795;
  --horizon-tacao: #fac29a;

  /* "Light" */
  --horizon-amethyst: #8931b9;
  --horizon-elm: #1d8991;
  --horizon-crimson: #da103f;
  --horizon-thunderbird: #dc3318;
  --horizon-tango: #f6661e;
  --horizon-jaffa: #f77d26;
}

@media (prefers-color-scheme: dark) {
  body {
    --page-bg: var(--ember-black);
    --page-font: var(--ember-white);
    --link-font: var(--horizon-lavender);
    --github-bg: var(--ember-faint-gray);
    --github-border: var(--ember-light-blue);
    --github-font: white;
    --github-hover: var(--ember-gray);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.001s !important;
  }
}

body {
  --page-bg: var(--ember-faint-gray);
  --page-font: var(--ember-black);
  --link-font: var(--ember-blue);
  --link-hover: var(--ember-light-blue);
  --github-bg: var(--ember-black);
  --github-border: var(--ember-black);
  --github-font: white;
  --github-hover: var(--ember-gray);

  font-family: Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--page-font);
}

.theme-light {
  --page-bg: var(--ember-faint-gray);
  --page-font: var(--ember-black);
  --link-font: var(--ember-blue);
  --link-hover: var(--ember-light-blue);
  --github-bg: var(--ember-black);
  --github-border: var(--ember-gray);
  --github-font: white;
  --github-hover: var(--ember-gray);
}

.theme-dark {
  --page-bg: var(--ember-black);
  --page-font: var(--ember-white);
  --link-font: var(--horizon-lavender);
  --github-bg: var(--ember-faint-gray);
  --github-border: var(--ember-light-blue);
  --github-font: white;
  --github-hover: var(--ember-gray);
}

.preem__site-theme-toggle:has(input:focus-visible) label .ball,
.fun-switch > span:has(input:focus-visible) label::after,
*:focus-visible,
*:focus {
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 50%);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);

  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  outline: none;
  outline-offset: 2px;
}

.fun-switch > span:has(input:focus-visible) label::after,
.preem__site-theme-toggle:has(input:focus-visible) label .ball {
  --tw-ring-color: rgb(59 130 246 / 90%);
}

main {
  padding: 1rem;
}

.centered {
  margin: 0 auto;
}

g[aria-label="tip"] {
  fill: var(--page-bg);
  color: var(--page-font);
}
:root {
  color-scheme: light dark;

  /* General */
  --radius: 0.25rem;
  --font: ui-sans-serif, sans-serif;
  --fade-duration: 0.125s;

  /* z-indexes */
  --z-hover: 10;
  --z-focused: 11;
  --z-site-nav: 50;

  /* Spacing */
  --gap: 0.25rem;
  --gap-1: var(--gap);
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --line-height: 1.5rem;

  --padding: 0.5rem;
  --padding-1: 0.25rem;
  --padding-2: var(--padding);
  --padding-3: 0.75rem;
  --padding-4: 1rem;

  /* Focus */
  --ring-opacity: 1;
  --ring-color: rgb(224 78 57 / var(--ring-opacity, 1));

  /* Borders */
  --border-width: 1px;
  --border-style: solid;

  /* Shadows */
  --shadow-xl: drop-shadow(0px 2px 0.75rem rgba(0, 0, 0, 0.3));
  --shadow-md: drop-shadow(0px 2px 0.25rem rgba(0, 0, 0, 0.2));

  /* Components */
  --button-border-color-mix: rgb(100, 100, 100);
  --button-hover-color-mix: rgb(255, 255, 255);
  --button-border-radius: var(--radius);
  --button-border-width: var(--border-width);
  --button-border-style: var(--border-style);
  --button-border-color: var(--border-color);

  --reason-shadow: var(--shadow-md);
}

/* Default / light mode */
:root,
.theme-light {
  /* Colors */
  --color-text: #121212;
  --color-primary: #88cdff;
  --color-secondary: #aaaaff;
  --color-danger: #ff66bb;
  --color-disable-mix: #bbb;

  /* Focus */
  --ring-color: rgb(100 100 224 / var(--ring-opacity, 1));

  /* Components */
  --button-color: rgb(220, 220, 220);
  --reason-background-color: rgb(240, 240, 240);
  --reason-border: 2px solid #eee;
  --header-background: #fff;
}

.theme-dark {
  /* Colors */
  --color-text: #ffffff;
  --color-primary: #00cdff;
  --color-secondary: #5555ff;
  --color-danger: #ee0055;
  --color-disable-mix: #000;

  /* Focus */
  --ring-color: rgb(224 78 57 / var(--ring-opacity, 1));

  /* Components */
  --button-color: rgb(100, 100, 100);
  --reason-background-color: rgb(50, 50, 50);
  --reason-border: 1px solid #222;
  --header-background: #111;
}

@media (prefers-reduced-motion) {
  --fade-duration: 0s;
}

html,
body {
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

html,
body,
button {
  font-family: var(--font);
}

* {
  box-sizing: border-box;
}

main {
  padding: var(--padding);
}
a,
button,
input,
select,
textarea,
[role="switch"],
[role="button"],
[tabindex] {
  &:focus,
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    z-index: var(--z-focused);
  }
  /**
   * Due to the size of the focus ring, every interactive must have at least 4px (--padding-1, by default)
   * of space between it and a hard boundary
   */
  &:focus-visible {
    box-shadow:
      0 0 0px 2px black,
      0 0 0 4px var(--ring-color);
    border-radius: var(--radius);
    z-index: var(--z-focused);
  }
}

.preem__site-theme-toggle {
  &:has(:focus),
  &:has(:focus-visible) {
    label {
      outline: 2px solid transparent;
      outline-offset: 2px;
      z-index: var(--z-focused);
    }
  }
  &:has(:focus-visible) {
    label {
      box-shadow:
        0 0 0px 2px black,
        0 0 0 4px var(--ring-color);
      border-radius: var(--radius);
      z-index: var(--z-focused);
    }
  }
}
.preem__button {
  --button-background-color: var(--button-color);
  --button-hover-mix: 0%;
  --button-interact-spread: 0;
  --button-background-mix: 75%;
  --button-disable-mix: 0%;
  --button-disable-background-mix: 50%;
  --button-disable-border-mix: 50%;
  --button-padding-y: var(--padding-1);
  --button-padding-x: var(--padding-3);
  --button-shadow-offset-y: 1px;
  --button-shadow-offset-x: 0px;
  --button-shadow-blur: 1px;
  --button-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y)
    var(--button-shadow-blur) var(--button-interact-spread) var(--button-background-color);

  /* Behaviors */
  transition: all 0.2s;

  /* Layout */
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--gap);
  align-items: baseline;
  padding: var(--button-padding-y) var(--button-padding-x);
  line-height: var(--line-height);

  /* Borders */
  border-radius: var(--button-border-radius);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);

  /* Colors */
  box-shadow: var(--button-shadow);
  color: color-mix(
    in oklab,
    var(--color-text) 85%,
    var(--color-disable-mix) calc(var(--button-disable-mix) / 3)
  );

  background: color-mix(
    in oklab,
    color-mix(
        in oklab,
        var(--button-background-color) var(--button-background-mix),
        var(--button-hover-color-mix) var(--button-hover-mix)
      )
      var(--button-disable-background-mix),
    var(--color-disable-mix) var(--button-disable-mix)
  );

  border-color: color-mix(
    in oklab,
    color-mix(
        in oklab,
        var(--button-background-color) var(--button-background-mix),
        var(--button-border-color-mix) var(--button-hover-mix)
      )
      var(--button-disable-border-mix),
    var(--color-disable-mix) var(--button-disable-mix)
  );

  /* States */
  &[data-variant="primary"] {
    --button-background-color: var(--color-primary);
  }
  &[data-variant="secondary"] {
    --button-background-color: var(--color-secondary);
  }
  &[data-variant="danger"] {
    --button-background-color: var(--color-danger);
  }

  &:hover {
    --button-hover-mix: 30%;
    --button-interact-spread: 1px;
  }

  /* Press, tap, etc */
  &:active {
    --button-hover-mix: 30%;
    --button-hover-color-mix: #000;
    --button-interact-spread: -1px;
    .preem__button__text {
      transform: scale(0.98);
    }
  }

  &[aria-disabled] {
    --button-disable-mix: 50%;
    --button-interact-spread: -1px;
  }

  --button-reason-border-target: white;

  /* Control the tooltip from the button */
  &:hover,
  &:focus-visible {
    .preem__button__disabled-reason {
      opacity: 1;
      pointer-events: all;
    }
  }
}

/**
* IMPORTANT: In order for the tooltip to participate in
*  the tab order, it can't be hidden (display: none)
*  or (visibility: hidden)
*/
.preem__button__disabled-reason {
  display: block;
  opacity: 0;
  pointer-events: none;

  padding: var(--padding);
  width: max-content;
  position: absolute;
  text-align: left;
  background: var(--reason-background-color);
  border: var(--reason-border);
  color: var(--color-text);
  border-radius: 4px;
  font-size: 90%;
  filter: var(--reason-shadow);
  z-index: 10;
  transition: opacity var(--fade-duration);

  .arrow {
    position: absolute;
    background: var(--reason-background-color);
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
  }

  /* When hovering / focusing, don't close the tooltip */
  &:hover,
  &:focus,
  &:active,
  &:focus-visible,
  &:has(:focus),
  &:has(:focus-visible) {
    opacity: 1;
    pointer-events: all;
  }
}
.preem__external-link {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0.5rem;
}
.preem__header {
  filter: var(--shadow-xl);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
  background: var(--header-background);
  position: sticky;
  top: 0;
  z-index: var(--z-site-nav);

  .preem__header__left {
  }
  .preem__header__right {
    display: flex;
    gap: 1rem;
  }
}
.preem__site-theme-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin: 0;
  transition: background 0.2s linear;

  .preem__sr-only {
    margin-left: -0.5rem;
  }
  input[type="checkbox"][role="switch"] {
    opacity: 0;
    position: absolute;
  }
  label {
    background-color: #111;
    min-width: 40px;
    flex-grow: 1;
    aspect-ratio: 2.1;
    border-radius: 50px;
    position: relative;
    padding: 4% 8%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    box-shadow: inset 1px 0px 1px gray;
  }
  svg {
    fill: currentColor;
    height: 90%;
  }
  .fa-moon {
    color: #f1c40f;
  }
  .fa-sun {
    color: #f39c12;
  }
  label .ball {
    --button-background-mix: 100%;
    --button-disable-background-mix: 100%;
    --button-background-color: white;
    --button-padding-y: 0;
    --button-padding-x: 0;
    --button-border-width: 0;
    --button-shadow: none;
    width: 42%;
    height: 88%;
    position: absolute;
    left: 3%;
    border-radius: 50%;
    transition: transform 0.2s linear;
  }

  input[type="checkbox"][role="switch"]:checked + label .ball {
    transform: translateX(120%);
  }
}
.preem__sr-only {
  width: 0px;
  max-width: 0px;
  height: 0px;
  max-height: 0px;
  overflow: hidden;
  position: absolute;
}
.json-tree-view {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.4;
  background: #1e1e1e;
  border-radius: 4px;
  padding: 1rem;
  overflow-y: auto;
}

.no-changes {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

.tree-node {
  padding-left: 1rem;
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
    }
  }
}

.tree-line {
  display: flex;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 2px 0;
  border-radius: 2px;

  > span {
    display: grid;
    column-gap: 0.5rem;
    row-gap: 0;
    grid-template-areas:
      "toggle key"
      ". path";

    button.toggle, span.toggle {
      grid-area: toggle;
    }
    .key {
      grid-area: key;
    }
    .path-indicator {
      grid-area: path;
    }
  }
}

.tree-line:hover {
  background: rgba(255, 255, 255, 0.05);
}

.toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  user-select: none;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.toggle:hover {
  color: #aaa;
}

.toggle.expandable {
  color: #888;
}

.key {
  color: #9cdcfe;
  margin-right: 8px;
  font-weight: 500;
}

.value {
  flex: 1;
  min-width: 0;
}

.value-same {
  color: #d4d4d4;
}

.value-added {
  color: #4ec9b0;
  background: rgba(78, 201, 176, 0.1);
  border-left: 3px solid #4ec9b0;
  padding-left: 6px;
}

.value-removed {
  color: #f48771;
  background: rgba(244, 135, 113, 0.1);
  border-left: 3px solid #f48771;
  padding-left: 6px;
  text-decoration: line-through;
}

.added-wrapper {
  /* color: #4ec9b0; */
  /* background: rgba(78, 201, 176, 0.1); */
  /* border-left: 3px solid #4ec9b0; */
  /* padding-left: 6px; */
  position: relative;
}

.removed-wrapper {
  /* color: #f48771; */
  /* background: rgba(244, 135, 113, 0.1); */
  /* border-left: 3px solid #f48771; */
  /* padding-left: 6px; */
  /* text-decoration: line-through; */
  position: relative;
}

.value-changed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-changed .old-value {
  color: #f48771;
  background: rgba(244, 135, 113, 0.1);
  border-left: 3px solid #f48771;
  padding-left: 6px;
  position: relative;
}

.value-changed .new-value {
  color: #4ec9b0;
  background: rgba(78, 201, 176, 0.1);
  border-left: 3px solid #4ec9b0;
  padding-left: 6px;
  position: relative;
}

.side-label {
  position: absolute;
  right: 2px;
  top: 1px;
  font-size: 10px;
  font-weight: bold;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.path-indicator {
  color: #6a9955;
  font-size: 12px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}