:root {
  --background: #fdf8f8;
  --foreground: #1c1b1b;
  --muted-foreground: #606365;
  --border: rgb(196 199 199 / 0.58);
  --glass: rgb(255 255 255 / 0.46);
  --glass-strong: rgb(255 255 255 / 0.68);
  --shadow-soft: 0 24px 90px rgb(28 27 27 / 0.1);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: rgb(27 25 21 / 28%) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgb(27 25 21 / 18%);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

body.app-bg {
  background:
    radial-gradient(at 38% 18%, rgb(218 180 254 / 0.22) 0, transparent 34rem),
    radial-gradient(at 82% 2%, rgb(125 211 252 / 0.18) 0, transparent 30rem),
    radial-gradient(at 0% 54%, rgb(254 205 211 / 0.2) 0, transparent 34rem),
    var(--background) !important;
  color: var(--foreground) !important;
}

body::before,
body::after {
  border-radius: 999px;
  content: "";
  filter: blur(80px);
  opacity: 0.46;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

body::before {
  background: rgb(216 180 254 / 0.72);
  height: 600px;
  left: -220px;
  top: -120px;
  width: 600px;
}

body::after {
  background: rgb(191 219 254 / 0.66);
  bottom: 16%;
  height: 520px;
  right: -140px;
  width: 520px;
}

.glass {
  -webkit-backdrop-filter: blur(22px) !important;
  backdrop-filter: blur(22px) !important;
  background: var(--glass) !important;
  border: 1px solid rgb(255 255 255 / 0.64) !important;
  box-shadow: 0 8px 32px rgb(28 27 27 / 0.05) !important;
}

.gradient-text,
.bg-clip-text.text-transparent {
  background: none !important;
  color: var(--foreground) !important;
  -webkit-text-fill-color: currentColor !important;
}

h1 .gradient-text,
h1.gradient-text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
}

.nav-link {
  border: 1px solid transparent !important;
  color: rgb(27 25 21 / 0.64) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.nav-link:hover,
.nav-link-active {
  background: rgb(255 255 255 / 0.54) !important;
  border-color: rgb(255 255 255 / 0.72) !important;
  color: var(--foreground) !important;
}

.nav-link-active {
  box-shadow: 0 3px 14px rgb(27 25 21 / 0.1) !important;
}

#site-header-root {
  display: block;
  min-height: 5rem;
}

.site-header {
  inset: 0 0 auto;
  position: fixed;
  transition: inset 0.5s ease;
}

.site-header-shell {
  max-width: none;
  transition: max-width 0.5s ease;
}

.site-header-panel {
  border-left-color: transparent !important;
  border-radius: 0 0 1rem 1rem !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  transition: border-radius 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.site-header-panel.glass {
  background: rgb(255 255 255 / 0.35) !important;
}

.site-header-inner {
  min-height: 5rem;
  transition: min-height 0.5s ease;
}

.site-header-logo-img,
.site-header-brand-main,
.site-header-brand-sub,
.site-header .nav-link {
  transition: all 0.5s ease;
}

.site-header.is-scrolled {
  inset: 1rem 1rem auto;
}

.site-header.is-scrolled .site-header-shell {
  max-width: 1200px;
}

.site-header.is-scrolled .site-header-panel {
  background: rgb(255 255 255 / 0.45) !important;
  border-color: rgb(255 255 255 / 0.64) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 34px rgb(28 27 27 / 0.08) !important;
}

.site-header.is-scrolled .site-header-inner {
  min-height: 3.5rem;
}

.site-header.is-scrolled .site-header-logo-img {
  height: 2rem;
  width: 2rem;
}

.site-header.is-scrolled .site-header-brand-main {
  font-size: 0.8125rem;
}

.site-header.is-scrolled .site-header-brand-sub {
  font-size: 0.625rem;
}

.site-header.is-scrolled .nav-link {
  padding-bottom: 0.375rem !important;
  padding-top: 0.375rem !important;
}

@media (max-width: 767px) {
  #site-header-root {
    min-height: 4rem;
  }

  .site-header,
  .site-header.is-scrolled {
    inset: auto;
    position: sticky;
  }

  .site-header-panel {
    border-radius: 1rem !important;
  }

  .site-header-inner,
  .site-header.is-scrolled .site-header-inner {
    min-height: 4rem;
  }
}

header nav .tutorial-nav-root {
  position: relative;
}

header nav .tutorial-nav-trigger::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  content: "";
  height: 0;
  margin-left: 0.15rem;
  opacity: 0.72;
  width: 0;
}

