/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes codepop-spin {
  to {
    transform: rotate(360deg);
  }
}

html,
body {
  background: var(--codepop-paper);
  color: var(--codepop-ink);
  font-family: var(--codepop-font-sans);
  font-weight: 400;
}

code,
kbd,
pre,
samp {
  font-family: var(--codepop-font-mono);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  color: var(--codepop-ink);
  font-family: var(--codepop-font-sans);
  font-weight: 650;
  letter-spacing: 0;
}

.font-black {
  font-weight: 750;
}

.font-extrabold {
  font-weight: 700;
}

.font-bold {
  font-weight: 650;
}

.font-semibold {
  font-weight: 600;
}

.tracking-tight,
.tracking-\[-0\.02em\],
.tracking-\[-0\.03em\] {
  letter-spacing: 0;
}

[class*="text-[#222222]"] {
  color: var(--codepop-ink);
}

[class*="text-[#65716e]"] {
  color: var(--codepop-muted);
}

[class*="text-[#0f8580]"],
[class*="text-[#128f89]"],
[class*="text-[#0a6f6b]"],
[class*="text-[#115c58]"] {
  color: var(--codepop-teal);
}

[class*="text-[#e4f2ef]"],
[class*="text-[#f8f6ef]"] {
  color: var(--codepop-teal-soft);
}

[class*="bg-[#222222]"] {
  background-color: var(--codepop-ink);
}

[class*="bg-[#fffdf8]"] {
  background-color: var(--codepop-paper);
}

[class*="bg-[#fffdf8]/90"] {
  background-color: color-mix(in srgb, var(--codepop-paper) 90%, transparent);
}

[class*="bg-[#e4f2ef]"] {
  background-color: var(--codepop-teal-soft);
}

[class*="bg-[#f8f6ef]"] {
  background-color: var(--codepop-cloud);
}

[class*="bg-[#0f8580]"],
[class*="bg-[#128f89]"] {
  background-color: var(--codepop-teal);
}

[class*="border-[#d9e4e1]"],
[class*="border-[#f8f6ef]"],
[class*="border-[#b7dfd7]"] {
  border-color: var(--codepop-border);
}

[class*="border-[#0f8580]"] {
  border-color: var(--codepop-teal);
}

[class*="ring-[#d9e4e1]"] {
  --tw-ring-color: var(--codepop-border);
}

[class*="ring-[#f8f6ef]"] {
  --tw-ring-color: color-mix(in srgb, var(--codepop-teal-soft) 70%, transparent);
}

[class*="focus:ring-[#0f8580]"],
[class*="focus:ring-[#f8f6ef]"] {
  --tw-ring-color: color-mix(in srgb, var(--codepop-teal) 28%, transparent);
}

[class*="accent-[#0f8580]"] {
  accent-color: var(--codepop-teal);
}

[class*="hover:border-[#0f8580]"]:hover,
[class*="focus:border-[#0f8580]"]:focus {
  border-color: var(--codepop-teal);
}

[class*="hover:bg-[#0f8580]"]:hover,
[class*="hover:bg-[#128f89]"]:hover {
  background-color: var(--codepop-teal);
}

[class*="hover:bg-[#222222]"]:hover {
  background-color: var(--codepop-teal-dark);
}

[class*="hover:text-[#0f8580]"]:hover {
  color: var(--codepop-teal);
}

[class*="hover:text-[#222222]"]:hover {
  color: var(--codepop-ink);
}

[class*="hover:text-[#f8f6ef]"]:hover {
  color: var(--codepop-lime);
}

[data-site-check-target="loading"] .border-t-\[\#0f8580\] {
  animation: codepop-spin 0.8s linear infinite;
  border-top-color: var(--codepop-teal);
}

a[class*="bg-[#0f8580]"],
a[class*="bg-[#0f8580]"]:visited,
a[class*="bg-[#0f8580]"]:hover,
a[class*="bg-[#0f8580]"]:focus,
a[class*="bg-[#0f8580]"]:active,
button[class*="bg-[#0f8580]"],
button[class*="bg-[#0f8580]"]:hover,
button[class*="bg-[#0f8580]"]:focus,
button[class*="bg-[#0f8580]"]:active,
input[type="submit"][class*="bg-[#0f8580]"],
input[type="submit"][class*="bg-[#0f8580]"]:hover,
input[type="submit"][class*="bg-[#0f8580]"]:focus,
input[type="submit"][class*="bg-[#0f8580]"]:active {
  color: #ffffff;
}

a[aria-current="page"][class*="bg-[#0f8580]"],
a[aria-current="page"][class*="bg-[#0f8580]"]:visited,
a[aria-current="page"][class*="bg-[#0f8580]"]:hover,
a[aria-current="page"][class*="bg-[#0f8580]"]:focus,
a[aria-current="page"][class*="bg-[#0f8580]"]:active {
  color: #ffffff;
}

a[class*="bg-[#222222]"],
a[class*="bg-[#222222]"]:visited,
a[class*="bg-[#222222]"]:hover,
a[class*="bg-[#222222]"]:focus,
a[class*="bg-[#222222]"]:active,
button[class*="bg-[#222222]"],
button[class*="bg-[#222222]"]:hover,
button[class*="bg-[#222222]"]:focus,
button[class*="bg-[#222222]"]:active {
  color: #ffffff;
}

button:disabled,
input[type="submit"]:disabled {
  transform: none;
}

.codepop-site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.codepop-site-header.is-scrolled {
  background-color: color-mix(in srgb, var(--codepop-paper) 96%, transparent);
  border-color: color-mix(in srgb, var(--codepop-ink) 12%, transparent);
  box-shadow: 0 18px 45px rgba(21, 33, 39, 0.08);
}

.codepop-auth-panel {
  --auth-panel-x: 26%;
  --auth-panel-y: 18%;
  background:
    radial-gradient(circle at var(--auth-panel-x) var(--auth-panel-y), color-mix(in srgb, var(--codepop-teal) 18%, transparent), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
    var(--codepop-ink);
  transition: background 180ms ease;
}

.codepop-auth-panel h1 {
  color: #ffffff;
}

.codepop-auth-brand-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background-color: var(--codepop-ink);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.codepop-auth-brand-header.is-scrolled {
  background-color: color-mix(in srgb, var(--codepop-teal) 96%, transparent);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}

.codepop-auth-brand-header.is-scrolled p:first-child {
  color: rgba(255, 255, 255, 0.68);
}

.codepop-auth-brand-header.is-scrolled p:last-child {
  color: #ffffff;
}

.codepop-auth-brand-header.is-scrolled .ring-white\/20 {
  --tw-ring-color: transparent;
}

.codepop-auth-brand-header.is-scrolled .bg-white {
  background-color: transparent;
}