/* ==== 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', FiraGO, 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: hsl(var(--foreground));
  --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 ==== */
/* Fira Sans for Latin, FiraGO for Devanagari — one superfamily, two faces.

   FiraGO is a fork of Fira Sans by the same designers (see the OFL in
   assets/fonts/firago/): it keeps Fira Sans 4.3's Latin, Cyrillic and Greek
   coverage and adds Devanagari, Arabic, Hebrew, Georgian and Thai. Both faces
   are self-hosted -- no request to Google or to anyone else -- and both are
   named in the theme's font stack below, Fira Sans first. Latin text is drawn
   in Fira Sans, the design this site's type was set in and the one with the
   better Latin proportions; every Devanagari glyph falls through to FiraGO,
   which Fira Sans does not cover at all. Per-character fallback does that on
   its own, so the two families are never blended inside a single word.

   Why Latin is not simply FiraGO: FiraGO's Latin is a reworking of Fira Sans
   rather than a copy, so on Latin-only pages -- which is most of them -- every
   heading and paragraph subtly changed shape. Fira Sans stays primary; FiraGO's
   job here is Devanagari.

   This replaces the old pairing of Fira Sans + Mukta. Mukta came from
   fonts.gstatic.com, so every Devanagari glyph on the site was a third-party
   request on the critical path, and Mukta is narrower and lighter than Fira at
   the same nominal weight -- font-weight 600 read as confident in a Latin
   headline and thin in a Nepali one. FiraGO ends both problems.

   Weights: 300 for large display ledes, 400 for body, 500 for medium labels,
   600 for headings and UI, 700 for bold, 800 for the heaviest display type.
   Italic is not declared: nothing in the theme sets it on a themed stack, and
   the browser's synthesised slant is what these pages got before. (Both
   families ship real italics if that changes.)

   NOTE ON FILE SIZE: Fira Sans is declared from upstream's Latin-only web
   subsets (~24KB each). FiraGO publishes no per-script subsets, so its faces
   are the full multi-script builds (~250KB each). Only the weights a page
   actually renders are fetched, with two exceptions: 400 and 600 are preloaded
   from head.php so a Nepali page never swaps its Devanagari in a round-trip
   late. Weights outside that pair (300, 500, 700, 800) load on demand. */

@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/FiraSans-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/FiraSans-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/FiraSans-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/FiraSans-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/FiraSans-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/FiraSans-800.woff2') format('woff2');
}

@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-300.woff2') format('woff2');
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-400.woff2') format('woff2');
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-500.woff2') format('woff2');
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-600.woff2') format('woff2');
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-700.woff2') format('woff2');
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://www.niguro.com/wp-content/themes/niguro/assets/fonts/firago/FiraGO-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%;
  /* Match search-result title ink across the site: soft charcoal instead of
     near-black for headings and other primary text on light surfaces. */
  --foreground: 220 10% 30%;
  --card: 0 0% 100%;
  --card-foreground: 220 10% 30%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 10% 30%;
  --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: 220 10% 30%;
  --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)); }

/* The theme's stack, in two tiers. Fira Sans renders Latin; FiraGO picks up
   Devanagari (and the other scripts Fira Sans lacks) through ordinary
   per-character fallback, because a browser takes each glyph from the first
   family in the list that has it. The generic families after both are only for
   glyphs neither covers, and the emoji faces last so a colour emoji is never
   drawn in Fira's monochrome fallback. */
html, body, * { 
  font-family: 'Fira Sans', 'FiraGO', 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: 850px;
  margin-left: auto;
  margin-right: auto;
}
#main-content > .story-writing-prompt > .story-writing-prompt-card {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: none;
}

/* 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;
  }
  body.single-post:not(.single-niriv_story) main#main-content > .story-writing-prompt {
    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;
  }
  body.single-post:not(.single-niriv_story) main#main-content > .story-writing-prompt {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  main#main-content > .cr-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Keep every single cricket match view in a readable, centered desktop column. */
