@font-face {
  font-family: 'x12y12pxMaruMinyaHangul';
  src: url('/assets/fonts/x12y12pxMaruMinyaHangul.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.lines-num, .lines-code, .tw-font-mono {
  letter-spacing: 0.00em;
}

:root {
  --fonts-monospace: 'x12y12pxMaruMinyaHangul', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);

  --color-primary: #c2410c;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #c2410c;
  --color-primary-dark-2: #9a3412;
  --color-primary-dark-3: #9a3412;
  --color-primary-dark-4: #7c2d12;
  --color-primary-dark-5: #7c2d12;
  --color-primary-dark-6: #7c2d12;
  --color-primary-dark-7: #7c2d12;
  --color-primary-light-1: #ea580c;
  --color-primary-light-2: #f97316;
  --color-primary-light-3: #fb923c;
  --color-primary-light-4: #fdba74;
  --color-primary-light-5: #fed7aa;
  --color-primary-light-6: #ffedd5;
  --color-primary-light-7: #fff7ed;
  --color-primary-alpha-10: #c2410c19;
  --color-primary-alpha-20: #c2410c33;
  --color-primary-alpha-30: #c2410c4b;
  --color-primary-alpha-40: #c2410c66;
  --color-primary-alpha-50: #c2410c80;
  --color-primary-alpha-60: #c2410c99;
  --color-primary-alpha-70: #c2410cb3;
  --color-primary-alpha-80: #c2410ccc;
  --color-primary-alpha-90: #c2410ce1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  --color-diff-removed-word-bg: hsl(340, 94%, 82%);
  --color-diff-added-word-bg: hsl(192, 77%, 73%);
  --color-diff-removed-row-bg: hsl(340, 93%, 94%);
  --color-diff-moved-row-bg: hsl(55, 97%, 88%);
  --color-diff-added-row-bg: hsl(191, 84%, 93%);
  --color-diff-removed-row-border: hsl(340, 94%, 82%);
  --color-diff-moved-row-border: hsl(50, 98%, 64%);
  --color-diff-added-row-border: hsl(192, 77%, 73%);
  --color-diff-inactive: var(--zinc-100);
}

