@media (prefers-color-scheme: light) {
  :root {
    --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC");
  }
  #logo {
    height: 28px;
    margin-right: 2px;
  }
  #authenticated,
  #branding {
    opacity: 0.5;
    transition: 125ms opacity ease-in-out;
  }
  #authenticated:hover,
  #branding:hover {
    opacity: 1;
  }
  #branding > span {
    padding: 8px;
  }
  body,
  html {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  * {
    font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
    color: #000000;
    font-weight: 400;
  }
  @font-face {
    font-family: "Ubiquity Nova";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/ubiquity-nova-standard.eot);
    src:
      url(fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"),
      url(fonts/ubiquity-nova-standard.woff) format("woff"),
      url(fonts/ubiquity-nova-standard.ttf) format("truetype");
  }
  #issues-container {
    max-width: 640px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 56px 0;
    transition: 0.25s all cubic-bezier(0, 1, 1, 1);
  }
  body.preview-active #issues-container {
    transform: translateX(-50%);
  }
  &::-webkit-scrollbar {
    display: none;
  }
  #issues-container .issue-element-inner {
    transition: 125ms opacity ease-out 62.5ms;
  }
  #issues-container:hover .issue-element-inner {
    opacity: 0.5;
  }
  #issues-container.keyboard-selection:hover .issue-element-inner {
    opacity: 1;
  }
  #issues-container * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #issues-container > div:first-child {
    border-top: 1px solid #7f7f7f20;
  }
  #issues-container > div:last-child {
    border-top: 1px solid #7f7f7f20;
  }
  #issues-container > div {
    padding: 0 16px;
    overflow: hidden;
    background-size: 56px;
    background-position: 0;
    background-repeat: no-repeat;
    opacity: 0.25;
    margin: 3px auto;
    border: 1px solid #7f7f7f20;
    border-radius: 4px;
    cursor: pointer;
    margin: 8px;
    filter: blur(4px);
    display: block;
  }
  #issues-container > div.selected,
  #issues-container > div.selected .info,
  #issues-container > div.selected h3 {
    opacity: 1;
  }
  #issues-container.keyboard-selection > div.active {
    opacity: 0.33;
  }
  #issues-container.keyboard-selection > div.active.selected {
    opacity: 1;
  }
  #issues-container > div.active {
    transition: 125ms all ease-in-out;
    opacity: 1;
    filter: blur(0);
  }
  #issues-container > div:hover {
    opacity: 1;
    transition: background-color 0s;
  }
  #issues-container > div:hover .info {
    opacity: 1;
  }
  #issues-container > div:hover .issue-element-inner {
    transition: 125ms opacity ease-in-out;
    opacity: 1;
  }
  #issues-container > div:active {
    background-color: #7f7f7f40;
  }
  #issues-container h3 {
    line-height: 1;
    font-size: 16px;
    text-overflow: ellipsis;
    margin: 0;
  }
  #issues-container p {
    text-align: right;
  }
  p {
    margin: 0;
    line-height: 1;
    color: #404040;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-rendering: geometricPrecision;
    top: 0;
    right: 0;
  }
  li {
    margin: 0;
    line-height: 1;
    color: #404040;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-rendering: geometricPrecision;
    top: 0;
    right: 0;
  }
  .issue-element-inner {
    position: relative;
    text-align: left;
    display: flex;
    padding: 12px 0;
    align-items: center;
  }
  p.organization-name {
    opacity: 0.5;
    display: inline-block;
  }
  p.repository-name {
    display: inline-block;
  }
  label:first-child {
    margin-left: 0;
  }
  label {
    padding: 4px 6px;
    border-radius: 4px;
    margin: 0 4px 0;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    background-color: #7f7f7f20;
    width: 64px;
    letter-spacing: 0.5px;
    flex-grow: 4;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 16px;
  }
  input[type="radio"] {
    background-color: unset;
    cursor: default;
    appearance: unset;
    display: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
  }
  #filters label {
    cursor: pointer;
  }
  #filters label:hover {
    background-color: #7f7f7f40;
  }
  #filters label:active {
    background-color: #7f7f7f80;
  }
  input[type="radio"]:checked + label {
    background-color: #7f7f7f80 !important;
  }
  .labels {
    display: flex;
    margin-left: auto;
  }
  .partner {
    bottom: 0;
    margin: 0;
  }
  body {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .info {
    opacity: 0.66;
    transition: 125ms opacity ease-in-out;
    align-items: center;
  }
  #issues-container > .issue-element-wrapper {
    opacity: 0.5;
    transition: 0.33s all cubic-bezier(0, 1, 1, 1);
    filter: blur(8px);
  }
  button {
    appearance: unset;
    text-rendering: unset;
    color: unset;
    letter-spacing: unset;
    word-spacing: unset;
    line-height: unset;
    text-transform: unset;
    text-indent: unset;
    text-shadow: unset;
    display: unset;
    text-align: unset;
    align-items: unset;
    cursor: pointer;
    box-sizing: unset;
    background-color: unset;
    margin: unset;
    padding-block: unset;
    padding-inline: unset;
    border-width: unset;
    border-style: unset;
    border-color: unset;
    border-image: unset;
    border: 1px solid #7f7f7f20;
    padding: 8px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #7f7f7f10;
  }
  button:hover {
    background-color: #7f7f7f20;
  }
  button:active {
    background-color: #7f7f7f40;
  }
  #toolbar {
    position: fixed;
    width: calc(100vw - 8px);
    height: 48px;
    top: 0;
    backdrop-filter: blur(8px);
    padding: 4px;
    display: flex;
    border-bottom: 1px solid #7f7f7f20;
    justify-content: center;
    -webkit-backdrop-filter: blur(8px);
    justify-content: space-between;
    justify-content: space-evenly;
  }
  #toolbar > * {
    align-items: center;
    display: inline-flex;
    text-align: left;
    margin: 0 16px;
  }
  #authenticated > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    max-height: 48px;
  }
  #authenticated > img {
    border-radius: 50%;
    height: 40px;
    padding: 4px 0;
  }
  #toolbar[data-authenticated="true"] > #github-login-button {
    display: none;
  }
  #toolbar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    transition: 0.5s opacity ease-in-out;
  }
  #toolbar.ready {
    opacity: 1;
  }
  #branding {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-rendering: geometricPrecision;
  }
  .full {
    display: unset !important;
  }
  .new-task,
  .modified-task {
    position: relative;
  }
  .new-task::before,
  .modified-task::before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 4px;
    left: 0;
    background-color: #00ffff;
  }
  .modified-task::before {
    background-color: #ffff00;
  }
  @media screen and (max-width: 804px) {
    .mid {
      display: none !important;
    }
    #branding > span {
      padding: 0;
    }
  }
  @media screen and (max-width: 1139px) {
    .full {
      display: none !important;
    }
    .issue-element-inner {
      display: block;
    }
    #issues-container .labels {
      margin-top: 4px;
    }
    #branding {
      margin: auto;
      margin-left: 12px;
    }
    #toolbar {
      overflow-x: auto;
      white-space: nowrap;
      margin: 0;
      padding-left: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    #toolbar > * {
      margin-left: 12px;
    }
    #toolbar > button {
      padding: 12px 16px;
    }
  }
  @media screen and (max-width: 1280px) {
    body.preview-active {
      overflow: hidden;
    }
    .preview.active {
      transform: translateX(0) !important;
    }
    body.preview-active #issues-container {
      transform: translateX(0) !important;
    }
    body.preview-active > #issues-container > div,
    body.preview-active > background {
      filter: blur(8px);
      pointer-events: none;
    }
  }
  #toolbar > button {
    text-align: center;
  }
  #filters button {
    margin-top: 8px;
    margin-right: 8px;
  }
  #issues-container img {
    height: 24px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    opacity: 0;
    transition: 0.25s opacity ease-in-out;
  }
  #issues-container img[src] {
    opacity: 1;
  }
  background,
  background #grid {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  background #grid {
    -webkit-mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%);
    mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%);
    pointer-events: none;
  }
  .preview blockquote {
    margin-left: 16px;
    opacity: 0.66;
  }
  .preview sup {
    display: block;
  }
  .preview hr {
    border-color: #00000040;
  }
  .preview p {
    line-height: 1.25;
    word-break: break-word;
    margin-bottom: 12px;
    letter-spacing: 0;
    font-size: 16px;
  }
  .preview img {
    max-width: 100%;
  }
  .preview pre {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: scroll;
    height: 48px;
  }
  .preview pre code {
    position: absolute;
    font-family: monospace;
  }
  .preview ol,
  .preview ul {
    padding-left: 12px;
    margin-left: 4px;
  }
  .preview h1 {
    margin: 8px;
    font-size: 24px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline: 0;
    margin-inline-end: 0;
  }
  .preview a {
    word-break: break-all;
  }
  .preview a[href*="//"] .open-new-link svg
  {
    fill: #00000080;
    vertical-align: middle;
    height: 20px;
  }
  .preview-body-inner {
    line-height: 1.25;
  }
  .preview-body-inner > :last-child {
    margin-bottom: 0;
  }
  .preview {
    text-align: left;
    position: fixed;
    transition: 0.25s all cubic-bezier(0, 1, 1, 1);
    max-width: 640px;
    border: 1px solid #7f7f7f20;
    border-radius: 4px;
    opacity: 0;
    top: 64px;
    flex-direction: row;
    display: flex;
    transform: translateX(0);
    flex-wrap: wrap;
    pointer-events: none;
    overflow: hidden;
    width: calc(100vw - 18px);
  }
  .preview * {
    pointer-events: none;
  }
  .preview.active {
    pointer-events: all;
  }
  .preview.active * {
    pointer-events: all;
  }
  .close-preview svg {
    fill: #00000080;
    vertical-align: middle;
    height: 36px;
  }
  .preview.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(50%);
    box-shadow: 0 12px 48px #00000010;
  }
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
  }
  .preview-header > a {
    word-wrap: initial;
    text-decoration: none;
    opacity: 0.75;
    display: flex;
    justify-content: right;
    align-items: center;
    width: calc(100% - 72px);
  }
  .preview-header > a:hover {
    opacity: 1;
  }
  .preview-header > a > h1 {
    word-wrap: initial;
    word-break: normal;
    display: inline;
    vertical-align: middle;
    margin-right: 12px;
    text-align: right;
    font-size: 20px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .preview-body {
    overflow: scroll;
    margin: 0;
    border-top: 1px solid #dfdfdf;
    padding: 16px;
    max-height: calc(100vh - (80px));
    max-height: calc(100vh - (242px));
  }
  .preview-content {
    width: 100%;
  }
  .preview button.close-preview {
    right: 0;
    top: 0;
    margin-right: 8px;
    padding: 8px 8px;
    border: none;
    background: 0 0;
    padding: 0;
  }
  .preview button.close-preview:hover svg {
    fill: #000000;
  }
  .preview li {
    margin-bottom: 8px;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 1.25;
  }
  #filters input[type="text"] {
    margin: 0 4px;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background-color: #7f7f7f20;
    width: 100%;
    height: 16px;
    text-align: center;
    min-width: 80px;
  }
  #filters input[type="text"]::placeholder {
    font-size: 12px;
    letter-spacing: 0.5px;
  }
  button#github-login-button {
    margin-left: 0;
  }

  p.organization-name::after {
    content: "/";
  }
  input[type="radio"][data-ordering="reverse"] + label::after {
    margin-left: 6px;
    content: "▲";
  }
  input[type="radio"][data-ordering="normal"] + label::after {
    margin-left: 6px;
    content: "▼";
  }
}