@media (min-width: 768px) {
  main#main-content > .cr-page.cr-match-page {
    width: 100% !important;
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !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: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !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: none !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):not(.story-writing-prompt) {
    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;
  }

  /* Earthquake monitoring uses one centered card column for its hero and
     data sections. The generic nested-section rule above makes sections full
     bleed while leaving the hero in the column; keep them aligned together. */
  body.sidebar-collapsed #main-content.eq-page-wrap > .eq-page > section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body.sidebar-collapsed #main-content.eq-page-wrap > .eq-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; }
}

/* Every modal in the theme (.new-post-overlay, .edit-post-overlay, the follow
   sheet) uses this box. The z-index was 50 — the same value as the floating
   corner controls `#goto-top` and `.niriv-home-switch`, which footer.php prints
   AFTER the modal, so on equal z-index the go-to-top button painted on top of
   the Create Post sheet and sat on its close button. 9999 is the number this
   theme's other overlays use (see .nepse-modal-overlay): above the site chrome
   (header 1000, menus 1100/1300) and above the corner buttons, and still below
   the popovers that legitimately open over a sheet, which belong to the modal
   anyway because they are inside its content. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background-color: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

/* Belt and braces for the two controls that live in the same corner as the
   modal's close button: while a sheet is open they are page chrome, not actions,
   so they step aside instead of showing through the scrim as a dimmed ghost. */
body:has(.modal-overlay.active) #goto-top,
body:has(.modal-overlay.active) .niriv-home-switch {
  display: none;
}
.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;
}

/* Every single-post card (news, posts, updates, stories, bloom, women's) ends
   with the same share row: a full-width translucent `bg-muted/30` band with
   square corners, and it painted straight past the card's own rounded bottom
   corners -- leaving a lighter square tip in each one, most visible in the
   dark where the band is a green over a near-black page.

   Rounding the row is the fix rather than clipping the card, because the card
   is `overflow: visible` on purpose: the trend flame sits at `-top-2` so it
   deliberately hangs outside the card, and the share menu in this row is an
   absolutely-positioned dropdown that has to escape when it opens -- a clip
   would hide both. `inherit` rather than a repeated number, so each card keeps
   its own radius, and it degrades to nothing on an unrounded card. */
article > .border-t.bg-muted\/30:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.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)); }
/* 12px on phones, 16px from 640px: the same gutter .nn-wrap gives the board's
   cards and its header buttons. The overlay opens from the field you just
   tapped, so its own edges have to land where the page's do -- at a flat 16px
   the field sat 4px further in than every card behind it. */
.nn-search-overlay .nn-search-bar {
  padding: 12px 12px 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.

   48px tall, down from 56px. The vertical padding is deliberately small (8px)
   rather than trimmed to taste: the tallest thing in the row is a 20px icon in a
   4px-padded button, so the content box lands at 32px and the 48px min-height is
   what actually decides the height. That makes the field 48px whatever the
   browser does with the input's own intrinsic height, instead of landing on 50px
   on one device and 48px on another. The 28px radius still exceeds half the
   height and is clamped to a stadium, so the shape is unchanged. */
.nn-search-overlay .nn-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 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)); }
.nn-search-overlay .nn-search-input-wrap button.nn-search-clear[hidden] { display: none; }
.nn-search-overlay .nn-search-input-wrap button.nn-search-clear { color: hsl(var(--muted-foreground)); }
.nn-search-overlay .nn-search-input-wrap button.nn-search-clear:hover { color: hsl(var(--foreground)); }
.nn-home-search-clear[hidden] { display: none !important; }
/* 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;
  /* Same edge as the field above it -- see .nn-search-bar. */
  padding: 6px 12px 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: 16px;
  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: 16px;
}
.nn-search-overlay .nn-search-content > div[class*="border-t"] button { font-size: 16px; }
/* Section headings ("Recent searches" / "Trending" / "Suggestions"), at the
   same 16px as the keywords they introduce.

   The rows are rendered with Tailwind's `uppercase tracking-wider`, so a heading
   read "RECENT SEARCHES" in 12.5px caps over 16px sentence-case keywords --
   two type styles for one list, and the smaller of the two was the one doing the
   labelling. `text-transform: none` puts it back in sentence case as asked, and
   the tracking goes with it: wide letter-spacing exists to give all-caps air,
   and at 16px in normal case it just reads as loose. The weight stays bold.

   Both overrides land without `!important` because this selector is three
   classes deep against the utilities' one. */
