/* ==== style.css ==== */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Fira Sans, system-ui, -apple-system, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  /* Naver's page grey (#EDF0F4) — see the note in custom.css. */
  --background: 214 24% 94.3%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 135 96% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 135 25% 93%;
  --secondary-foreground: 0 0% 12%;
  --muted: 135 25% 93%;
  --muted-foreground: 0 0% 45%;
  --accent: 135 30% 95%;
  --accent-foreground: 0 0% 12%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 135 20% 90%;
  --input: 135 20% 90%;
  --ring: 135 96% 50%;
  --radius: 10px;
}

.dark {
  --background: 135 45% 6%;
  --foreground: 0 0% 97%;
  --card: 135 40% 9%;
  --card-foreground: 0 0% 97%;
  --popover: 135 40% 9%;
  --popover-foreground: 0 0% 97%;
  --primary: 135 96% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 135 35% 14%;
  --secondary-foreground: 0 0% 97%;
  --muted: 135 35% 14%;
  --muted-foreground: 135 12% 62%;
  --accent: 135 40% 18%;
  --accent-foreground: 0 0% 97%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 135 35% 18%;
  --input: 135 35% 18%;
  --ring: 135 96% 55%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ============ Lightbox Styles ============ */

#image-lightbox,
#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
}

#image-lightbox.hidden,
#video-lightbox.hidden {
  display: none;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

#lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  -o-object-fit: contain;
     object-fit: contain;
}

#lightbox-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  font-size: 0.875rem;
}

#video-lightbox video {
  width: 100%;
  height: 100%;
  max-height: 85vh;
  border-radius: 0.75rem;
}

#video-lightbox-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* Lightbox navigation buttons */

.lightbox-prev,
.lightbox-next {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Mobile lightbox navigation */

@media (max-width: 768px) {
  .lightbox-prev,
    .lightbox-next {
    display: none;
  }
}

/* Video lightbox */

#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
}

#video-lightbox.hidden {
  display: none;
}

#video-lightbox .lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

#video-lightbox .lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

#video-lightbox video {
  width: 100%;
  height: 100%;
  max-height: 85vh;
  border-radius: 0.75rem;
}

/* Lightbox caption */

#lightbox-caption,
#video-lightbox-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* Sports scores */

.sports-scores .space-y-2 > a {
  transition: background-color 0.15s;
}

.sports-scores .space-y-2 > a:hover {
  background-color: hsl(var(--accent));
}

/* Featured snippet feedback buttons */

.feedback-btn {
  transition: color 0.15s, background-color 0.15s;
}

.feedback-btn[data-feedback="like"].text-green-600,
.feedback-btn[data-feedback="dislike"].text-red-600 {
  pointer-events: none;
}

/* About this result dropdown */

