@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme) important;
@import 'tailwindcss/utilities.css' layer(utilities) important;

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');

@custom-variant dark (&:is([data-theme="dark"] *));

@layer base {
  /*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    border-color: hsl(var(--border));
  }

  :root {
    /* Shadcn Style new-york - slate */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  html[data-theme='dark'] {
    /* Shadcn Style new-york - slate */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  html {
    font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
      var(--ifm-font-family-base);
  }
}

:root {
  --ifm-font-size-base: 16px;
  --ifm-code-font-size: 90%;
  --ifm-background-color: var(--white);
  --ifm-color-primary: var(--nebula-500);
  --ifm-footer-background-color: var(--grey-100);
  --ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
  --ifm-announcement-bar-background-color: #21243d;
  --ifm-font-family-base: 'Inter', 'sans-serif';
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --transparent: transparent;
  --white: #fff;
  --grey-900: #23263b;
  --grey-800: #36395a;
  --grey-700: #484c7a;
  --grey-600: #5a5e9a;
  --grey-500: #777aaf;
  --grey-400: #9698c3;
  --grey-300: #b6b7d5;
  --grey-200: #d6d6e7;
  --grey-100: #f5f5fa;
  --grey-050: #fcfcfd;
  --grey-000: #fff;
  --pink-900: #59063d;
  --pink-800: #88085c;
  --pink-700: #b80979;
  --pink-600: #e90a96;
  --pink-500: #f82caa;
  --pink-400: #fb5abc;
  --pink-300: #fd89ce;
  --pink-200: #feb9e2;
  --pink-100: #ffeaf6;
  --nebula-900: #141d61;
  --nebula-800: #1e2b8f;
  --nebula-700: #2b3cbb;
  --nebula-600: #3c4fe0;
  --nebula-500: #5468ff;
  --nebula-400: #7c8aff;
  --nebula-300: #a3acff;
  --nebula-200: #cacfff;
  --nebula-100: #f2f3ff;
  --cyan-900: #00526c;
  --cyan-800: #00769b;
  --cyan-700: #009bcb;
  --cyan-600: #0db7eb;
  --cyan-500: #2cc8f7;
  --cyan-400: #5adaff;
  --cyan-300: #89e5ff;
  --cyan-200: #b9efff;
  --cyan-100: #e8faff;
  --green-900: #005e36;
  --green-800: #028950;
  --green-700: #06b66c;
  --green-600: #0de589;
  --green-500: #5feb9e;
  --green-400: #88f0b3;
  --green-300: #aaf4c8;
  --green-200: #c9f8de;
  --green-100: #e6fcf3;
  --orange-900: #963209;
  --orange-800: #bf470a;
  --orange-700: #e8600a;
  --orange-600: #f78125;
  --orange-500: #faa04b;
  --orange-400: #fcbc73;
  --orange-300: #fed59a;
  --orange-200: #ffe9c3;
  --orange-100: #fff9ec;
  --red-900: #83111e;
  --red-800: #ab1325;
  --red-700: #d4142a;
  --red-600: #ee243c;
  --red-500: #f4495d;
  --red-400: #f86e7e;
  --red-300: #fc95a1;
  --red-200: #febdc5;
  --red-100: #ffe6e9;
}

html[data-theme='dark'] {
  --ifm-font-base-color: #dee0f2;
  --ifm-navbar-link-hover-color: #8b9dff;
  --ifm-link-color: #8b9dff;
  --ifm-menu-color-active: #8b9dff;
  --ifm-background-color: #0a141c;
  --ifm-footer-background-color: #0a141c;
  --ifm-navbar-background-color: #21243d;
  --ifm-menu-color-background-active: #21243d;
  --ifm-announcement-bar-background-color: var(--ifm-color-primary);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  /* Configure your theme variables here */
  --font-display: 'Inter', 'sans-serif';
  --font-title: 'Sora', 'sans-serif';
  --animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
  --color-primary-500: oklch(0.84 0.18 117.33);
  --spacing: 0.25rem;
  --color-background: var(--ifm-background-color);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@keyframes spotlight {
  0% {
    opacity: 0;
    transform: translate(-72%, -62%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -40%) scale(1);
  }
}

html {
  font-family: 'Inter', sans-serif;
}

/* override to fix some logo placement issues due to flex auto */
.navbar__logo {
  flex: 0 0 100%;
  height: 1.5rem;
  margin-right: 1rem;
}

/* DocSearch x Algolia logo */
@media (max-width: 565px) {
  .navbar__logo .docsearch-nav-logo {
    width: 15em;
    height: auto;
    vertical-align: middle;
  }

  .theme-announcement-bar {
    font-size: 0.95rem !important;
    padding: 0.5rem 0.5rem !important;
  }
}

/* DocSearch x Algolia logo in sidebar */
@media (min-width: 997px) {
  .theme-doc-sidebar-container .docsearch-nav-logo {
    height: auto;
  }
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

.diagonal-box {
  transform: skewY(-6deg);
}

.diagonal-content {
  transform: skewY(6deg);
}

/* hide on mobile */
.theme-announcement-bar {
  z-index: 100;
  min-height: 3rem !important;
  font-size: 1.1rem !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5;
  padding: 0.5rem 1rem !important;
  background-color: var(--ifm-announcement-bar-background-color) !important;
  color: #fff !important;
  white-space: normal !important; /* Allow text to wrap */
  word-break: normal !important; /* Break long words if needed */
  text-align: center;
}

.theme-announcement-bar a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none !important;
  border-radius: 0.5rem;
  margin-left: 0.5rem;
  background-color: #fff !important;
  color: #21243d !important;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.theme-announcement-bar a:hover {
  background-color: var(--ifm-color-primary);
  color: #fff;
}

.theme-announcement-bar svg {
  color: #fff;
}

.showcase {
  background-color: #fff;
}

html[data-theme='dark'] .showcase {
  background-color: #21243d;
}

.showcase-border {
  border-color: rgba(243, 244, 246, 1);
}

html[data-theme='dark'] .showcase-border {
  border-color: rgba(55, 65, 81, 1);
}

.text-description {
  color: rgba(107, 114, 128, 1);
}

html[data-theme='dark'] .text-description {
  color: rgba(209, 213, 219, 1);
}

.navbar--fixed-top {
  z-index: 20;
}

/* apply */
#hero-apply {
  z-index: -1;
  background-image: linear-gradient(
    var(--ifm-footer-background-color),
    var(--ifm-navbar-background-color)
  );
}

html[data-theme='dark'] #hero-apply {
  background-image: linear-gradient(
    var(--ifm-navbar-background-color),
    var(--ifm-background-color)
  );
}