.nn-search-overlay .nn-search-content > div[class*="uppercase"] {
  padding: 18px 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}
/* 640px onwards the board widens its gutter to 16px, so the overlay follows.
   The overlay itself is gone from 768px (md:hidden plus the rule below), so this
   only ever applies to the 640-767px band. */
@media (min-width: 640px) {
  .nn-search-overlay .nn-search-bar { padding-inline: 16px; }
  .nn-search-overlay .nn-search-content { padding-inline: 16px; }
}
@media (min-width: 768px) { .nn-search-overlay { display: none !important; } }

/* ---- The bar's phone wordmark sits in the middle of the SCREEN -----------

   The bar is a flex row: hamburger, wordmark slot, account cluster. The slot is
   `flex: 1` between the two, so it is centred on the space LEFT OVER, not on the
   screen -- and the leftover space is asymmetric, because the cluster on the
   right is an avatar (44px) plus a theme button (44px) plus gaps while the left
   side is one 44px hamburger. At 390px that put the wordmark's centre 24px left
   of the screen's (171 against 195), which is the difference between "centred"
   and "nudged", and it is the same 24px on every page, not just this one.

   So on a phone the slot leaves the flow and centres itself on the viewport.
   Vertically it is unchanged: the bar is `items-center`, and an absolutely
   positioned child still resolves `top` against the bar's own box.

   The ceiling is what keeps it off the two clusters: 100px of clearance each
   side, so the widest wordmark on a 360px phone still stops short of the
   avatar. `pointer-events: none` on the slot and `auto` on the logo inside it
   means a tap that lands on the slot's empty half -- the pixels between the
   wordmark and the avatar -- reaches whatever is underneath instead of being
   swallowed by a wrapper that is only there to hold a picture.

   Phones only. From 1024px the bar's own wordmark is the left cluster and the
   row is a normal flex; from 1380px the SERP header prints its logo in the page
   margin instead. */
@media (max-width: 1023px) {
  #bar-logo-slot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 200px);
    pointer-events: none;
  }
  #bar-logo-slot > * {
    max-width: 100% !important;
    pointer-events: auto;
  }
}

/* ---- Dropdown keywords, every dropdown ----------------------------------

   The keyword text in an autocomplete row was 14px on the two desktop
   dropdowns (the Tailwind `text-sm` the rows are rendered with) and 15.5px in
   the mobile overlay, so one word changed size depending on which surface you
   were searching from. All four dropdowns now read at 16px: the homepage's
   `#autocomplete-results` (index.php and the newniguro board, which share the
   markup), the results page's `#search-autocomplete`, and the overlay above.

   `#autocomplete-results` and `#search-autocomplete` are element ids, so these
   two rules outrank the utility class on the span without needing `!important`
   -- which matters here because `text-sm` is on the span itself and every row is
   rebuilt from JS on each keystroke. */
#autocomplete-results .home-ac-item > span,
#autocomplete-results .suggest-row > span,
#search-autocomplete .home-ac-item > span,
#search-autocomplete .suggest-row > span {
  font-size: 16px;
}

/* ---- No outline on any of the site's dropdowns ---------------------------

   Every autocomplete panel in the theme is a `--card` surface with `shadow-lg`,
   and the markup also carries Tailwind's `border` -- which this theme resolves
   to `1px solid hsl(var(--border))`, a green-tinted hairline (the day token is
   roughly rgb(224, 235, 228)). Drawn around a panel that already has a shadow,
   it is a second, weaker edge, and while the panel is attached under its field
   it is a line ACROSS the middle of one control: the field's bottom edge and the
   panel's top edge are the same edge, and the hairline was sitting on it.

   So no dropdown in the theme draws one, in either palette and at any width --
   the shadow is what lifts the panel off the page. The field it hangs from is
   borderless for the same reason (see .search-bar-container in serp-clean.css
   and the hero pills, whose border comes from the theme's own search-form
   border setting); with both sides bare the joined pair is one surface by
   construction, so the attached state has no seam to clear.

   Ids, so these outrank the single `border` utility class on the element
   itself, and the panels are never restyled by a `border-*` utility that would
   need overriding. */
#autocomplete-results,
#search-dropdown,
#search-autocomplete {
  border: 0 !important;
}

