/**
 * Global
 */

html,
body {
  background-color: var(--brand-color-canvas-default) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

[data-color-mode='dark'] {
  color-scheme: dark;
}

.exclude-from-prose,
.exclude-from-prose * + * {
  margin-block-start: 0 !important;
}

/* Pre styles are scoped to Nextra code blocks to prevent unintended styling of other code blocks (e.g., ReactCodeBlock previews). */
.nextra-code pre {
  background-color: var(--brand-color-canvas-subtle);
  border-radius: var(--brand-borderRadius-large);
  padding-top: 1rem;
  padding-block-end: 1rem;
}

code {
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;
}

code span {
  color: var(--shiki-light);
}

/* Override shiki-light keyword color for better contrast */
code span[style*='--shiki-light:#D73A49'] {
  --shiki-light: var(--base-color-scale-red-5) !important;
}

[data-color-mode='dark'] code span {
  color: var(--shiki-dark);
}

code[data-line-numbers] > .line {
  padding-left: 0.5rem;
}
code[data-line-numbers] > .line:before {
  counter-increment: line;
  content: counter(line);
  float: left;
  text-align: right;
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  min-width: 2.6rem;
  height: 100%;
  padding-right: 1rem;
}
code .line {
  margin-block-start: 0 !important;
}
code .line.highlighted {
  background-color: rgba(218, 221, 226, 0.5);
  color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 45%/0.5);
  --tw-shadow: 2px 0 currentColor inset;
  --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
}
code .line .highlighted {
  --tw-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
  --tw-shadow: var(--tw-shadow-colored);
  border-radius: 0.125rem;
}
:is(html[class~='dark'] code .line .highlighted) {
  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
pre {
  contain: paint;
}
pre code {
  color: currentColor;
  border-style: none;
  border-radius: 0;
  min-width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: grid;
  background-color: transparent !important;
  padding: 0 !important;
}
:is(html[class~='dark'] pre code) {
  background-color: transparent !important;
}
pre code .line,
pre:not([data-theme]) {
  padding-left: 1rem;
  padding-right: 1rem;
}