html[data-theme='dark'] #hero-apply > div:first-child {
  opacity: 0.4;
}

.apply-form {
  background-image: linear-gradient(#fff, #f5f5fa);
  max-width: 600px;
}

html[data-theme='dark'] .apply-form {
  background-image: radial-gradient(
    circle at 50% 0,
    rgb(72, 76, 122),
    rgb(35, 38, 59)
  );
}

.apply-text {
  color: #36395a;
}

html[data-theme='dark'] .apply-text {
  color: #fff;
}

/* index */
#hero {
  background-image: linear-gradient(
    var(--ifm-footer-background-color),
    var(--ifm-navbar-background-color)
  );
}

html[data-theme='dark'] #hero {
  background-image: linear-gradient(
    var(--ifm-navbar-background-color),
    var(--ifm-background-color)
  );
}

html[data-theme='dark'] #hero > div:first-child {
  opacity: 0.4;
}

/**
  * Hero component title overrides to match other heading styles
  */
.hero-title {
  color: rgb(28, 30, 33);
  font-family: var(--ifm-heading-font-family);
}

html[data-theme='dark'] .hero-title {
  color: rgb(227, 227, 227);
}

.docsearch-logo {
  color: #21243d;
}

html[data-theme='dark'] .docsearch-logo {
  color: #fff;
}