/* ---- The attached dropdown, on both homes --------------------------------

   index.php and the New Niguro board print the same field -- a 58px pill,
   30px radius, `--card` fill -- with `#autocomplete-results` anchored at
   `top: 100%` and 12px of gap above it. That gap plus two separate radii is what
   made the panel read as a second box hanging under the field rather than as the
   field opened, which is what the reference is: ONE shape, rounded at the top of
   the field and at the bottom of the list, with a straight middle and no seam.

   So while the panel is on screen -- homepage.js puts `niriv-ac-attached` on
   <body> as it renders one, and takes it off again in hideAutocomplete() -- the
   gap goes, the field's bottom corners square off and the panel's top corners
   square off. The fill needs no rule at all: the field is inline-styled to
   `hsl(var(--card))` and the panel is `bg-card`, so they are the same surface in
   both palettes already -- and neither side draws a border, so there is no line
   for this state to clear down the middle of the join either (see the note
   above). The field's own bottom-edge rule below stays as belt and braces: a
   reader can set a search-form border in the theme settings, and if a coloured
   one is ever set the field's bottom edge has to stop drawing on the join,
   which is what the `border-bottom-color` line does.

   The radii are `!important` because the field's geometry lives in its own
   style attribute (height, padding, radius and border all come from inline
   declarations, some of them from the reader's theme settings), and an author
   `!important` is the one thing that outranks an inline declaration.

   768px up. A phone hands the tap off to the full-screen overlay in
   homepage.js and never sees this panel at all. */
@media (min-width: 768px) {
  body.niriv-ac-attached #main-search-form > .relative {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }
  body.niriv-ac-attached #autocomplete-results {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    /* The 12px of air the panel is anchored with (`margin-top: 12px` in
       index.php and page-newniguro.php) is what made the panel read as a second
       box hanging under the field. It goes while attached; the corners above
       square off to match, and the panel has no border to clear (see the note
       above -- no dropdown draws one), so the join is one shape with nothing
       across it. */
    margin-top: 0 !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,
.js-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,
.js-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,
.js-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,
  .js-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;
}

/* ===========================================================================
   THE PHONE RAIL — the "Mobile Scroll" menu (Appearance → Menus)
   ===========================================================================

   template-parts/header-bar.php prints a second row inside the site bar when a
   menu is assigned to that location. The row above is the bar as it always was —
   hamburger, wordmark, account — and under it is a strip of the site's own pages
   that swipes sideways, with a rule under the one you are reading. From 1024px
   up the row above is the whole bar again and this is hidden: a monitor has the
   sidebar for the same job.

   Everything here reads two numbers, and `--nn-rail-band` is both of them
   together: the strip's own height and the space between it and the row above,
   which is what the page has to clear for a bar that is a row taller than its
   56px — main's padding-top, which header.php sets inline (hence the !important
   below), and the search results header's own top margin over in serp-clean.css.
   header.php adds `.has-mobile-rail` to the page wrapper only when the row is
   really printed, so a site with nothing assigned to the location keeps the plain
   56px bar and none of this applies.
   --------------------------------------------------------------------------- */

:root {
  --nn-rail-h: 48px;     /* the app-style strip itself */
  --nn-rail-gap: 5px;    /* between the bar's row and the strip */
  --nn-rail-band: calc(var(--nn-rail-h) + var(--nn-rail-gap));
}

/* One row again from 1024px up. The row wrapper that holds the bar's buttons on
   a phone dissolves here, so the bar itself is the flex row it has always been
   and keeps the alignment the wrapper was giving it. In plain CSS because
   `lg:h-14`, `lg:items-center`, `lg:flex-row` and `lg:contents` are not in this
   theme's compiled utility set -- only the utilities the templates already used
   are, and these are new. */
@media (min-width: 1024px) {
  #site-header {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;   /* lg:gap-3 */
    height: 56px; /* lg:h-14 */
  }
  /* The id is load-bearing. `display: contents` here has to outrank the row's
     own `flex` class, and the theme prints a small critical block of utility
     classes (`.hidden`, `.flex`, `.grid`, ...) AFTER the merged style sheet, so
     at equal specificity the last one in the document wins: a bare
     `.nn-bar-row` selector left the row as `display: flex`, sized to its content,
     which packed the whole bar -- wordmark, search, avatar, theme button -- into
     a 282px box against the left edge of a 1280px screen. An id is what outranks
     a utility class here, whatever order the sheets land in. */
  #site-header > .nn-bar-row { display: contents; }
}

