/* Theme color palette */
:root {
  --cyan: hsla(188, 68%, 42%, 1);
  --outer-space: hsla(207, 12%, 34%, 1);
  --cadet-gray: hsla(190, 13%, 63%, 1);
  --pearl: hsla(45, 32%, 77%, 1);
  --maize: hsla(53, 100%, 74%, 1);
  --bubble-glow-from: rgba(59, 29, 123, 0.45);
  --bubble-glow-via: rgba(26, 16, 53, 0.85);
  --bubble-glow-to: rgba(11, 7, 24, 0.9);
  --bubble-surface-bg: rgba(17, 9, 36, 0.85);
  --bubble-shadow: 0 24px 55px -20px rgba(124, 58, 237, 0.6);
  --bubble-text: rgba(246, 236, 255, 0.95);
  --bubble-text-secondary: rgba(246, 236, 255, 0.7);
}

.theme-surface,
.theme-panel,
.theme-panel__footer,
.theme-input,
.theme-input-field,
.theme-mode-group > div,
.theme-copy-chip,
.theme-primary-button,
.theme-button-ghost,
.theme-bubble__content,
.theme-bubble__glow {
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease, box-shadow 150ms ease;
}

.theme-bubble__glow {
  background: linear-gradient(
    135deg,
    var(--bubble-glow-from),
    var(--bubble-glow-via),
    var(--bubble-glow-to)
  );
  box-shadow: var(--bubble-shadow);
}

.theme-bubble__content {
  background: var(--bubble-surface-bg);
  backdrop-filter: blur(4px);
}

.theme-bubble__body {
  color: var(--bubble-text);
}

.theme-bubble__meta {
  color: var(--bubble-text-secondary);
}

.theme-bubble__code {
  color: var(--bubble-text);
}

.theme-bubble__preview {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.theme-button-ghost {
  background: transparent;
  color: inherit;
}

html[data-theme="github"] {
  --cyan: #2da44e;
  --outer-space: #484f58;
  --cadet-gray: #8b949e;
  --pearl: #f0f6fc;
  --bubble-glow-from: rgba(35, 134, 54, 0.25);
  --bubble-glow-via: rgba(18, 43, 28, 0.45);
  --bubble-glow-to: rgba(13, 17, 23, 0.9);
  --bubble-surface-bg: #21262d;
  --bubble-shadow: 0 18px 40px -20px rgba(13, 17, 23, 0.75);
  --bubble-text: #c9d1d9;
  --bubble-text-secondary: #8b949e;
  color-scheme: dark;
  background-color: #0d1117;
}

html[data-theme="github"] body {
  background-color: #0d1117;
  color: #c9d1d9;
}

html[data-theme="github"] main {
  background: #0d1117 !important;
  color: #c9d1d9;
}

html[data-theme="github"] .theme-surface {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

html[data-theme="github"] .theme-panel {
  background: #0d1117 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

html[data-theme="github"] .theme-panel__footer {
  background: #161b22 !important;
  border-color: #30363d !important;
}

html[data-theme="github"] .theme-mode-group > div {
  background: #161b22 !important;
  border-color: #30363d !important;
}

html[data-theme="github"] .theme-input {
  background: #0d1117 !important;
  border-color: #30363d !important;
  box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.05);
}

html[data-theme="github"] .theme-input-field {
  color: #c9d1d9 !important;
}

html[data-theme="github"] .theme-button-ghost {
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

html[data-theme="github"] .theme-button-ghost:hover,
html[data-theme="github"] .theme-button-ghost:focus-visible {
  border-color: #58a6ff !important;
  color: #58a6ff !important;
  background: rgba(88, 166, 255, 0.08) !important;
}

html[data-theme="github"] .theme-copy-chip {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.04);
}

html[data-theme="github"] .theme-bubble__glow {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(88, 166, 255, 0.25),
    transparent
  );
}

html[data-theme="github"] .theme-bubble__content {
  background: var(--bubble-surface-bg);
  border: 1px solid #30363d;
}

html[data-theme="github"] .theme-bubble__preview {
  border-color: #30363d !important;
}

html[data-theme="github"] .theme-primary-button {
  background: linear-gradient(180deg, #2da44e, #238636) !important;
  border-color: #2ea043 !important;
  color: #f0f6fc !important;
  box-shadow: 0 1px 0 rgba(35, 134, 54, 0.4) !important;
}

html[data-theme="github"] .theme-primary-button:hover {
  background: linear-gradient(180deg, #2ea043, #238636) !important;
}

html[data-theme="github"] .theme-hero-overlay {
  background: radial-gradient(
    circle at top,
    rgba(88, 166, 255, 0.18) 0%,
    rgba(13, 17, 23, 0) 55%
  ) !important;
}

html[data-theme="github"] .theme-hero-glow {
  opacity: 0;
}

html[data-theme="github"] .theme-divider {
  border-color: #30363d !important;
}

html[data-theme="github"] .theme-hero {
  color: #c9d1d9;
}

html[data-theme="github"] .theme-hero h1 {
  color: #f0f6fc !important;
}

html[data-theme="github"] .theme-hero h1 span {
  color: #58a6ff !important;
  text-shadow: 0 0 35px rgba(88, 166, 255, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
button {
  color: inherit;
}
button, [role="button"] {
  cursor: pointer;
}
code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 1em;
}
img,
svg {
  display: block;
}
img,
video {
  max-width: 100%;
  height: auto;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.my-6 {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.my-4 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-8 {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.bg-\[\#86efac\] {
  background-color: #86efac;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.py-6 {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py-1 {
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}
.border-gray-500 {
  border-color: #6b7280;
}
.bg-white {
  background-color: #fff;
}
.flex {
  display: flex;
}
.gap-8 {
  grid-gap: 2rem;
  gap: 2rem;
}
.font-bold {
  font-weight: 700;
}
.max-w-screen-md {
  max-width: 768px;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.border-2 {
  border-width: 2px;
}
.rounded {
  border-radius: 0.25rem;
}
.hover\:bg-gray-200:hover {
  background-color: #e5e7eb;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}