.apply-button:hover {
  color: #fff;
}

/* GitHub */
.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

html[data-theme='dark'] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

[data-theme='light'] .shiki.github-light {
  display: none;
}

[data-theme='dark'] .shiki.github-dark {
  display: none;
}

/* Images */
.image-rendering-crisp {
  image-rendering: crisp-edges;

  /* alias for google chrome */
  image-rendering: -webkit-optimize-contrast;
}

.image-rendering-pixel {
  image-rendering: pixelated;
}

/* Tailwindcss */

.grain-gradient-bg {
  position: relative;
  overflow: hidden;

  /* light theme: vibrant brand gradient */
  background: linear-gradient(
    135deg,
    #5468ff 0%,
    /* lighten brand colour */ color-mix(in srgb, #5468ff 70%, white) 50%,
    /* soft highlight */ color-mix(in srgb, #5468ff 30%, white) 100%
  );
}

.grain-gradient-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='contrast' values='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.75;
  z-index: 1;
}

[data-theme='dark'] .grain-gradient-bg {
  /* dark theme: deeper brand gradient */
  background: linear-gradient(
    135deg,
    /* deep base */ color-mix(in srgb, #5468ff 80%, black) 0%,
    /* mid tone */ color-mix(in srgb, #5468ff 60%, black) 50%,
    /* highlight */ #5468ff 100%
  );
}

[data-theme='dark'] .grain-gradient-bg::before {
  mix-blend-mode: difference;
  opacity: 0.8;
}

.grain-gradient-bg > * {
  position: relative;
  z-index: 2;
}

/* -- Layout container ---------------------------------------------------- */

.keypad {
  position: relative;
  width: clamp(280px, 35vw, 400px); /* responsive */
  aspect-ratio: 400 / 310; /* matches artwork */
  display: flex;
  place-items: center;
  transform-style: preserve-3d;
}

/* -- Base plate ---------------------------------------------------------- */

.keypad__base {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.keypad__base img {
  width: 100%;
  display: block;
}

/* -- Shared key styles --------------------------------------------------- */

.key {
  --travel: 20; /* how far key travels when “pressed” */
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
  position: absolute;
  transform-style: preserve-3d;
  outline: none;
  --hue: 0;
  --saturate: 1;
  --bright: 1;
}

.key__mask,
.key__content {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.key__content {
  transition: translate 0.12s ease-out;
}

.key__text {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  position: absolute;
  top: 24%;
  left: 32%;
  translate: -14% -8%;
  width: 100%;
  height: 70%;
  font-size: 2.2rem;
  z-index: 5;
  color: hsl(0 0% 94%);
  text-align: left;
  transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg);
  pointer-events: none;
  mix-blend-mode: normal;
}

.key__text--search {
  left: 24%;
  top: 20%;
  translate: -25% -8%;
}

.key img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 1%;
  filter: hue-rotate(calc(var(--hue) * 1deg)) saturate(var(--saturate))
    brightness(var(--bright));
}

/* -- Individual key footprints ------------------------------------------ */

/* Small single key */
.keypad__single {
  width: 40.5%;
  height: 46%;
  bottom: 36%;
  left: 54%;
  clip-path: polygon(
    0 0,
    54% 0,
    89% 24%,
    100% 70%,
    54% 100%,
    46% 100%,
    0 69%,
    12% 23%,
    47% 0%
  );
  mask: url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=100)
    50% 50% / 100% 100%;
}

/* Same single key, shifted up/left */
.keypad__single--left {
  left: 29.3%;
  bottom: 54.2%;
}

.keypad__single .key__text {
  font-size: 2rem;
}

/* Double-width (bottom) key */
.keypad__double {
  width: 64%;
  height: 65%;
  left: 6%;
  bottom: 17.85%;
  clip-path: polygon(
    34% 0,
    93% 44%,
    101% 78%,
    71% 100%,
    66% 100%,
    0 52%,
    0 44%,
    7% 17%,
    30% 0
  );
  mask: url(https://assets.codepen.io/605876/keypad-double.png?format=auto&quality=100)
    50% 50% / 100% 100%;
}

/* -- Optional “press” effect -------------------------------------------- */

/* Add `data-pressed="true"` in JS if you want a visual down-state */
.key[data-pressed='true'] .key__content,
.key:active .key__content {
  translate: 0 calc(var(--travel) * 1%);
}

html[data-theme='light'] .shimmer-effect {
  background: linear-gradient(90deg, #3c4fe0 25%, #60a5fa 50%, #3c4fe0 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s infinite linear;
}

html[data-theme='dark'] .shimmer-effect {
  background: linear-gradient(90deg, #3c4fe0 25%, #60a5fa 50%, #3c4fe0 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.footer {
  @apply bg-neutral-100 dark:bg-zinc-800 py-16 rounded-2xl ring-1 ring-neutral-200 dark:ring-neutral-700 ring-offset-3 dark:ring-offset-neutral-900;
}

/* Make the DocSearch search bar button prominent - desktop only */
@media (min-width: 769px) {
  .DocSearch-Button {
    position: relative;
    width: 400px !important;
    z-index: 10;
  }
}

.DocSearch-Button:focus,
.DocSearch-Button:hover {
  box-shadow:
    rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  border-color: #2563eb !important;
}

@keyframes search-badge-glow {
  0%,
  100% {
    box-shadow: 0 2px 8px #2563eb33;
  }
  50% {
    box-shadow: 0 2px 16px #60a5fa88;
  }
}

.navbar__item svg,
.menu__link svg,
.footer__link-item svg {
  display: none;
}

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background-color: var(--ifm-navbar-link-color);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
  transition: background-color var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.header-github-link:hover::before {
  background-color: var(--ifm-navbar-link-hover-color);
}

/*  Keyboard search keys */
kbd {
  &[class^='searchHint_'] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--docsearch-key-gradient);
    border: 0;
    border-radius: 3px;
    box-shadow: var(--docsearch-key-shadow);
    color: var(--docsearch-muted-color);
    height: 20px;
    margin-right: 0.4em;
    padding: 0 7px 2px;
  }

  &.searchHint_btn {
    display: inline-block;
    align-items: unset;
    justify-content: unset;
    height: unset;
    margin-left: 0.4rem;
    padding: 4px 10px;
  }
}

/* Search navbar (local search) */
.navbar__search-input {
  padding: 0 2rem 0 2.25rem;
  width: 13.5rem;
}

code[class^='codeBlockLines_'] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

div[class^='docItemContainer_'] article img {
  display: block;
  margin: auto;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

[class^='title_'] {
  font-size: 2.3rem !important;
}

#__blog-post-container img[class^='img_'] {
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

/* Sidebar Method labels */
.api-method > .menu__link {
  align-items: center;
  justify-content: start;
}

.api-method > .menu__link::before {
  width: 50px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 1px solid;
  margin-right: var(--ifm-spacing-horizontal);
  text-align: center;
  flex-shrink: 0;
  border-color: transparent;
  color: white;
}

.get > .menu__link::before {
  content: 'get';
  background-color: var(--ifm-color-primary);
}

.put > .menu__link::before {
  content: 'put';
  background-color: var(--openapi-code-blue);
}

.post > .menu__link::before {
  content: 'post';
  background-color: var(--openapi-code-green);
}

.delete > .menu__link::before {
  content: 'del';
  background-color: var(--openapi-code-red);
}

.patch > .menu__link::before {
  content: 'patch';
  background-color: var(--openapi-code-orange);
}

/* Tablet */
@media screen and (max-width: 991px) {
  /* Search navbar local */
  .navbar__search-input {
    width: 14rem;
    padding: 0 0.5rem 0 2.25rem;
  }
}