@media(prefers-color-scheme:dark) {
  :root {
    --zinc-50: hsl(0, 0%, 98%);
    --zinc-100: hsl(240, 5%, 96%);
    --zinc-150: hsl(240, 6%, 93%);
    --zinc-200: hsl(240, 6%, 90%);
    --zinc-250: hsl(240, 6%, 87%);
    --zinc-300: hsl(240, 5%, 84%);
    --zinc-350: hsl(240, 5%, 74%);
    --zinc-400: hsl(240, 5%, 65%);
    --zinc-450: hsl(240, 4%, 53%);
    --zinc-500: hsl(240, 4%, 42%);
    --zinc-550: hsl(240, 4%, 33%);
    --zinc-600: hsl(240, 5%, 26%);
    --zinc-650: hsl(240, 5%, 20%);
    --zinc-700: hsl(240, 5%, 15%);
    --zinc-750: hsl(240, 5%, 13%);
    --zinc-800: hsl(240, 4%, 10%);
    --zinc-850: hsl(240, 6%, 8%);
    --zinc-900: hsl(240, 6%, 5%);

    --clean-sky: hsl(192, 96%, 50%);
    --burning-passion: hsl(340, 96%, 61%);

    --color-primary: hsl(340, 96%, 61%);
    --color-primary-contrast: #000;
    --color-primary-dark-1: hsl(340, 96%, 66%);
    --color-primary-dark-2: hsl(340, 96%, 72%);
    --color-primary-dark-3: hsl(340, 96%, 77%);
    --color-primary-dark-4: hsl(340, 96%, 83%);
    --color-primary-dark-5: hsl(340, 96%, 86%);
    --color-primary-dark-6: hsl(340, 96%, 92%);
    --color-primary-dark-7: hsl(340, 96%, 96%);
    --color-primary-light-1: hsl(340, 96%, 55%);
    --color-primary-light-2: hsl(340, 96%, 48%);
    --color-primary-light-3: hsl(340, 96%, 40%);
    --color-primary-light-4: hsl(340, 96%, 34%);
    --color-primary-light-5: hsl(340, 96%, 31%);
    --color-primary-light-6: hsl(340, 96%, 28%);
    --color-primary-light-7: hsl(340, 96%, 25%);
    --color-primary-alpha-10: hsla(340, 96%, 61%, 0.098);
    --color-primary-alpha-20: hsla(340, 96%, 61%, 0.2);
    --color-primary-alpha-30: hsla(340, 96%, 61%, 0.294);
    --color-primary-alpha-40: hsla(340, 96%, 61%, 0.4);
    --color-primary-alpha-50: hsla(340, 96%, 61%, 0.502);
    --color-primary-alpha-60: hsla(340, 96%, 61%, 0.6);
    --color-primary-alpha-70: hsla(340, 96%, 61%, 0.702);
    --color-primary-alpha-80: hsla(340, 96%, 61%, 0.8);
    --color-primary-alpha-90: hsla(340, 96%, 61%, 0.882);
    --color-primary-hover: var(--color-primary-light-1);
    --color-primary-active: var(--color-primary-light-2);

    --color-secondary: var(--zinc-700);
    --color-secondary-dark-1: var(--zinc-550);
    --color-secondary-dark-2: var(--zinc-500);
    --color-secondary-dark-3: var(--zinc-450);
    --color-secondary-dark-4: var(--zinc-400);
    --color-secondary-dark-5: var(--zinc-350);
    --color-secondary-dark-6: var(--zinc-300);
    --color-secondary-dark-7: var(--zinc-250);
    --color-secondary-dark-8: var(--zinc-200);
    --color-secondary-dark-9: var(--zinc-150);
    --color-secondary-dark-10: var(--zinc-100);
    --color-secondary-dark-11: var(--zinc-100);
    --color-secondary-dark-12: var(--zinc-100);
    --color-secondary-dark-13: var(--zinc-100);
    --color-secondary-light-1: var(--zinc-650);
    --color-secondary-light-2: var(--zinc-700);
    --color-secondary-light-3: var(--zinc-750);
    --color-secondary-light-4: var(--zinc-800);
    --color-secondary-alpha-10: #2b364219;
    --color-secondary-alpha-20: #2b364233;
    --color-secondary-alpha-30: #2b36424b;
    --color-secondary-alpha-40: #2b364266;
    --color-secondary-alpha-50: #2b364280;
    --color-secondary-alpha-60: #2b364299;
    --color-secondary-alpha-70: #2b3642b3;
    --color-secondary-alpha-80: #2b3642cc;
    --color-secondary-alpha-90: #2b3642e1;
    --color-secondary-hover: var(--color-secondary-light-1);
    --color-secondary-active: var(--color-secondary-light-2);
    --color-console-fg: #eeeff2;
    --color-console-fg-subtle: #959cab;
    --color-console-bg: #1f212b;
    --color-console-border: #383c47;
    --color-console-hover-bg: #ffffff16;
    --color-console-active-bg: #454a57;
    --color-console-menu-bg: #383c47;
    --color-console-menu-border: #5c6374;

    --color-diff-removed-word-bg: hsl(340, 43%, 33%);
    --color-diff-added-word-bg: hsl(192, 43%, 25%);
    --color-diff-removed-row-bg: hsl(340, 34%, 20%);
    --color-diff-moved-row-bg: hsl(36, 69%, 30%);
    --color-diff-added-row-bg: hsl(192, 33%, 16%);
    --color-diff-removed-row-border: hsl(340, 43%, 33%);
    --color-diff-moved-row-border: hsl(41, 70%, 38%);
    --color-diff-added-row-border: hsl(192, 43%, 25%);
    --color-diff-inactive: var(--zinc-650);

    --color-body: var(--zinc-800);
    --color-box-header: var(--zinc-700);
    --color-box-body: var(--zinc-750);
    --color-box-body-highlight: var(--zinc-650);
    --color-text-dark: #fff;
    --color-text: var(--zinc-100);
    --color-text-light: var(--zinc-150);
    --color-text-light-1: var(--zinc-150);
    --color-text-light-2: var(--zinc-200);
    --color-text-light-3: var(--zinc-200);
    --color-footer: var(--zinc-900);
    --color-timeline: var(--zinc-650);
    --color-input-text: var(--zinc-100);
    --color-input-background: var(--zinc-650);
    --color-input-toggle-background: var(--zinc-650);
    --color-input-border: var(--zinc-550);
    --color-input-border-hover: var(--zinc-450);
    --color-header-wrapper: var(--zinc-850);
    --color-header-wrapper-transparent: #242d3800;
    --color-light: #00000028;
    --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
    --color-light-border: #ffffff28;
    --color-hover: var(--zinc-600);
    --color-active: var(--zinc-650);
    --color-menu: var(--zinc-700);
    --color-card: var(--zinc-700);
    --fancy-card-bg: var(--zinc-650);
    --fancy-card-border: var(--zinc-600);
    --color-markup-table-row: #ffffff06;
    --color-markup-code-block: var(--zinc-800);
    --color-markup-code-inline: var(--zinc-850);
    --color-button: var(--zinc-600);
    --color-code-bg: var(--zinc-750);
    --color-shadow: #00000060;
    --color-secondary-bg: var(--zinc-700);
    --color-text-focus: #fff;
    --color-expand-button: #3c404d;
    --color-placeholder-text: var(--color-text-light-3);
    --color-editor-line-highlight: var(--zinc-700);
    --color-project-board-bg: var(--color-secondary-light-3);
    --color-project-board-dark-label: var(--color-text-light-3);
    --color-caret: var(--color-text);
    --color-reaction-bg: #ffffff12;
    --color-reaction-active-bg: var(--color-primary-alpha-30);
    --color-reaction-hover-bg: var(--color-primary-alpha-40);
    --color-tooltip-text: #ffffff;
    --color-tooltip-bg: #000000f0;
    --color-nav-bg: var(--zinc-900);
    --color-nav-hover-bg: var(--zinc-600);
    --color-secondary-nav-bg: var(--color-body);
    --color-label-text: #fff;
    --color-label-bg: var(--zinc-600);
    --color-label-hover-bg: var(--zinc-550);
    --color-label-active-bg: var(--zinc-500);
    --color-label-bg-alt: var(--zinc-550);
    --color-accent: var(--color-primary-light-1);
    --color-small-accent: var(--color-primary-light-5);
    --color-highlight-fg: var(--color-primary-light-4);
    --color-highlight-bg: var(--color-primary-alpha-20);
    --color-overlay-backdrop: #080808c0;
    --color-selection-bg: var(--zinc-100);
    --color-selection-fg: var(--color-pure-black);
    --checkerboard-color-1: #474747;
    --checkerboard-color-2: #313131;
    --color-indicator-offline: #a1a1aa;
    --color-indicator-offline-20: #a1a1aa1a;
    --color-indicator-idle: #16a34a;
    --color-indicator-idle-20: #16a34a1a;
    --color-indicator-active: #2185d0;
    --color-indicator-active-20: #2185d033;

    /* Monokai Terminal ANSI Colors */
    --monokai-ansi-black: #333333;
    --monokai-ansi-blue: #6a7ec8;
    --monokai-ansi-bright-black: #666666;
    --monokai-ansi-bright-blue: #819aff;
    --monokai-ansi-bright-cyan: #66d9ef;
    --monokai-ansi-bright-green: #a6e22e;
    --monokai-ansi-bright-magenta: #ae81ff;
    --monokai-ansi-bright-red: #f92672;
    --monokai-ansi-bright-white: #f8f8f2;
    --monokai-ansi-bright-yellow: #e6db74; /* #e2e22e */
    --monokai-ansi-cyan: #56adbc;
    --monokai-ansi-green: #86b42b;
    --monokai-ansi-magenta: #8c6bc8;
    --monokai-ansi-red: #c4265e;
    --monokai-ansi-white: #e3e3dd;
    --monokai-ansi-yellow: #b3b42b;
  }

  .chroma .bp {
    color: var(--monokai-ansi-bright-red); /* #fabd2f */
  }

  .chroma .c,
  .chroma .c1,
  .chroma .ch,
  .chroma .cm {
    color: #777e94
  }

  .chroma .cp {
    color: #8ec07c
  }

  .chroma .cpf {
    color: var(--monokai-ansi-bright-magenta); /* #649bc4 */
  }

  .chroma .cs {
    color: #9075cd
  }

  .chroma .dl {
    color: var(--monokai-ansi-bright-magenta); /* #649bc4 */
  }

  .chroma .gd {
    color: #fff;
    background-color: #5f3737
  }

  .chroma .ge {
    color: #ddee30
  }

  .chroma .gh {
    color: #ffaa10
  }

  .chroma .gi {
    color: #fff;
    background-color: #3a523a
  }

  .chroma .go {
    color: #777e94
  }

  .chroma .gp {
    color: #ebdbb2
  }

  .chroma .gr {
    color: #f43
  }

  .chroma .gs {
    color: #ebdbb2
  }

  .chroma .gt {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .gu {
    color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */
  }

  .chroma .il {
    color: var(--monokai-ansi-bright-magenta); /* #649bc4 */
  }

  .chroma .k {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .kc {
    color: var(--monokai-ansi-bright-magenta); /* #649bc4 */
  }

  .chroma .kd {
    color: var(--monokai-ansi-bright-cyan); /* #ff7540 */
  }

  .chroma .kn {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .kp {
    color: #5f8700
  }

  .chroma .kr {
    color: var(--monokai-ansi-bright-cyan); /* #ff7540 */
  }

  .chroma .kt {
    color: var(--monokai-ansi-bright-green); /* #ff7b72 */
  }

  .chroma .m,
  .chroma .mb,
  .chroma .mf,
  .chroma .mh,
  .chroma .mi,
  .chroma .mo {
    color: var(--monokai-ansi-bright-magenta); /* #649bc4 */
  }

  .chroma .n {
    color: #c9d1d9
  }

  .chroma .na,
  .chroma .nb {
    color: var(--monokai-ansi-bright-green); /* #fabd2f */
  }

  .chroma .nc {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .nd {
    color: #8ec07c
  }

  .chroma .ne {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .nf,
  .chroma .ni {
    color: var(--monokai-ansi-bright-green); /* #fabd2f */
  }

  .chroma .nl {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .nn {
    color: #c9d1d9
  }

  .chroma .no {
    color: #649bc4
  }

  .chroma .nt {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .nv {
    color: #ebdbb2
  }

  .chroma .nx {
    color: #b6bac5
  }

  .chroma .o {
    color: var(--monokai-ansi-bright-red); /* #ff7540 */
  }

  .chroma .ow {
    color: var(--monokai-ansi-bright-red); /* #5f8700 */
  }

  .chroma .p {
    color: #d2d4db
  }

  .chroma .s,
  .chroma .s1,
  .chroma .s2 {
    color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */
  }

  .chroma .sa {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .sb {
    color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */
  }

  .chroma .sc {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .sd {
    color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */
  }

  .chroma .se {
    color: #ff8540
  }

  .chroma .sh {
    color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */
  }

  .chroma .si {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .sr {
    color: #9075cd
  }

  .chroma .ss {
    color: #ff8540
  }

  .chroma .sx {
    color: var(--monokai-ansi-bright-green); /* #ffaa10 */
  }

  .chroma .vc,
  .chroma .vg,
  .chroma .vi {
    color: #649bee
  }

  .chroma .w {
    color: #7f8699
  }

  .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
    color: var(--clean-sky);
  }

  .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
    color: var(--burning-passion);
  }

  .diff-stats-bar {
    background-color: var(--burning-passion);
  }

  .diff-stats-bar .diff-stats-add-bar {
    background-color: var(--clean-sky);
  }

  .text.green {
    color: var(--clean-sky) !important;
  }

  .text.red {
    color: var(--burning-passion) !important;
  }

  .ui.primary.labels .label, .ui.ui.ui.primary.label, .ui.primary.button, .ui.primary.buttons .button {
    background: var(--color-primary-light-6);
    color: var(--color-white);
  }

  .primary.sha.label {
    border: none;
    background: var(--color-primary-light-6);
    color: var(--color-white);
  }
}