:root {
  --cc-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  --cc-bg: hsl(var(--paper));
  --cc-primary-color: hsl(var(--ink));
  --cc-secondary-color: hsl(var(--ink));
  --cc-btn-primary-bg: hsl(var(--pop));
  --cc-btn-primary-color: hsl(var(--ink));
  --cc-btn-primary-border-color: hsl(var(--ink));
  --cc-btn-primary-hover-bg: hsl(var(--pop));
  --cc-btn-primary-hover-color: hsl(var(--ink));
  --cc-btn-primary-hover-border-color: hsl(var(--ink));
  --cc-btn-secondary-bg: hsl(var(--paper-2));
  --cc-btn-secondary-color: hsl(var(--ink));
  --cc-btn-secondary-border-color: hsl(var(--ink));
  --cc-btn-secondary-hover-bg: hsl(var(--paper-2));
  --cc-btn-secondary-hover-color: hsl(var(--ink));
  --cc-btn-secondary-hover-border-color: hsl(var(--ink));
  --cc-btn-border-radius: 0;
  --cc-modal-border-radius: 0;
  --cc-pm-toggle-on-bg: hsl(var(--pop));
  --cc-separator-border-color: hsl(var(--ink));
  --cc-link-color: hsl(var(--pop));
  --cc-overlay-bg: rgba(14, 17, 22, 0.55);
}

#cc-main .cm,
#cc-main .pm {
  border: 1.5px solid hsl(var(--ink)) !important;
  box-shadow: 4px 4px 0 hsl(var(--ink)) !important;
  border-radius: 0 !important;
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#cc-main .pm__section-title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1.5px solid hsl(var(--ink)) !important;
  box-shadow: 3px 3px 0 hsl(var(--ink)) !important;
  border-radius: 0 !important;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

#cc-main .pm__close-btn {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 700;
  border-radius: 0 !important;
}

@media (hover: hover) {
  #cc-main .cm__btn:hover,
  #cc-main .pm__btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 hsl(var(--ink)) !important;
  }
}

#cc-main .cm__btn:active,
#cc-main .pm__btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 hsl(var(--ink)) !important;
}

#cc-main .cm__desc a,
#cc-main .pm__section--expandable .pm__section-desc-wrapper a,
#cc-main a[data-cc] {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 700;
  color: hsl(var(--pop));
  text-decoration: underline;
  text-underline-offset: 2px;
}

#cc-main .pm__section {
  border-radius: 0 !important;
}

#cc-main .pm__section--toggle {
  border: 1px solid hsl(var(--ink));
}