header nav .tutorial-nav-menu {
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.86);
  border-radius: 1rem;
  box-shadow: 0 16px 42px rgb(28 27 27 / 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 14rem;
  opacity: 0;
  padding: 0.45rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  transition: opacity 0.16s ease;
  z-index: 60;
}

header nav .tutorial-nav-root:hover .tutorial-nav-menu,
header nav .tutorial-nav-root:focus-within .tutorial-nav-menu {
  opacity: 1;
  pointer-events: auto;
}

header nav .tutorial-nav-menu .nav-link {
  justify-content: flex-start;
  white-space: nowrap;
  width: 100%;
}

header nav .tutorial-nav-menu .tutorial-sub-link {
  color: rgb(27 25 21 / 0.5) !important;
  font-size: 0.7rem !important;
  padding-left: 1.5rem !important;
  position: relative;
}

header nav .tutorial-nav-menu .tutorial-sub-link::before {
  background: rgb(27 25 21 / 0.24);
  border-radius: 999px;
  content: "";
  height: 1px;
  left: 0.75rem;
  position: absolute;
  top: 50%;
  width: 0.45rem;
}

header nav .tutorial-nav-menu .tutorial-sub-link:hover {
  color: var(--foreground) !important;
}

.btn-primary {
  background: linear-gradient(145deg, #2e2c2c 0%, #1c1b1b 100%) !important;
  box-shadow: 0 8px 24px rgb(27 25 21 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.08) !important;
  color: var(--background) !important;
}

.btn-primary,
.btn-primary.text-white,
a.btn-primary,
button.btn-primary {
  color: #fffaf3 !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
}

.btn-glass,
button.glass,
a.glass {
  background: rgb(255 255 255 / 0.48) !important;
  border: 1px solid rgb(255 255 255 / 0.64) !important;
  color: var(--foreground) !important;
}

main article,
.rounded-2xl.border,
.rounded-xl.border,
.tab-panel,
.prose,
footer .glass {
  border-color: rgb(255 255 255 / 0.62) !important;
  box-shadow: 0 10px 34px rgb(28 27 27 / 0.05) !important;
}

.bg-slate-900\/60,
.bg-slate-950\/80,
.bg-slate-800\/50,
.bg-slate-800,
.bg-slate-700,
.bg-slate-900,
.bg-white\/5,
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.5) !important;
}

.border-slate-700\/90,
.border-slate-700\/70,
.border-slate-600,
.border-slate-600\/70,
.border-violet-500\/30,
.border-white\/10,
.border-white\/20,
.border-white\/30 {
  border-color: rgb(27 25 21 / 0.1) !important;
}

.text-slate-100,
.text-slate-200,
.text-white,
.text-cyan-200,
.text-cyan-300,
.text-violet-200,
.text-violet-300,
.text-emerald-200,
.text-emerald-300,
.text-blue-200,
.text-blue-300,
.text-amber-200,
.text-amber-300,
.text-pink-200,
.text-pink-300 {
  color: var(--foreground) !important;
}

.text-sky-200,
.text-sky-300,
.text-blue-400,
.text-cyan-400 {
  color: #2563eb !important;
}

.text-emerald-200,
.text-emerald-300,
.text-emerald-400 {
  color: #047857 !important;
}

.text-red-200,
.text-red-300,
.text-red-400 {
  color: #b91c1c !important;
}

.text-amber-200,
.text-amber-300,
.text-amber-400,
.text-yellow-300 {
  color: #b45309 !important;
}