.about-result-dropdown {
  animation: dropdown-fade-in 0.15s ease-out;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lightbox image navigation */

#lightbox-image {
  transition: opacity 0.15s ease-in-out;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-neutral {
  --tw-prose-body: #404040;
  --tw-prose-headings: #171717;
  --tw-prose-lead: #525252;
  --tw-prose-links: #171717;
  --tw-prose-bold: #171717;
  --tw-prose-counters: #737373;
  --tw-prose-bullets: #d4d4d4;
  --tw-prose-hr: #e5e5e5;
  --tw-prose-quotes: #171717;
  --tw-prose-quote-borders: #e5e5e5;
  --tw-prose-captions: #737373;
  --tw-prose-kbd: #171717;
  --tw-prose-kbd-shadows: rgb(23 23 23 / 10%);
  --tw-prose-code: #171717;
  --tw-prose-pre-code: #e5e5e5;
  --tw-prose-pre-bg: #262626;
  --tw-prose-th-borders: #d4d4d4;
  --tw-prose-td-borders: #e5e5e5;
  --tw-prose-invert-body: #d4d4d4;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a3a3a3;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a3a3a3;
  --tw-prose-invert-bullets: #525252;
  --tw-prose-invert-hr: #404040;
  --tw-prose-invert-quotes: #f5f5f5;
  --tw-prose-invert-quote-borders: #404040;
  --tw-prose-invert-captions: #a3a3a3;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d4d4d4;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #525252;
  --tw-prose-invert-td-borders: #404040;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.inset-y-px {
  top: 1px;
  bottom: 1px;
}

.-bottom-0\.5 {
  bottom: -0.125rem;
}

.-bottom-20 {
  bottom: -5rem;
}

.-bottom-24 {
  bottom: -6rem;
}

.-left-20 {
  left: -5rem;
}

.-left-24 {
  left: -6rem;
}

.-right-0\.5 {
  right: -0.125rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-20 {
  right: -5rem;
}

.-right-24 {
  right: -6rem;
}

.-top-1 {
  top: -0.25rem;
}

.-top-12 {
  top: -3rem;
}

.-top-2 {
  top: -0.5rem;
}

.-top-20 {
  top: -5rem;
}

.-top-24 {
  top: -6rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-10 {
  bottom: 2.5rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-20 {
  bottom: 5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 2.5rem;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-3 {
  left: 0.75rem;
}

.left-6 {
  left: 1.5rem;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-10 {
  right: 2.5rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-10 {
  top: 2.5rem;
}

.top-2 {
  top: 0.5rem;
}

.top-6 {
  top: 1.5rem;
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[999999\] {
  z-index: 999999;
}

.z-\[99999\] {
  z-index: 99999;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-0 {
  margin: 0px;
}

.m-1\.5 {
  margin: 0.375rem;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-mx-\[10px\] {
  margin-left: -10px;
  margin-right: -10px;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.-ml-12 {
  margin-left: -3rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-mr-12 {
  margin-right: -3rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.box-border {
  box-sizing: border-box;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-72 {
  height: 18rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[75px\] {
  height: 75px;
}

.h-\[78px\] {
  height: 78px;
}

.h-\[80px\] {
  height: 80px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[180px\] {
  width: 180px;
}

.w-\[50px\] {
  width: 50px;
}

.w-\[80\%\] {
  width: 80%;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[24px\] {
  min-width: 24px;
}

.min-w-\[44px\] {
  min-width: 44px;
}

.min-w-\[48px\] {
  min-width: 48px;
}

.min-w-\[560px\] {
  min-width: 560px;
}

.min-w-\[7\.5rem\] {
  min-width: 7.5rem;
}

.min-w-\[700px\] {
  min-width: 700px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 1160px;
}

.max-w-\[100px\] {
  max-width: 100px;
}

.max-w-\[1050px\] {
  max-width: 1050px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[250px\] {
  max-width: 250px;
}

.max-w-\[580px\] {
  max-width: 580px;
}

.max-w-\[60\%\] {
  max-width: 60%;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[620px\] {
  max-width: 620px;
}

.max-w-\[650px\] {
  max-width: 650px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[80\%\] {
  max-width: 80%;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[900px\] {
  max-width: 900px;
}

.max-w-\[90px\] {
  max-width: 90px;
}

.max-w-\[90vw\] {
  max-width: 90vw;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.touch-pan-x {
  --tw-pan-x: pan-x;
  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none {
  resize: none;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.scroll-mt-5 {
  scroll-margin-top: 1.25rem;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border));
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-y-visible {
  overflow-y: visible;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: var(--radius);
}

.rounded-\[5px\] {
  border-radius: 5px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: var(--radius);
}

.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.rounded-none {
  border-radius: 0px;
}

.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

.rounded-xl {
  border-radius: var(--radius);
}

.rounded-b-lg {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.rounded-b-xl {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.rounded-r-lg {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300\/60 {
  border-color: rgb(252 211 77 / 0.6);
}

.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}

.border-amber-800 {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.border-background {
  border-color: hsl(var(--background));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-border {
  border-color: hsl(var(--border));
}

.border-border\/20 {
  border-color: hsl(var(--border) / 0.2);
}

.border-border\/30 {
  border-color: hsl(var(--border) / 0.3);
}

.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}

.border-border\/60 {
  border-color: hsl(var(--border) / 0.6);
}

.border-card {
  border-color: hsl(var(--card));
}

.border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}

.border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}

.border-destructive\/40 {
  border-color: hsl(var(--destructive) / 0.4);
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-input {
  border-color: hsl(var(--input));
}

.border-muted {
  border-color: hsl(var(--muted));
}

.border-primary {
  border-color: hsl(var(--primary));
}

.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}

.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}

.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-sidebar-border {
  border-color: hsl(var(--sidebar-border));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-t-primary {
  border-top-color: hsl(var(--primary));
}

.\!bg-accent {
  background-color: hsl(var(--accent)) !important;
}

.\!bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1) !important;
}

.bg-\[var\(--niriv-primary\)\] {
  background-color: var(--niriv-primary);
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-accent\/30 {
  background-color: hsl(var(--accent) / 0.3);
}

.bg-accent\/70 {
  background-color: hsl(var(--accent) / 0.7);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}

.bg-background {
  background-color: hsl(var(--background));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}

.bg-black\/95 {
  background-color: rgb(0 0 0 / 0.95);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-border {
  background-color: hsl(var(--border));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-card\/40 {
  background-color: hsl(var(--card) / 0.4);
}

.bg-card\/50 {
  background-color: hsl(var(--card) / 0.5);
}

.bg-card\/80 {
  background-color: hsl(var(--card) / 0.8);
}

.bg-card\/95 {
  background-color: hsl(var(--card) / 0.95);
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-destructive-foreground {
  background-color: hsl(var(--destructive-foreground));
}

.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}

.bg-destructive\/15 {
  background-color: hsl(var(--destructive) / 0.15);
}

.bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-green-600\/10 {
  background-color: rgb(22 163 74 / 0.1);
}

.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-muted-foreground\/30 {
  background-color: hsl(var(--muted-foreground) / 0.3);
}

.bg-muted-foreground\/40 {
  background-color: hsl(var(--muted-foreground) / 0.4);
}

.bg-muted\/10 {
  background-color: hsl(var(--muted) / 0.1);
}

.bg-muted\/15 {
  background-color: hsl(var(--muted) / 0.15);
}

.bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}

.bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3);
}

.bg-muted\/40 {
  background-color: hsl(var(--muted) / 0.4);
}

.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}

.bg-muted\/60 {
  background-color: hsl(var(--muted) / 0.6);
}

.bg-muted\/70 {
  background-color: hsl(var(--muted) / 0.7);
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}

.bg-popover {
  background-color: hsl(var(--popover));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}

.bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}

.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-sidebar {
  background-color: hsl(var(--sidebar-background));
}

.bg-sidebar-accent {
  background-color: hsl(var(--sidebar-accent));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary {
  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/10 {
  --tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5 {
  --tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/90 {
  --tw-gradient-from: hsl(var(--primary) / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-background {
  --tw-gradient-to: hsl(var(--background) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary\/5 {
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary\/70 {
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-accent-foreground\/40 {
  --tw-gradient-to: hsl(var(--accent-foreground) / 0.4) var(--tw-gradient-to-position);
}

.to-background {
  --tw-gradient-to: hsl(var(--background)) var(--tw-gradient-to-position);
}

.to-emerald-700 {
  --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}

.to-primary {
  --tw-gradient-to: hsl(var(--primary)) var(--tw-gradient-to-position);
}

.to-primary\/5 {
  --tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}

.to-primary\/60 {
  --tw-gradient-to: hsl(var(--primary) / 0.6) var(--tw-gradient-to-position);
}

.to-primary\/70 {
  --tw-gradient-to: hsl(var(--primary) / 0.7) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-center {
  background-position: center;
}

.fill-amber-400 {
  fill: #fbbf24;
}

.fill-amber-500 {
  fill: #f59e0b;
}

.fill-blue-500 {
  fill: #3b82f6;
}

.fill-current {
  fill: currentColor;
}

.fill-destructive {
  fill: hsl(var(--destructive));
}

.fill-muted-foreground {
  fill: hsl(var(--muted-foreground));
}

.fill-muted-foreground\/20 {
  fill: hsl(var(--muted-foreground) / 0.2);
}

.fill-orange-500 {
  fill: #f97316;
}

.fill-primary {
  fill: hsl(var(--primary));
}

.fill-yellow-400 {
  fill: #facc15;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-0\.5 {
  padding-bottom: 0.125rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-36 {
  padding-bottom: 9rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-24 {
  padding-right: 6rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-32 {
  padding-right: 8rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[26px\] {
  padding-top: 26px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-\[Noto_Sans_Devanagari\2c sans-serif\] {
  font-weight: Noto Sans Devanagari,sans-serif;
}

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

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

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

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[\.12em\] {
  letter-spacing: .12em;
}

.tracking-\[\.14em\] {
  letter-spacing: .14em;
}

.tracking-\[\.16em\] {
  letter-spacing: .16em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-foreground {
  color: hsl(var(--foreground)) !important;
}

.\!text-primary {
  color: hsl(var(--primary)) !important;
}

.text-\[\#0866ff\] {
  --tw-text-opacity: 1;
  color: rgb(8 102 255 / var(--tw-text-opacity, 1));
}

.text-\[\#25D366\] {
  --tw-text-opacity: 1;
  color: rgb(37 211 102 / var(--tw-text-opacity, 1));
}

.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-600\/70 {
  color: rgb(5 150 105 / 0.7);
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-foreground\/30 {
  color: hsl(var(--foreground) / 0.3);
}

.text-foreground\/70 {
  color: hsl(var(--foreground) / 0.7);
}

.text-foreground\/75 {
  color: hsl(var(--foreground) / 0.75);
}

.text-foreground\/80 {
  color: hsl(var(--foreground) / 0.8);
}

.text-foreground\/85 {
  color: hsl(var(--foreground) / 0.85);
}

.text-foreground\/90 {
  color: hsl(var(--foreground) / 0.9);
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color: inherit;
}

.text-muted {
  color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-muted-foreground\/30 {
  color: hsl(var(--muted-foreground) / 0.3);
}

.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}

.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}

.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}

.text-muted-foreground\/70 {
  color: hsl(var(--muted-foreground) / 0.7);
}

.text-muted-foreground\/80 {
  color: hsl(var(--muted-foreground) / 0.8);
}

.text-muted-foreground\/90 {
  color: hsl(var(--muted-foreground) / 0.9);
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}

.text-primary\/50 {
  color: hsl(var(--primary) / 0.5);
}

.text-primary\/70 {
  color: hsl(var(--primary) / 0.7);
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-600\/70 {
  color: rgb(220 38 38 / 0.7);
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}

.text-sidebar-foreground {
  color: hsl(var(--sidebar-foreground));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.decoration-2 {
  text-decoration-thickness: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}

.placeholder-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-100 {
  opacity: 1;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-12px_32px_rgba\(0\2c 0\2c 0\2c \.08\)\] {
  --tw-shadow: 0 -12px 32px rgba(0,0,0,.08);
  --tw-shadow-colored: 0 -12px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_1px_3px_0_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0_1px_2px_-1px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 1px 3px 0 rgba(0,0,0,0.04),0 1px 2px -1px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_12px_rgba\(0\2c 0\2c 0\2c 0\.07\)\] {
  --tw-shadow: 0 3px 12px rgba(0,0,0,0.07);
  --tw-shadow-colored: 0 3px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-card {
  --tw-ring-color: hsl(var(--card));
}

.ring-destructive {
  --tw-ring-color: hsl(var(--destructive));
}

.ring-orange-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity, 1));
}

.ring-primary {
  --tw-ring-color: hsl(var(--primary));
}

.ring-primary\/30 {
  --tw-ring-color: hsl(var(--primary) / 0.3);
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }

  33% {
    transform: translateY(-20px) translateX(10px);
  }

  66% {
    transform: translateY(10px) translateX(-10px);
  }
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 60px;
  }
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  75%, 100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.\[out\:json\] {
  out: json;
}

.\[timeout\:17\] {
  timeout: 17;
}

.\[timeout\:25\] {
  timeout: 25;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.mention-dropdown {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dark .mention-dropdown {
  background: hsl(var(--popover));
  border-color: hsl(var(--border));
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.mention-item {
  color: hsl(var(--popover-foreground));
}

.mention-item:hover {
  background: hsl(var(--accent));
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* Cricket scores widget (search results + hub) */

.cr-status,
.niriv-cr-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}

.cr-status.ns, .niriv-cr-preset-ns  {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.cr-status.live, .niriv-cr-preset-live {
  background: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
  animation: cr-live-pulse 1.8s ease-in-out infinite;
}

.cr-status.ft, .niriv-cr-preset-ft  {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

.cr-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--destructive));
  animation: cr-live-pulse 1.8s ease-in-out infinite;
}

@keyframes cr-live-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.hover\:text-green-600:hover.feedback-btn[data-feedback="like"] {
  pointer-events: none;
}

.hover\:text-red-600:hover
.feedback-btn[data-feedback="dislike"] {
  pointer-events: none;
}

.dark\:hidden:is(.dark *)#image-lightbox,.dark\:hidden:is(.dark *)
#video-lightbox {
  display: none;
}

.dark\:hidden:is(.dark *)#video-lightbox {
  display: none;
}

@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden#image-lightbox,.max-lg\:hidden
#video-lightbox {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden#image-lightbox,.max-lg\:hidden
#video-lightbox {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden#image-lightbox,.max-lg\:hidden
#video-lightbox {
    display: none;
  }

  .max-lg\:hidden#video-lightbox {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:hidden#image-lightbox,.sm\:hidden
#video-lightbox {
    display: none;
  }

  .sm\:hidden#video-lightbox {
    display: none;
  }
}

@media (min-width: 768px) {
  .md\:hidden#image-lightbox,.md\:hidden
#video-lightbox {
    display: none;
  }

  .md\:hidden#video-lightbox {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden#image-lightbox,.lg\:hidden
#video-lightbox {
    display: none;
  }

  .lg\:hidden#video-lightbox {
    display: none;
  }
}

.dark\:prose-invert:is(.dark *) {
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground\/50::-moz-placeholder {
  color: hsl(var(--muted-foreground) / 0.5);
}

.placeholder\:text-muted-foreground\/50::placeholder {
  color: hsl(var(--muted-foreground) / 0.5);
}

.placeholder\:text-muted-foreground\/60::-moz-placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}

.placeholder\:text-muted-foreground\/60::placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.focus-within\:border-primary:focus-within {
  border-color: hsl(var(--primary));
}

.focus-within\:border-primary\/30:focus-within {
  border-color: hsl(var(--primary) / 0.3);
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-primary\/30:focus-within {
  --tw-ring-color: hsl(var(--primary) / 0.3);
}

.focus-within\:ring-primary\/40:focus-within {
  --tw-ring-color: hsl(var(--primary) / 0.4);
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-destructive:hover {
  border-color: hsl(var(--destructive));
}

.hover\:border-muted-foreground\/30:hover {
  border-color: hsl(var(--muted-foreground) / 0.3);
}

.hover\:border-primary:hover {
  border-color: hsl(var(--primary));
}

.hover\:border-primary\/20:hover {
  border-color: hsl(var(--primary) / 0.2);
}

.hover\:border-primary\/30:hover {
  border-color: hsl(var(--primary) / 0.3);
}

.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

.hover\:bg-accent\/10:hover {
  background-color: hsl(var(--accent) / 0.1);
}

.hover\:bg-accent\/30:hover {
  background-color: hsl(var(--accent) / 0.3);
}

.hover\:bg-accent\/50:hover {
  background-color: hsl(var(--accent) / 0.5);
}

.hover\:bg-accent\/80:hover {
  background-color: hsl(var(--accent) / 0.8);
}

.hover\:bg-black\/10:hover {
  background-color: rgb(0 0 0 / 0.1);
}

.hover\:bg-card:hover {
  background-color: hsl(var(--card));
}

.hover\:bg-destructive\/10:hover {
  background-color: hsl(var(--destructive) / 0.1);
}

.hover\:bg-destructive\/20:hover {
  background-color: hsl(var(--destructive) / 0.2);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/10:hover {
  background-color: hsl(var(--muted) / 0.1);
}

.hover\:bg-muted\/20:hover {
  background-color: hsl(var(--muted) / 0.2);
}

.hover\:bg-muted\/30:hover {
  background-color: hsl(var(--muted) / 0.3);
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-muted\/80:hover {
  background-color: hsl(var(--muted) / 0.8);
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}

.hover\:bg-primary\/20:hover {
  background-color: hsl(var(--primary) / 0.2);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sidebar-accent:hover {
  background-color: hsl(var(--sidebar-accent));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:fill-destructive\/40:hover {
  fill: hsl(var(--destructive) / 0.4);
}

.hover\:fill-primary\/40:hover {
  fill: hsl(var(--primary) / 0.4);
}

.hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}

.hover\:text-destructive\/80:hover {
  color: hsl(var(--destructive) / 0.8);
}

.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-green-600:hover {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary:hover {
  color: hsl(var(--primary));
}

.hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}

.hover\:text-primary\/80:hover {
  color: hsl(var(--primary) / 0.8);
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover {
  color: hsl(var(--sidebar-accent-foreground));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-1:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-primary:hover {
  --tw-ring-color: hsl(var(--primary));
}

.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.focus\:border-primary:focus {
  border-color: hsl(var(--primary));
}

.focus\:border-primary\/50:focus {
  border-color: hsl(var(--primary) / 0.5);
}

.focus\:bg-background:focus {
  background-color: hsl(var(--background));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary:focus {
  --tw-ring-color: hsl(var(--primary));
}

.focus\:ring-primary\/10:focus {
  --tw-ring-color: hsl(var(--primary) / 0.1);
}

.focus\:ring-primary\/30:focus {
  --tw-ring-color: hsl(var(--primary) / 0.3);
}

.focus-visible\:border-accent:focus-visible {
  border-color: hsl(var(--accent));
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.group:hover .group-hover\:text-foreground {
  color: hsl(var(--foreground));
}

.group:hover .group-hover\:text-primary {
  color: hsl(var(--primary));
}

.group\/sl:hover .group-hover\/sl\:underline {
  text-decoration-line: underline;
}

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.dark\:block:is(.dark *) {
  display: block;
}

.dark\:hidden:is(.dark *) {
  display: none;
}

.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-800\/40:is(.dark *) {
  border-color: rgb(146 64 14 / 0.4);
}

.dark\:border-amber-900\/50:is(.dark *) {
  border-color: rgb(120 53 15 / 0.5);
}

.dark\:border-border:is(.dark *) {
  border-color: hsl(var(--border));
}

.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-green-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-white\/10:is(.dark *) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:border-yellow-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}

.dark\:bg-amber-900\/10:is(.dark *) {
  background-color: rgb(120 53 15 / 0.1);
}

.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:bg-amber-950\/20:is(.dark *) {
  background-color: rgb(69 26 3 / 0.2);
}

.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}

.dark\:bg-black\/20:is(.dark *) {
  background-color: rgb(0 0 0 / 0.2);
}

.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: rgb(30 58 138 / 0.3);
}

.dark\:bg-card:is(.dark *) {
  background-color: hsl(var(--card));
}

.dark\:bg-emerald-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}

.dark\:bg-emerald-950\/20:is(.dark *) {
  background-color: rgb(2 44 34 / 0.2);
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900\/20:is(.dark *) {
  background-color: rgb(20 83 45 / 0.2);
}

.dark\:bg-green-900\/30:is(.dark *) {
  background-color: rgb(20 83 45 / 0.3);
}

.dark\:bg-green-950\/20:is(.dark *) {
  background-color: rgb(5 46 22 / 0.2);
}

.dark\:bg-neutral-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-900\/30:is(.dark *) {
  background-color: rgb(124 45 18 / 0.3);
}

.dark\:bg-primary\/20:is(.dark *) {
  background-color: hsl(var(--primary) / 0.2);
}

.dark\:bg-purple-900\/30:is(.dark *) {
  background-color: rgb(88 28 135 / 0.3);
}

.dark\:bg-red-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-900\/20:is(.dark *) {
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:bg-red-900\/30:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:bg-red-950\/20:is(.dark *) {
  background-color: rgb(69 10 10 / 0.2);
}

.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color: rgb(113 63 18 / 0.2);
}

.dark\:bg-yellow-950\/20:is(.dark *) {
  background-color: rgb(66 32 6 / 0.2);
}

.dark\:bg-zinc-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400\/70:is(.dark *) {
  color: rgb(52 211 153 / 0.7);
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-green-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}

.dark\:text-green-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-muted-foreground:is(.dark *) {
  color: hsl(var(--muted-foreground));
}

.dark\:text-orange-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.dark\:text-primary-foreground:is(.dark *) {
  color: hsl(var(--primary-foreground));
}

.dark\:text-purple-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.dark\:text-red-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400\/70:is(.dark *) {
  color: rgb(248 113 113 / 0.7);
}

.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/20:hover:is(.dark *) {
  background-color: hsl(var(--accent) / 0.2);
}

.dark\:hover\:bg-black\/30:hover:is(.dark *) {
  background-color: rgb(0 0 0 / 0.3);
}

.dark\:hover\:bg-white\/10:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}

.dark\:hover\:text-foreground:hover:is(.dark *) {
  color: hsl(var(--foreground));
}

.dark\:hover\:text-gray-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-green-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .sm\:mb-16 {
    margin-bottom: 4rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:mt-3\.5 {
    margin-top: 0.875rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-11 {
    height: 2.75rem;
  }

  .sm\:h-24 {
    height: 6rem;
  }

  .sm\:h-28 {
    height: 7rem;
  }

  .sm\:min-h-\[160px\] {
    min-height: 160px;
  }

  .sm\:min-h-\[250px\] {
    min-height: 250px;
  }

  .sm\:w-11 {
    width: 2.75rem;
  }

  .sm\:w-24 {
    width: 6rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[64px\] {
    min-width: 64px;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:rounded-lg {
    border-radius: var(--radius);
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:pb-2 {
    padding-bottom: 0.5rem;
  }

  .sm\:pl-6 {
    padding-left: 1.5rem;
  }

  .sm\:pt-4 {
    padding-top: 1rem;
  }

  .sm\:pt-8 {
    padding-top: 2rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:leading-tight {
    line-height: 1.25;
  }
}

@media (min-width: 768px) {
  .md\:order-3 {
    order: 3;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:mb-12 {
    margin-bottom: 3rem;
  }

  .md\:mr-3 {
    margin-right: 0.75rem;
  }

  .md\:mt-2 {
    margin-top: 0.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:aspect-video {
    aspect-ratio: 16 / 9;
  }

  .md\:h-11 {
    height: 2.75rem;
  }

  .md\:h-28 {
    height: 7rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-60 {
    height: 15rem;
  }

  .md\:h-80 {
    height: 20rem;
  }

  .md\:h-96 {
    height: 24rem;
  }

  .md\:w-11 {
    width: 2.75rem;
  }

  .md\:w-28 {
    width: 7rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .md\:rounded-lg {
    border-radius: var(--radius);
  }

  .md\:p-0 {
    padding: 0px;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-2 {
    padding: 0.5rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .md\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .md\:pb-8 {
    padding-bottom: 2rem;
  }

  .md\:pt-10 {
    padding-top: 2.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-\[28px\] {
    font-size: 28px;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:bottom-6 {
    bottom: 1.5rem;
  }

  .lg\:left-0 {
    left: 0px;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-14 {
    top: 3.5rem;
  }

  .lg\:top-20 {
    top: 5rem;
  }

  .lg\:top-28 {
    top: 7rem;
  }

  .lg\:z-40 {
    z-index: 40;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .lg\:ml-64 {
    margin-left: 16rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-\[400px\] {
    height: 400px;
  }

  .lg\:h-\[480px\] {
    height: 480px;
  }

  .lg\:h-\[calc\(100vh-3\.5rem\)\] {
    height: calc(100vh - 3.5rem);
  }

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:w-\[350px\] {
    width: 350px;
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 672px\)_320px\] {
    grid-template-columns: minmax(0,672px) 320px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:rounded-b-none {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pr-24 {
    padding-right: 6rem;
  }

  .lg\:pt-3 {
    padding-top: 0.75rem;
  }

  .lg\:pt-7 {
    padding-top: 1.75rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}


/* ==== custom.css ==== */
/* Mukta font for Devanagari (Nepali/Hindi) text — self-hosted @font-face below */

/* Legacy external Mukta declarations were removed: the current font faces are
   emitted by functions.php, preventing obsolete font URLs from being fetched. */
/*
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Mukta Light'), local('Mukta-Light'), url(https://fonts.gstatic.com/s/mukta/v12/iJWHBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Mukta Regular'), local('Mukta-Regular'), url(https://fonts.gstatic.com/s/mukta/v12/iJWKBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Mukta Medium'), local('Mukta-Medium'), url(https://fonts.gstatic.com/s/mukta/v12/iJWJBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Mukta SemiBold'), local('Mukta-SemiBold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWEBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Mukta Bold'), local('Mukta-Bold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWIBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Mukta ExtraBold'), local('Mukta-ExtraBold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWICXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
*/

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/FiraSans-Latin-800.woff2') format('woff2');
}

:root {
  /* Naver's page grey, sampled off the reference screenshot (#EDF0F4). The old
     value was a warm beige (#F4F3F0) only 5% lighter than the white cards, so a
     card barely separated from the page. A cool grey one step darker makes the
     white panels read as panels. Dark mode keeps its own value below. */
  --background: 214 24% 94.3%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 135 96% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 135 25% 93%;
  --secondary-foreground: 0 0% 12%;
  --muted: 135 25% 93%;
  --muted-foreground: 0 0% 45%;
  --accent: 135 30% 95%;
  --accent-foreground: 0 0% 12%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 135 20% 90%;
  --input: 135 20% 90%;
  --ring: 135 96% 50%;
  --radius: 10px;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 9%;
  --sidebar-primary: 135 96% 36%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 135 30% 95%;
  --sidebar-accent-foreground: 0 0% 12%;
  --sidebar-border: 135 20% 90%;
  --sidebar-ring: 135 96% 50%;
}

/* Voting icons styling for all states */
.upvote [data-lucide="flame"],
.downvote [data-lucide="flame-kindling"] {
  fill: currentColor !important;
}

/* Active upvote state (orange-red or community color) */
[data-user-vote="up"] .upvote [data-lucide="flame"],
.upvote.text-primary [data-lucide="flame"],
.upvote .text-primary[data-lucide="flame"],
[data-lucide="flame"].filled {
  color: var(--community-color, #ff4500) !important;
}

/* Active downvote state (frosty ice-blue) */
[data-user-vote="down"] .downvote [data-lucide="flame-kindling"],
.downvote.text-destructive [data-lucide="flame-kindling"],
.downvote .text-destructive[data-lucide="flame-kindling"],
[data-lucide="flame-kindling"].filled {
  color: #0ea5e9 !important;
}

/* Notification icons active fill */
.notification-type-icon [data-lucide="flame"] {
  fill: #ff4500 !important;
  color: #ff4500 !important;
}
.notification-type-icon [data-lucide="flame-kindling"] {
  fill: #0ea5e9 !important;
  color: #0ea5e9 !important;
}

:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
  --background: 135 45% 6%;
  --foreground: 0 0% 97%;
  --card: 135 40% 9%;
  --card-foreground: 0 0% 97%;
  --popover: 135 40% 9%;
  --popover-foreground: 0 0% 97%;
  --primary: 135 96% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 135 35% 14%;
  --secondary-foreground: 0 0% 97%;
  --muted: 135 35% 14%;
  --muted-foreground: 135 12% 62%;
  --accent: 135 40% 18%;
  --accent-foreground: 0 0% 97%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;
  --border: 135 35% 18%;
  --input: 135 35% 18%;
  --ring: 135 96% 55%;
  --sidebar-background: 135 40% 9%;
  --sidebar-foreground: 0 0% 97%;
  --sidebar-primary: 135 96% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 135 40% 18%;
  --sidebar-accent-foreground: 0 0% 97%;
  --sidebar-border: 135 35% 18%;
  --sidebar-ring: 135 96% 55%;
}

/* Feed toggle – pill-shaped light switch */
.feed-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: hsl(var(--muted));
  border-radius: 9999px;
  padding: 3px;
  gap: 0;
  cursor: pointer;
}
.feed-toggle-option {
  position: relative;
  z-index: 2;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.25s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.feed-toggle-option.active {
  color: hsl(var(--primary-foreground));
}
.feed-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.3s cubic-bezier(.4,.2,.2,1), width 0.3s cubic-bezier(.4,.2,.2,1);
  z-index: 1;
  pointer-events: none;
}
/* Dark mode adjustments */
.dark .feed-toggle {
  background: hsl(var(--muted));
}
.dark .feed-toggle-option.active {
  color: hsl(var(--primary-foreground));
}

*, *::before, *::after { border-color: hsl(var(--border)); }

html, body, * { 
  font-family: 'Fira Sans', 'Mukta', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 
}

/* Story-writing prompts always use the same centered column as article cards,
   whether the desktop sidebar is visible or collapsed. */
#main-content > .story-writing-prompt {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
#main-content > .story-writing-prompt > .story-writing-prompt-card {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 850px; /* same column as the article card */
  margin-left: auto;
  margin-right: auto;
}

/* Ensure mobile content never touches edges */
@media (max-width: 1023px) {
  main#main-content {
    padding-left: 0.5rem;  /* 8px */
    padding-right: 0.5rem; /* 8px */
  }
  
  main#main-content > * {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* If the direct child is already a container with flex gap-6 px-4 etc., keep existing padding */
  main#main-content > div.flex.gap-6 {
    padding-left: 0;
    padding-right: 0;
  }

  /* The single-article column keeps a gutter from the viewport edge (the
     Women's single gets one from .wms-wrap) instead of running edge to edge.
     The main's own 8px padding is dropped for this page so the gutter is the
     same 16px (10px on phones) the Women's single uses. */
  body.single-post #main-content:has(> .single-article-column) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main#main-content > .single-article-column {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Cricket pages — the hub, NPL and the team/match/player virtual pages — all
     render through a single .cr-page wrapper, whose own px-4 the reset above
     strips. That left them flush against the viewport edge while the rest of
     the site kept a gutter, so give the wrapper the same one the single
     article uses: 16px here, 10px on phones. The main's own 8px is dropped for
     these pages so the gutter is exactly that, not 8px plus it. */
  main#main-content:has(> .cr-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main#main-content > .cr-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Games sub-site — its chrome-less shell carries its own surfaces, the top
     bar and the rail panel, and the main's 8px gutter held both 8px short of
     the screen edge. Drop the main's padding so those backgrounds run edge to
     edge; the games CSS supplies the 12px text gutter inside them. */
  main#main-content:has(> .gm-app) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 767px) {
  main#main-content > .single-article-column {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  main#main-content > .cr-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Sidebar collapsed on desktop - center content, full-width section backgrounds */
@media (min-width: 1024px) {
  body.sidebar-collapsed #main-content {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 71.875rem; /* 1150px */
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* Writing prompts keep the article-card column when the sidebar collapses;
     the generic full-bleed rules below must not expand them to the viewport. */
  body.sidebar-collapsed #main-content > .story-writing-prompt {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.sidebar-collapsed #main-content > .story-writing-prompt > .story-writing-prompt-card,
  body.sidebar-collapsed #main-content > .story-writing-prompt > section.story-writing-prompt-card {
    width: 100% !important;
    max-width: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Single post: all sections match the 850px article column. The lightbox is
     a direct <div> child of <main> (see template-parts/lightbox.php), so it
     must be excluded here — otherwise this max-width clamps the full-screen
     viewer to the article column width on desktop while phones stay correct. */
  body.single-post.sidebar-collapsed #main-content > div:not(#lightbox),
  body.single-post.sidebar-collapsed #main-content > section:not(#lightbox) {
    max-width: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.sidebar-collapsed #site-footer {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 71.875rem;
    width: 100%;
  }
  
  /* Full-bleed heroes: break out of the centered (sidebar-collapsed) container to full
     viewport width, then re-center the inner content at 1050px. Covers <section> and
     <div> hero patterns used across pages so the hero background is never constrained. */
  body.sidebar-collapsed #main-content > section,
  body.sidebar-collapsed #main-content > div.relative.overflow-hidden,
  body.sidebar-collapsed #main-content > div.about-full-width,
  body.sidebar-collapsed #main-content > div.blooms-hero-bg,
  body.sidebar-collapsed #main-content > section.wc-hero-section,
  body.sidebar-collapsed #main-content > section.trends-hero,
  body.sidebar-collapsed #main-content > .hero-bleed,
  body.sidebar-collapsed #main-content > div > section,
  body.sidebar-collapsed #main-content > div > div.relative.overflow-hidden,
  body.sidebar-collapsed #main-content > div > .hero-bleed,
  body.sidebar-collapsed #main-content > div > div.about-full-width,
  body.sidebar-collapsed #main-content .about-full-width,
  body.sidebar-collapsed #main-content .hero-bleed,
  body.sidebar-collapsed #main-content .blooms-hero-bg,
  body.sidebar-collapsed #main-content .wc-hero-section,
  body.sidebar-collapsed #main-content .trends-hero {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Re-center the hero's inner content at 1150px */
  body.sidebar-collapsed #main-content > section > div,
  body.sidebar-collapsed #main-content > div.relative.overflow-hidden > div,
  body.sidebar-collapsed #main-content > div.about-full-width > div,
  body.sidebar-collapsed #main-content > section.wc-hero-section > *,
  body.sidebar-collapsed #main-content > section.trends-hero > *,
  body.sidebar-collapsed #main-content > .hero-bleed > *,
  body.sidebar-collapsed #main-content > div > section > div,
  body.sidebar-collapsed #main-content > div > div.relative.overflow-hidden > div,
  body.sidebar-collapsed #main-content > div > .hero-bleed > *,
  body.sidebar-collapsed #main-content > div > div.about-full-width > div,
  body.sidebar-collapsed #main-content .about-full-width > div,
  body.sidebar-collapsed #main-content .hero-bleed > *,
  body.sidebar-collapsed #main-content .wc-hero-section > *,
  body.sidebar-collapsed #main-content .trends-hero > * {
    max-width: 71.875rem;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Cricket pages (.cr-page) keep their own centered max-w-5xl layout —
     their sections must never break out to full viewport width. Without this
     the hub hero loses its rounded corners (flush with the window edges) and
     the New & Upcoming / Results sections stretch edge-to-edge. */
  body.sidebar-collapsed #main-content > .cr-page > section,
  body.sidebar-collapsed #main-content > .cr-page > section.cr-hero-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body.sidebar-collapsed #main-content > .cr-page > section > div {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  /* Football hub (.fb-page) is a centred max-w-5xl board like the cricket hub:
     without this its hero and every section inherit the full-bleed rule above,
     lay out at 100vw inside an overflow-x:hidden column and get clipped by the
     1080px container — which is what stretched the tables and cards. */
  body.sidebar-collapsed #main-content > .fb-page > section,
  body.sidebar-collapsed #main-content > .fb-page > .fb-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body.sidebar-collapsed #main-content > .fb-page > section > div {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  /* Horoscope hub and sign pages (.horo-page) are a centred max-w-5xl board
     too, so they need the same opt-out. Every <section> in the hub — the hero,
     the rashi grid and the closing text panel — is a direct child of that
     wrapper, so without this each one broke out to 100vw and was re-centred at
     1150px: hero flush with the window edges, rashi tiles stretched wider than
     the name table beside them, sign page edges 1280px against the hub's. */
  body.sidebar-collapsed #main-content > .horo-page > section,
  body.sidebar-collapsed #main-content > .horo-page > .horo-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body.sidebar-collapsed #main-content > .horo-page > section > div,
  body.sidebar-collapsed #main-content > .horo-page > .horo-hero > div {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
  }
}

/* Standalone full-bleed hero utility: any hero tagged with .hero-bleed breaks out to
   full viewport width (desktop) and re-centers its inner content, independent of the
   sidebar-collapsed state. Useful for pages that center content another way. */
@media (min-width: 1024px) {
  #main-content > .hero-bleed,
  #main-content > div > .hero-bleed,
  #main-content .hero-bleed {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #main-content > .hero-bleed > *,
  #main-content > div > .hero-bleed > *,
  #main-content .hero-bleed > * {
    max-width: 71.875rem;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Ensure content boxes (rounded-xl border etc.) have proper spacing */
main#main-content .rounded-xl {
  margin-left: 0;
  margin-right: 0;
}
body { background-color: hsl(var(--background)) !important; color: hsl(var(--foreground)); }
.dark body { background-color: hsl(var(--background)) !important; color: hsl(var(--foreground)); }

/* Live blog "Go to Updates" button: white text + arrow in dark mode */
.dark .niriv-goto-updates { color: #fff !important; background: hsl(var(--accent) / 0.28) !important; }
.dark .niriv-goto-updates svg,
.dark .niriv-goto-updates i { color: #fff !important; stroke: #fff !important; }

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background-color: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
  background-color: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: var(--radius); width: 90%; max-width: 560px; max-height: 85vh;
  overflow-y: auto; padding: 1.5rem;
}
#niriv-delete-confirm:hover { background-color: hsl(var(--destructive) / 0.9); }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.notification-badge {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}

/* Avatar notification count — circular badge (top-right), shown only when the
   user menu is closed; hidden while the dropdown is open. */
.avatar-notif-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 2px hsl(var(--background));
  z-index: 2;
  pointer-events: none;
  font-family: inherit;
}

/* Accent ring around the user avatar (excludes the count badge). */
.avatar-ring-wrap > *:not(.avatar-notif-count) {
  box-shadow: 0 0 0 4px hsl(var(--accent));
}

#lightbox-thumbnails { scrollbar-width: thin; }
#lightbox-thumbnails .thumb-active { outline: 2px solid white; outline-offset: -2px; }
#lightbox-thumbnails img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
@media (min-width: 768px) {
  #lightbox-img { max-height: 85vh !important; max-width: 90vw !important; }
  #lightbox-thumbnails { display: flex !important; }
}
@media (min-width: 768px) {
  #lightbox-img { max-height: 85vh !important; max-width: 90vw !important; }
  #lightbox-thumbnails { display: flex !important; }
}

.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.gallery-arrow {
  -webkit-tap-highlight-color: transparent;
}


/* Toast Notifications */
.toast-container {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast-container.top-right {
  top: 64px; /* Below header (header is ~56px) */
  right: 1rem;
}
.toast-container.bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.toast {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.toast.toast-success {
  border-left: 3px solid hsl(var(--primary));
}
.toast.toast-warning {
  border-left: 3px solid hsl(38 92% 50%);
}
.toast.toast-error {
  border-left: 3px solid hsl(var(--destructive));
}
.toast {
  overflow: hidden;
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: hsl(var(--primary) / 0.3);
  animation: toastProgress 3s linear forwards;
}
@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.toast.removing {
  animation: slideOut 0.3s ease-out forwards;
}

.post-list-container > .post-card h2 {
  font-size: 1.0625rem;
}
@media (max-width: 640px) {
  .post-list-container > .post-card h2 {
    font-size: 1rem;
  }
}
/* Article card title */
.article-card h2 {
  font-size: 1.125rem;
}
@media (max-width: 640px) {
  .article-card h2 {
    font-size: 1rem;
  }
}

/* Carousel scroll arrows */
.carousel-wrapper {
  position: relative;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  color: hsl(var(--foreground));
  padding: 0;
  line-height: 1;
}
.carousel-arrow:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  animation: none;
}
.carousel-arrow-left {
  left: 4px;
  animation: carouselPeekPullLeft 4s ease-in-out infinite;
}
.carousel-arrow-right {
  right: 4px;
  animation: carouselPeekPullRight 4s ease-in-out infinite;
}
@keyframes carouselPeekPullLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  40% { transform: translateY(-50%) translateX(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
  46% { transform: translateY(-50%) translateX(-3px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
  52% { transform: translateY(-50%) translateX(0); }
}
@keyframes carouselPeekPullRight {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  40% { transform: translateY(-50%) translateX(-10px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
  46% { transform: translateY(-50%) translateX(3px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
  52% { transform: translateY(-50%) translateX(0); }
}

/* Voting column - clean divider instead of background */
.post-card .flex > div.flex.flex-col.items-center.bg-muted {
  background: transparent !important;
  border-right: 1px solid hsl(var(--border) / 0.4);
  margin-right: 0;
  padding-right: 0.75rem;
}

/* Suggested Communities carousel */
.suggested-grid-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  max-width: 100%;
}
.suggested-grid-wrapper::-webkit-scrollbar {
  height: 4px;
}
.suggested-grid-wrapper::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}
.suggested-grid-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.suggested-grid {
  display: flex;
  gap: 0.75rem;
}
.suggested-grid > .suggested-card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 0.5rem);
  min-width: 200px;
}
@media (max-width: 639px) {
  .suggested-grid > .suggested-card {
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 140px;
  }
}
.suggested-card {
  border-radius: 0.75rem;
  background-color: hsl(var(--card));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suggested-card .suggested-card-desc {
  flex: 1;
  margin: 0.5rem 0.75rem;
}
.suggested-card > .join-community-btn {
  margin: 0 0.75rem 0.75rem;
  width: auto;
  align-self: stretch;
}
.suggested-card:hover {
  transform: translateY(-1px);
}
.suggested-card-cover {
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-image: linear-gradient(135deg, hsl(var(--primary) / 0.3), hsl(var(--primary) / 0.1));
}
.suggested-grid > .suggested-card:nth-child(6n+1) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+2) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.suggested-grid > .suggested-card:nth-child(6n+3) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+4) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.suggested-grid > .suggested-card:nth-child(6n+5) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+6) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.suggested-card-icon-wrap {
  display: flex;
  justify-content: center;
  margin-top: -18px;
}
.suggested-card-icon-wrap img,
.suggested-card-icon-wrap span {
  border: 3px solid hsl(var(--background));
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}
.suggested-card-info {
  padding: 0.5rem 0.75rem 0.75rem;
  text-align: center;
  flex: 1;
}

/* Post title */
.post-title {
  font-size: 24px;
}
@media (min-width: 768px) {
  .post-title {
    font-size: 30px;
  }
}

/* Single article card.
   Desktop: the card keeps its 850px width and the headline, standfirst, byline,
   body copy and tags sit in a 760px reading column centred inside it — the same
   inner measure as the Women's single article (.wms-single-head / .wms-single-body).
   The featured image ignores the 760px cap and bleeds the full card width.
   Phones/tablets: the blocks fill the card, held off the edge by --sa-pad, which
   also drives the media bleed so the image stays edge to edge at every width. */
.single-article-card {
  --sa-pad: 24px;
}
.single-article-body {
  padding: 26px var(--sa-pad) 24px;
}
.single-article-bleed {
  margin-left: calc(var(--sa-pad) * -1);
  margin-right: calc(var(--sa-pad) * -1);
}
.single-article-gutter {
  padding-left: var(--sa-pad);
  padding-right: var(--sa-pad);
}
/* Featured image: same 520px cap the Women's single puts on its hero, so both
   reading views show the same image height (still edge to edge, 16:9 crops). */
.single-article-hero {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
@media (max-width: 639px) {
  .single-article-card {
    --sa-pad: 16px;
  }
}
@media (min-width: 1024px) {
  /* 760px inner column, centred in the 850px card. */
  .single-article-body > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* The body-copy wrapper needs the extra class: single.php's own <style> block
     caps it at `max-width: 100%` later in the cascade, which otherwise leaves
     the paragraphs 802px wide while the headline above sits at 760px. */
  .single-article-body > .single-article-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* …but the featured image keeps the full card width, so it needs the bleed
     margins back (the rule above centres every child). */
  .single-article-body > .single-article-bleed {
    max-width: none;
    margin-left: calc(var(--sa-pad) * -1);
    margin-right: calc(var(--sa-pad) * -1);
  }
}

/* Single article content — one body-copy size for every reading view.
   .single-article-content wraps the_content() in the news single (single.php),
   the community post single and the Story single; the Updates single is the
   same reading view with its own wrapper class. Keeping them in one rule is
   what stops the paragraph size from changing with the post type. */
.single-article-content p,
.single-update-content p {
  font-size: 17px;
}
.dark .single-article-content {
  color: hsl(var(--foreground));
}
.dark .single-article-content,
.dark .single-article-content p,
.dark .single-article-content li,
.dark .single-article-content blockquote,
.dark .single-article-content h1,
.dark .single-article-content h2,
.dark .single-article-content h3,
.dark .single-article-content h4,
.dark .single-article-content h5,
.dark .single-article-content h6,
.dark .single-article-content span,
.dark .single-article-content strong,
.dark .single-article-content em {
  color: hsl(var(--foreground));
}

/* Mention links: no underline, font-weight 500 */
.mention-link {
  text-decoration: none !important;
  font-weight: 500;
}
.mention-link:hover {
  text-decoration: none !important;
}

/* Right sidebar widget */
.right-sidebar-widget h3 {
  font-size: 15px;
}
.right-sidebar-widget .text-sm {
  font-size: 15px;
}

/* Suggested People carousel */
.suggested-people-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  width: 100%;
}
.suggested-people-scroll::-webkit-scrollbar {
  height: 4px;
}
.suggested-people-scroll::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}
.suggested-people-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.suggested-person-card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 0.5rem);
  min-width: 200px;
  border-radius: 0.75rem;
  background-color: hsl(var(--card));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suggested-person-card .person-cover {
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.suggested-person-card .person-cover.person-gradient-1 {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.suggested-person-card .person-cover.person-gradient-2 {
  background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.suggested-person-card .person-cover.person-gradient-3 {
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.suggested-person-card .person-avatar-wrap {
  margin-top: -28px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.suggested-person-card .person-avatar-wrap img,
.suggested-person-card .person-avatar-wrap div {
  border: 3px solid hsl(var(--card));
  border-radius: 50%;
}
.suggested-person-card .person-info {
  padding: 0.5rem 1rem 0.75rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.suggested-person-card .person-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.suggested-person-card .person-name a {
  color: hsl(var(--foreground));
}
.suggested-person-card .person-name a:hover {
  color: hsl(var(--primary));
}
.suggested-person-card .person-username {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.suggested-person-card .person-karma {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.suggested-person-card .person-bio {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.35;
  margin-top: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.suggested-person-card .follow-user-btn {
  margin: 0 0.75rem 0.75rem;
  width: auto;
  align-self: stretch;
}
.suggested-person-card:hover {
  transform: translateY(-1px);
}
@media (max-width: 639px) {
  .suggested-person-card {
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 140px;
  }
}

/* Sidebar widget variety — removed: the nth-child accent top border and the
   extra nth-child shadow made a few widgets look different from the rest. */

/* Sort tabs - subtle Naver-style active state */
.sort-tab.bg-primary.text-primary-foreground {
  background-color: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 600;
}
.sort-tab.text-muted-foreground {
  font-weight: 500;
}

/* Mobile nav active indicator */
.mobile-nav-link.active {
  color: hsl(var(--primary));
}

/* ── Floating pill mobile nav ─────────────────────────────────────────────
   template-parts/mobile-nav.php is rendered by footer.php on every page, so
   these rules live here (site-wide) rather than in a page-scoped sheet — with
   them in newniguro.css the bar appeared unstyled everywhere else.

   The root keeps the generic `mobile-nav` class as well, which is what the
   chrome-less templates hide it with (index.php, /all, /maps, stories,
   surging, the SERP and the games shell): `body.home .mobile-nav {display:none
   !important}` beats the `display: flex` below. */
.nn-mobile-pill {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 20px clears the iOS home indicator; the pill floats above the page edge.
     The inline gutter matches .nn-wrap (12px on phones, 16px from 640px), the
     same edge the board's cards and header buttons sit on. */
  padding: 0 12px calc(20px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  /* Revealed on scroll — see the script in template-parts/mobile-nav.php: hidden
     at the top of a page, in from 400px down, away again at 300px on the way
     back. The transition is what makes it read as the bar sliding rather than
     blinking. */
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.nn-mobile-pill-hidden {
  transform: translateY(140%);
  opacity: 0;
}
/* The bar's own children opt back into pointer events, so the hidden state has
   to switch them off too or the invisible circle would still eat taps. */
.nn-mobile-pill-hidden,
.nn-mobile-pill-hidden .nn-mobile-pill-inner,
.nn-mobile-pill-hidden .nn-pill-create {
  pointer-events: none;
}
@media (min-width: 640px) {
  .nn-mobile-pill { padding-inline: 16px; }
}
/* Smallest phones: the four labels would otherwise overrun the bar. */
@media (max-width: 340px) {
  .nn-pill-item { padding: 6px 6px; font-size: 9.5px; }
  .nn-mobile-pill { gap: 8px; padding-inline: 10px; }
  .nn-pill-create { width: 44px; height: 44px; }
}
.nn-mobile-pill-inner {
  /* Fills the gutter rather than shrink-wrapping its labels, so the bar spans
     the page like every other card; the items then spread across it. */
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 28px;
  background: hsl(var(--card) / 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12), 0 0 0 1px hsl(var(--border) / .3);
  pointer-events: auto;
}
.nn-pill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* 12px, down from 14px: the bar spans the full gutter, so four items plus the
     create circle have to share ~278px on a 360px phone. 12 rather than 10 so the
     painted tint keeps a little strip of itself on either side of the label. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 12px;
  /* The active tint is this element's own background, so the radius lives here
     rather than on .active — one radius for the shape, whatever state it is in. */
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
/* The active state is the item's own background — so it covers the icon AND the
   label — with a modest 12px radius, i.e. a chip rather than a bubble. (It went
   circle → stadium → here; at 12px the corners are rounded but the shape still
   reads as a tab, and the tint has room to wrap the label instead of having to
   curve around it.) Set on .nn-pill-item above so every edge agrees. */
.nn-pill-item.active {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
/* Nothing else to style here now, but the wrapper stays: flex centring is what
   keeps the glyph on the item's axis, and it is the one element left that a
   future icon-only treatment could hang off (lucide replaces the inner <i> with
   an <svg>, so the placeholder itself is not a stable hook). */
.nn-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nn-pill-item:active { transform: scale(.95); }
/* The action circle: the compose `+` when signed in, the search icon a guest
   gets instead. Both are this one class, so they cannot drift apart.

   Day mode paints it with the theme's accent — hsl(--primary) with
   --primary-foreground on top, the same pair the theme's filled buttons use, so
   the white glyph is guaranteed to read on it.
   Night mode keeps the circle white and flips the glyph to the accent instead:
   a dark circle would vanish into the bar, and a green one would fight the
   tinted glass. White (--foreground in the dark palette) with a green glyph is
   what makes it pop there.

   The shadow is tinted to match in day mode — a black shadow under a green
   circle reads as dirt — and stays neutral in the dark, where it is doing the
   job of lifting a white disc off a dark bar. */
.nn-pill-create {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 16px hsl(var(--primary) / .35);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.dark .nn-pill-create {
  background: hsl(var(--foreground));
  color: hsl(var(--primary));
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.nn-pill-create:active { transform: scale(.92); }
/* The desktop bar replaces this nav at 1024px, where every template switches
   to the left rail. */
@media (min-width: 1024px) {
  .nn-mobile-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-mobile-pill { transition: none; }
}

/* ── Mobile search overlay ─────────────────────────────────────────────────
   Shared by both homes (index.php and the New Niguro board): homepage.js owns
   the behaviour and injects the content, this is only the shell. It lives here
   rather than in newniguro.css because index.php needs it too and custom.css
   is the sheet every template loads.

   Dark mode is keyed off `.dark` on ANY ancestor, not `body.dark`: the theme
   puts the class on <html> (see theme.js), so a `body.dark` selector would
   never match and the sheet would stay white in the dark theme. */
.nn-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  flex-direction: column;
  background: #fff;
}
.dark .nn-search-overlay { background: hsl(var(--background)); }
.nn-search-overlay .nn-search-bar {
  padding: 12px 16px 14px;
  border-bottom: 1px solid hsl(var(--border));
  background: #fff;
}
.dark .nn-search-overlay .nn-search-bar { background: hsl(var(--background)); }
/* Light accent tint, not a flat grey: the field is the one control here, so it
   reads as the theme's accent rather than as a bare input well. The taller pad
   and 52px min-height give the row a comfortable thumb target. */
.nn-search-overlay .nn-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 28px;
  background: hsl(var(--primary) / 0.07);
}
.dark .nn-search-overlay .nn-search-input-wrap { background: hsl(var(--primary) / 0.16); }
.nn-search-overlay .nn-search-input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 17px;
  font-weight: 400;
  color: hsl(var(--foreground));
  -webkit-appearance: none;
  appearance: none;
}
.nn-search-overlay .nn-search-input-wrap input::placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}
/* Safari draws its own clear/cancel affordances inside a search field. */
.nn-search-overlay .nn-search-input-wrap input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.nn-search-overlay .nn-search-input-wrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
}
.nn-search-overlay .nn-search-input-wrap button[type="submit"] { color: hsl(var(--primary)); }
/* The gutter lives on the scroller, not on each injected block: headings, rows
   and the footer strip then all start on the same 16px edge as the field above.
   homepage.js pads its rows px-4 and its headings px-1, which is why they never
   lined up before. */
.nn-search-overlay .nn-search-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px 32px;
}
/* The rows give their own horizontal padding back so their text sits flush with
   the section headings; vertical rhythm and the tap target are set here. */
.nn-search-overlay .nn-search-content .home-ac-item,
.nn-search-overlay .nn-search-content .suggest-row {
  gap: 14px;
  padding: 12px 0;
  border-radius: 12px;
  background: transparent;
}
.dark .nn-search-overlay .nn-search-content .suggest-row { background: transparent; }
/* The ✕ that removes a stored recent search. */
.nn-search-overlay .nn-search-content .home-ac-item button { flex: 0 0 auto; }
.nn-search-overlay .nn-search-content .home-ac-item span,
.nn-search-overlay .nn-search-content .suggest-row span {
  font-size: 15.5px;
  line-height: 1.35;
}
.nn-search-overlay .nn-search-content .home-ac-item svg,
.nn-search-overlay .nn-search-content .suggest-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* The auto-save / Delete all strip homepage.js appends under the recents. */
.nn-search-overlay .nn-search-content > div[class*="border-t"] {
  margin-top: 14px;
  padding: 14px 0 4px;
  font-size: 13px;
}
.nn-search-overlay .nn-search-content > div[class*="border-t"] button { font-size: 13px; }
/* Section headings ("Recent searches" / "Trending" / "Suggestions") */
.nn-search-overlay .nn-search-content > div[class*="uppercase"] {
  padding: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
@media (min-width: 768px) { .nn-search-overlay { display: none !important; } }

/* Section dividers - subtle Naver-style */
.section-divider {
  height: 1px;
  background-color: hsl(var(--border) / 0.5);
  margin: 1.25rem 0;
  border: none;
}

/* Sidebar nav link enhanced hover */
.sidebar-nav-link:hover {
  background-color: hsl(var(--sidebar-accent));
}
.sidebar-nav-link:hover i,
.sidebar-nav-link:hover span:not(.truncate) {
  color: hsl(var(--sidebar-accent-foreground));
}

/* Focus ring for interactive elements */
a:focus-visible,
button:focus-visible {
  outline: none;
  ring: 2px solid hsl(var(--ring));
  ring-offset: 2px;
}

/* Footer menu links */
#site-footer nav a {
  font-weight: 500;
}

/* Social icons in footer */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.3);
  transition: background-color 0.2s, color 0.2s;
}
.footer-social-link:hover {
  background-color: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}
.dark .footer-social-link:hover {
  color: hsl(var(--foreground));
}

/* Right sidebar widget headings */
.right-sidebar-widget h3 {
  font-size: 1rem; /* 16px */
}
.right-sidebar-widget {
  border-radius: 0.75rem;
}

/* Remove focus rings for staff input container */
#add_staff_container:focus,
#add_staff_container:focus-visible,
#add_staff_username:focus,
#add_staff_username:focus-visible,
#clear_selected_user:focus,
#clear_selected_user:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: hsl(var(--border)) !important;
}

/* NSFW blur container - reduce spread effect */
.nsfw-blur-container {
  /* Reduce the blur intensity slightly more at top/bottom */
  filter: blur(6px);
  border-radius: inherit;
}

.nsfw-blur-container.nsfw-unblurred {
  filter: none;
}

/* Make the overlay slightly more opaque to compensate */
.nsfw-overlay {
  background: hsl(var(--card) / 0.85) !important;
}

/* Mention pills */
#post-mentions-container,
#edit-mentions-container {
  min-height: 0;
}
#post-mentions-container:not(.hidden),
#edit-mentions-container:not(.hidden) {
  padding: 2px 0;
}

/* Preserve line breaks in post textareas */
#post-content,
#edit-post-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Single post content formatting */
.single-article-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.single-article-content > p:first-child {
  margin-top: 0;
}
.single-article-content > p:last-child {
  margin-bottom: 0;
}
.mention-dropdown {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}
 .mention-dropdown .mention-item:hover,
 .mention-dropdown .mention-item.bg-gray-100 {
   background: hsl(var(--accent));
 }

/* Comment mention composer: the input's own text is transparent; a mirror layer
   renders the same text with selected mentions tinted in brand color. */
.comment-mention-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.comment-mention-input {
  color: transparent !important;
  caret-color: hsl(var(--foreground));
}
.comment-mention-mirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  color: hsl(var(--foreground));
}
.comment-mention-mirror .mention-selected {
  color: hsl(var(--primary));
  font-weight: 600;
}

/* Homepage hero sizing — defined here (not purged Tailwind build) so it survives rebuilds */
.home-hero-logo { height: 52px; width: auto; max-width: 100%; }
@media (min-width: 768px) {
  .home-hero-logo { height: 80px; }
}
.home-hero-wrapper { transform: translateY(-55px); }

/* Tailwind .sr-only — add here since content-purge builds drop unused rules.
   Visually hides content (0 UI footprint) while keeping it crawlable/audible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hide native browser clear (x) on search inputs — we use a custom clear button */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
input[type="search"]::-ms-clear { display: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* Fractional gap/padding/margin utilities — Tailwind v3.4.x fails to generate these via safelist/content */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }
.p-1\.5 { padding: 0.375rem; }
.m-1\.5 { margin: 0.375rem; }

/* Search stats tabular numbers */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Wrapped card responsive */
@media (max-width: 560px) {
  #wrapped-card { width: 100% !important; height: auto !important; min-height: 580px; }
}

/* Mobile: bump small font sizes by ~2px for readability */
@media (max-width: 639px) {
  .text-xs { font-size: 14px; }
  .text-sm { font-size: 15px; }
}

/* ── Vote spark particles ─────────────────────────────── */
@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 30px), var(--dy, -40px)) scale(0); }
}
.vote-spark {
  position: absolute;
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--community-color, hsl(var(--primary)));
  z-index: 50;
  animation: spark-fly 0.6s ease-out forwards;
}

/* ── Follow button pulse ──────────────────────────────── */
@keyframes follow-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.follow-btn-pop {
  animation: follow-pop 0.35s ease-out;
}

/* Internal auto-link: keyword → page */
.niriv-auto-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  color: var(--primary, hsl(var(--primary)));
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.niriv-auto-link:hover {
  text-decoration-style: solid;
  color: hsl(var(--primary) / 0.8);
}

/* ── Site-wide content width: 1150px ─────────────────── */
.max-w-7xl { max-width: 1150px !important; }
.max-w-\[1160px\] { max-width: 1150px !important; }
.max-w-\[1050px\] { max-width: 1150px !important; }

/* ── Comment highlight on notification deep-link ─────── */
@keyframes comment-flash {
  0% { background-color: color-mix(in srgb, var(--community-color, hsl(var(--primary))) 45%, transparent); }
  100% { background-color: transparent; }
}
.comment-item.flash-highlight {
  animation: comment-flash 2.6s ease-out forwards;
  border-radius: 8px;
  scroll-margin-top: 20px;
}

/* ── Hero search form submit (index.php + the board): white magnifier ──────
   The button's circle carries the accent colour; the glyph inside it is always
   ink-white, so it reads the same whatever colour the reader picked for the
   field (the inline accent style sets the circle, this pins the ink). */
#main-search-form button[type="submit"],
#main-search-form button[type="submit"] i,
#main-search-form button[type="submit"] svg {
  color: #ffffff;
}

/* ── Header search: themed focus ring (day + dark) ────── */
.hb-search-shell:focus-within {
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.45), 0 3px 10px rgba(17, 24, 39, 0.04);
}
.hb-search-shell input {
  outline: none;
}
.hb-search-shell input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Motion — avatar dropdown & theme change
   --------------------------------------------------------------------------
   Both effects are pure transforms/opacity driven by a class the scripts
   toggle, so they stay on the compositor and there is no animation loop
   anywhere. Both stand down under prefers-reduced-motion (bottom of block).
   ========================================================================== */

/* ── Avatar dropdown: the soft roll ───────────────────────────────────────
   The panel unrolls from under the avatar — a short drop, a whisper of scale
   out of its own top-right corner, and a brief blur that the eye reads as soft
   paper rather than a box switching on.

   The panel is still hidden with Tailwind's `hidden`, and a display switch
   cannot be transitioned: `hidden` can therefore only be put back once the
   roll-away has finished. That sequencing lives in window.nirivDropdown
   (header.php), which every copy of this menu is wired through. */
#user-menu-dropdown,
#nfeed-user-menu-dropdown {
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  filter: blur(3px);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
    filter 180ms ease;
}
#user-menu-dropdown.is-open,
#nfeed-user-menu-dropdown.is-open {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Dismissal is quicker and skips the blur: at this size and speed the blur
   reads as a smear on the way out instead of as softness. */
#user-menu-dropdown.is-closing,
#nfeed-user-menu-dropdown.is-closing {
  /* Dropped from the transition list rather than retimed, so the blur is taken
     off outright: a 3px blur snapping in mid-fade reads as a glitch, while a
     sharp panel that simply drops away reads as the panel leaving. */
  filter: none;
  transition-property: opacity, transform;
  transition-duration: 140ms;
}

/* ── Theme change: the moon sweeps the page ───────────────────────────────
   A disc in the *incoming* theme's colour grows out of the control that was
   pressed until it covers the viewport, the palette switches underneath it,
   and the disc then dissolves — so the flip itself is never seen.

   What makes it read as a moon rather than a plain circle is the lit patch on
   the disc's surface: it is painted into the disc's own background, so it
   scales with the disc, sweeps in from the pressed control and travels off
   screen as the disc grows. Nothing is left behind at full coverage. */
#niriv-theme-cover {
  position: fixed;
  inset: 0;
  /* Above the header (50), the sheet (300), search dropdowns (9999) and the
     toasts (99999+); below the lightbox (999999), which must never be dimmed
     by a theme switch. */
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}
#niriv-theme-cover[hidden] { display: none; }
#niriv-theme-cover.is-out { opacity: 0; }

/* These mirror --background and --primary in the :root / .dark blocks at the
   top of this file. Plain values rather than var() lookups on purpose: the
   whole point is to paint the NEXT theme while the current one is still on the
   documentElement. */
#niriv-theme-cover[data-dir="dark"] {
  --tc-fill: hsl(135 45% 6%);
  --tc-glow: 135 96% 42%;
}
#niriv-theme-cover[data-dir="light"] {
  --tc-fill: hsl(214 24% 94.3%);
  --tc-glow: 135 96% 36%;
}

/* 200vmax wide, i.e. a 100vmax radius: always larger than half the viewport
   diagonal, so at scale(1) the disc covers every corner at any aspect ratio.
   Deliberately no `will-change` — the disc is a flat fill, and promoting a
   layer this large up front would cost far more memory than it saves. */
#niriv-theme-cover .niriv-tc-disc {
  position: absolute;
  left: var(--tc-x, 100%);
  top: var(--tc-y, 0px);
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  border-radius: 50%;
  background:
    /* the moon's lit side */
    radial-gradient(closest-side circle at 78% 20%,
      hsl(var(--tc-glow) / 0.26) 0%,
      hsl(var(--tc-glow) / 0.06) 46%,
      transparent 74%),
    /* its terminator */
    radial-gradient(closest-side circle at 20% 80%,
      hsl(0 0% 0% / 0.28) 0%,
      transparent 62%),
    var(--tc-fill);
  transform: scale(0);
  transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
#niriv-theme-cover.is-in .niriv-tc-disc { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  #user-menu-dropdown,
  #nfeed-user-menu-dropdown,
  #niriv-theme-cover,
  #niriv-theme-cover .niriv-tc-disc { transition: none; }
}

/* Comment edit mention highlight preview */
.comment-edit-preview {
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-edit-preview .mention-link {
  color: hsl(var(--primary));
  text-decoration: none;
}