@media (max-width: 1023px) {
  /* On phones the global header belongs to normal document flow and scrolls
     away with the page. Its old fixed positioning was only needed while main
     carried the matching 56px offset. Page-specific absolute headers (such as
     the search landing header) keep their own more-specific positioning. */
  body:not(.newniguro-template) #site-header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }
  body:not(.newniguro-template) #main-content {
    padding-top: 0 !important;
  }

  /* The page clears the whole bar, not just the row above it. */
  body:not(.newniguro-template).has-mobile-rail #main-content {
    padding-top: 0 !important;
  }

  /* Toasts hang off the top-right corner; that corner is lower now. */
  .has-mobile-rail .toast-container.top-right {
    top: calc(64px + var(--nn-rail-band));
  }
}

/* The rail itself, below 1024px only -- the markup also hides it from 1024px up
   (`lg:hidden`), so this is the second half of the same statement rather than the
   only thing keeping it off a monitor. */
@media (max-width: 1023px) {
.nn-mrail {
  /* Edge to edge: the bar's own gutter comes off here and goes on the list, so
     the first and last labels sit on the same gutter as the buttons above them
     while the ones between scroll under the screen edge. The top margin is the
     breathing room between the bar's row and this strip -- it is part of
     `--nn-rail-band`, so the page still clears the whole bar. */
  margin: var(--nn-rail-gap) 4px 0;
  height: var(--nn-rail-h);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* A sideways flick that runs out of rail must not turn into a back gesture. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.nn-mrail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: 0.5px;
  background: hsl(var(--border) / 0.24);
  pointer-events: none;
}
.nn-mrail::-webkit-scrollbar { display: none; }

.nn-mrail ul {
  display: flex;
  align-items: stretch;
  /* Fill the rail so short menus spread across it; longer menus keep their
     natural scroll width. Five equal slots make the first screen stop after
     five destinations instead of showing part of a sixth. */
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  --nn-mrail-item-gap: clamp(22px, 6vw, 30px);
  gap: var(--nn-mrail-item-gap);
  /* Without this the list is only as wide as the scroller and the last items
     cannot be reached, and its own right padding is never shown. */
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nn-mrail li {
  flex: 0 0 calc((100vw - 24px - (4 * var(--nn-mrail-item-gap))) / 5);
  min-width: 0;
}

.nn-mrail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nn-mrail-icon { display: inline-flex; align-items: center; justify-content: center; }
.nn-mrail-icon i,
.nn-mrail-icon svg { display: block; width: 24px; height: 24px; stroke-width: 1.7; }
.nn-mrail-label-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nn-mrail a:hover,
.nn-mrail a:focus-visible { color: hsl(var(--foreground)); }

/* Where you are: the label brighter, and the rule under it. wp_nav_menu marks
   the item, its section and its parent, so a page inside a section keeps the
   rule on the section's own label. */
.nn-mrail .current-menu-item > a,
.nn-mrail .current-menu-ancestor > a,
.nn-mrail .current-menu-parent > a { color: hsl(var(--foreground)); }
.nn-mrail a .nn-mrail-icon { color: hsl(var(--muted-foreground)); }
.nn-mrail .current-menu-item > a .nn-mrail-icon,
.nn-mrail .current-menu-ancestor > a .nn-mrail-icon,
.nn-mrail .current-menu-parent > a .nn-mrail-icon { color: hsl(var(--primary)); }

.nn-mrail .current-menu-item > a::after,
.nn-mrail .current-menu-ancestor > a::after,
.nn-mrail .current-menu-parent > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: hsl(var(--primary));
}
}

/* Keep profile actions under the cover control and at the right on narrow phones. */
@media (max-width: 639px) {
  body.author .profile-header-info { position: relative; }
  body.author .profile-header-actions {
    position: absolute;
    top: 8px;
    right: 24px;
    margin: 0;
    padding: 0;
    z-index: 2;
  }
}