.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-gray-300,
.text-gray-400,
.prose-invert,
.prose :where(p,li,td,th):not(:where([class~="not-prose"] *)) {
  color: var(--muted-foreground) !important;
}

code,
pre,
.font-mono {
  color: rgb(27 25 21 / 0.78) !important;
}

code,
pre {
  background: rgb(255 255 255 / 0.58) !important;
  border-color: rgb(27 25 21 / 0.1) !important;
}

input,
textarea,
select {
  background: rgb(255 255 255 / 0.58) !important;
  border-color: rgb(27 25 21 / 0.12) !important;
  color: var(--foreground) !important;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px rgb(27 25 21 / 0.06) !important;
  outline: none !important;
}

table,
thead,
tbody,
tr {
  border-color: rgb(27 25 21 / 0.1) !important;
}

.index-model-card,
.transit-billing-banner {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: rgb(255 255 255 / 0.46) !important;
  border-color: rgb(255 255 255 / 0.64) !important;
  color: var(--foreground) !important;
}

.index-model-card:hover,
article:hover {
  box-shadow: 0 14px 36px rgb(28 27 27 / 0.08) !important;
}

footer a,
a:not(.btn-primary):not(.nav-link) {
  color: rgb(27 25 21 / 0.66) !important;
}

footer a:hover,
a:not(.btn-primary):not(.nav-link):hover {
  color: rgb(27 25 21 / 0.92) !important;
}

.tab-panel.prose,
.tab-panel.prose .tab-doc,
.tab-panel.prose :where(p, li, td, th, ol, ul):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.72) !important;
}

.tab-panel.prose :where(h1, h2, h3, h4, h5, h6, strong):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.94) !important;
}

.tab-panel.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: #c0266f !important;
  text-decoration-color: rgb(234 76 137 / 0.55) !important;
}

.tab-panel.prose :where(pre):not(:where([class~="not-prose"] *)) {
  background: rgb(255 255 255 / 0.58) !important;
  border-color: rgb(27 25 21 / 0.1) !important;
}

.tab-panel.prose :where(pre code):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.82) !important;
}

.tab-panel.prose :where(:not(pre) > code):not(:where([class~="not-prose"] *)) {
  color: #c0266f !important;
  background: rgb(234 76 137 / 0.1) !important;
  border-color: rgb(234 76 137 / 0.18) !important;
}

.prose.prose-invert .tab-doc,
.prose.prose-invert :where(p, li, td, th, ol, ul, blockquote):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.72) !important;
}

.prose.prose-invert :where(h1, h2, h3, h4, h5, h6, strong):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.94) !important;
}

.prose.prose-invert :where(a):not(:where([class~="not-prose"] *)) {
  color: #c0266f !important;
  text-decoration-color: rgb(234 76 137 / 0.55) !important;
}

.prose.prose-invert :where(pre):not(:where([class~="not-prose"] *)) {
  background: rgb(255 255 255 / 0.58) !important;
  border-color: rgb(27 25 21 / 0.1) !important;
}

.prose.prose-invert :where(pre code):not(:where([class~="not-prose"] *)) {
  color: rgb(27 25 21 / 0.82) !important;
}

.prose.prose-invert :where(:not(pre) > code):not(:where([class~="not-prose"] *)) {
  color: #c0266f !important;
  background: rgb(234 76 137 / 0.1) !important;
  border-color: rgb(234 76 137 / 0.18) !important;
}

.error-box {
  background: linear-gradient(135deg, rgb(255 255 255 / 0.76), rgb(255 255 255 / 0.54)) !important;
  border: 1px solid rgb(220 38 38 / 0.24) !important;
  border-left: 4px solid rgb(220 38 38 / 0.72) !important;
  color: #991b1b !important;
  box-shadow: 0 12px 32px rgb(28 27 27 / 0.08) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@media (max-width: 640px) {
  h1 .gradient-text,
  h1.gradient-text {
    letter-spacing: -0.04em !important;
  }

  .nav-link {
    letter-spacing: 0.06em !important;
  }
}