*, ::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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 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;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  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;
}

.btn:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.timeline-card {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.95);
  --tw-shadow: 0 10px 25px -5px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 10px 25px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --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);
}

.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;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

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

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

.bottom-4 {
  bottom: 1rem;
}

.bottom-5 {
  bottom: 1.25rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-\[14\%\] {
  bottom: 14%;
}

.bottom-\[18\%\] {
  bottom: 18%;
}

.bottom-\[24\%\] {
  bottom: 24%;
}

.bottom-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\)\)\] {
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.left-0 {
  left: 0px;
}

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

.left-\[24\%\] {
  left: 24%;
}

.left-\[4\%\] {
  left: 4%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-4 {
  right: 1rem;
}

.right-\[5\%\] {
  right: 5%;
}

.right-full {
  right: 100%;
}

.top-0 {
  top: 0px;
}

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

.top-16 {
  top: 4rem;
}

.top-20 {
  top: 5rem;
}

.top-\[20\%\] {
  top: 20%;
}

.top-\[22\%\] {
  top: 22%;
}

.top-\[calc\(1rem\+env\(safe-area-inset-top\)\)\] {
  top: calc(1rem + env(safe-area-inset-top));
}

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

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

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

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

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

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

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

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

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

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

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

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

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

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

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

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

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

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

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

.mr-2\.5 {
  margin-right: 0.625rem;
}

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

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

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

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

.block {
  display: block;
}

.flex {
  display: flex;
}

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

.hidden {
  display: none;
}

.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-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

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

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-\[calc\(100dvh-9rem\)\] {
  min-height: calc(100dvh - 9rem);
}

.min-h-dvh {
  min-height: 100dvh;
}

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

.w-0 {
  width: 0px;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

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

.w-3\/5 {
  width: 60%;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.origin-bottom-left {
  transform-origin: bottom left;
}

.origin-top-left {
  transform-origin: top left;
}

.-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-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-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));
}

.-translate-y-6 {
  --tw-translate-y: -1.5rem;
  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));
}

.-rotate-45 {
  --tw-rotate: -45deg;
  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-45 {
  --tw-rotate: 45deg;
  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-\[-12deg\] {
  --tw-rotate: -12deg;
  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-\[-18deg\] {
  --tw-rotate: -18deg;
  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-\[-6deg\] {
  --tw-rotate: -6deg;
  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-\[-8deg\] {
  --tw-rotate: -8deg;
  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-\[16deg\] {
  --tw-rotate: 16deg;
  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-\[22deg\] {
  --tw-rotate: 22deg;
  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-\[24deg\] {
  --tw-rotate: 24deg;
  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));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 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));
}

.scale-\[0\.98\] {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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 pulse {
  50% {
    opacity: .5;
  }
}

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

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

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

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

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

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

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

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

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

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

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

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[5px\] {
  gap: 5px;
}

.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-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-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-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-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-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));
}

.overflow-hidden {
  overflow: hidden;
}

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

.scroll-smooth {
  scroll-behavior: smooth;
}

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

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

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

.rounded-2xl {
  border-radius: 1rem;
}

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

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

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

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

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

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

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

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

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

.border-amber-200\/50 {
  border-color: rgb(253 230 138 / 0.5);
}

.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}

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

.border-katakidz-nuit\/10 {
  border-color: rgb(58 66 80 / 0.1);
}

.border-katakidz-nuit\/5 {
  border-color: rgb(58 66 80 / 0.05);
}

.border-katakidz-sauge {
  --tw-border-opacity: 1;
  border-color: rgb(138 187 157 / var(--tw-border-opacity, 1));
}

.border-katakidz-sauge\/0 {
  border-color: rgb(138 187 157 / 0);
}

.border-katakidz-sauge\/15 {
  border-color: rgb(138 187 157 / 0.15);
}

.border-katakidz-sauge\/40 {
  border-color: rgb(138 187 157 / 0.4);
}

.border-katakidz-sauge\/50 {
  border-color: rgb(138 187 157 / 0.5);
}

.border-katakidz-sauge\/60 {
  border-color: rgb(138 187 157 / 0.6);
}

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

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.bg-\[\#FFF9C4\]\/80 {
  background-color: rgb(255 249 196 / 0.8);
}

.bg-katakidz-creme {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 245 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-creme\/50 {
  background-color: rgb(250 248 245 / 0.5);
}

.bg-katakidz-creme\/60 {
  background-color: rgb(250 248 245 / 0.6);
}

.bg-katakidz-menthe {
  --tw-bg-opacity: 1;
  background-color: rgb(139 210 195 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-nuit {
  --tw-bg-opacity: 1;
  background-color: rgb(58 66 80 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-nuit\/15 {
  background-color: rgb(58 66 80 / 0.15);
}

.bg-katakidz-nuit\/5 {
  background-color: rgb(58 66 80 / 0.05);
}

.bg-katakidz-nuit\/85 {
  background-color: rgb(58 66 80 / 0.85);
}

.bg-katakidz-peche {
  --tw-bg-opacity: 1;
  background-color: rgb(240 155 154 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-peche\/10 {
  background-color: rgb(240 155 154 / 0.1);
}

.bg-katakidz-peche\/15 {
  background-color: rgb(240 155 154 / 0.15);
}

.bg-katakidz-sable {
  --tw-bg-opacity: 1;
  background-color: rgb(242 201 160 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-sauge {
  --tw-bg-opacity: 1;
  background-color: rgb(138 187 157 / var(--tw-bg-opacity, 1));
}

.bg-katakidz-sauge\/10 {
  background-color: rgb(138 187 157 / 0.1);
}

.bg-katakidz-sauge\/80 {
  background-color: rgb(138 187 157 / 0.8);
}

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

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

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

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

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

.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));
}

.from-katakidz-creme {
  --tw-gradient-from: #FAF8F5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 248 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-katakidz-peche\/20 {
  --tw-gradient-from: rgb(240 155 154 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 155 154 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-katakidz-sauge\/20 {
  --tw-gradient-from: rgb(138 187 157 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(138 187 157 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-katakidz-creme\/90 {
  --tw-gradient-to: rgb(250 248 245 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(250 248 245 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-katakidz-peche\/10 {
  --tw-gradient-to: rgb(240 155 154 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(240 155 154 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-katakidz-sauge\/10 {
  --tw-gradient-to: rgb(138 187 157 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(138 187 157 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

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

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

.p-0 {
  padding: 0px;
}

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

.p-2 {
  padding: 0.5rem;
}

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

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.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-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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pt-\[calc\(1\.5rem\+env\(safe-area-inset-top\)\)\] {
  padding-top: calc(1.5rem + env(safe-area-inset-top));
}

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

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

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

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.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-\[10px\] {
  font-size: 10px;
}

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

.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-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

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

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

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

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

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-katakidz-nuit {
  --tw-text-opacity: 1;
  color: rgb(58 66 80 / var(--tw-text-opacity, 1));
}

.text-katakidz-nuit\/40 {
  color: rgb(58 66 80 / 0.4);
}

.text-katakidz-nuit\/60 {
  color: rgb(58 66 80 / 0.6);
}

.text-katakidz-nuit\/70 {
  color: rgb(58 66 80 / 0.7);
}

.text-katakidz-nuit\/80 {
  color: rgb(58 66 80 / 0.8);
}

.text-katakidz-nuit\/85 {
  color: rgb(58 66 80 / 0.85);
}

.text-katakidz-nuit\/90 {
  color: rgb(58 66 80 / 0.9);
}

.text-katakidz-peche {
  --tw-text-opacity: 1;
  color: rgb(240 155 154 / var(--tw-text-opacity, 1));
}

.text-katakidz-pecheText {
  --tw-text-opacity: 1;
  color: rgb(200 83 82 / var(--tw-text-opacity, 1));
}

.text-katakidz-sauge {
  --tw-text-opacity: 1;
  color: rgb(138 187 157 / var(--tw-text-opacity, 1));
}

.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);
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accent-katakidz-sauge {
  accent-color: #8ABB9D;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow-\[0_1px_2px_0_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0 1px 2px 0 rgba(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);
}

.shadow-\[0_4px_16px_rgba\(58\2c 66\2c 80\2c 0\.12\)\] {
  --tw-shadow: 0 4px 16px rgba(58,66,80,0.12);
  --tw-shadow-colored: 0 4px 16px 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);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-katakidz-peche\/20 {
  --tw-shadow-color: rgb(240 155 154 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-katakidz-sauge\/20 {
  --tw-shadow-color: rgb(138 187 157 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.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-\[0\.6px\] {
  --tw-blur: blur(0.6px);
  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-\[1px\] {
  --tw-blur: blur(1px);
  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-\[80px\] {
  --tw-blur: blur(80px);
  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-\[4px\] {
  --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-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);
}

.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-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;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[-webkit-mask-image\:linear-gradient\(to_bottom\2c black_0\%\2c transparent_100\%\)\] {
  -webkit-mask-image: linear-gradient(to bottom,black 0%,transparent 100%);
}

.\[-webkit-mask-image\:linear-gradient\(to_bottom\2c transparent_0\%\2c black_100\%\)\] {
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,black 100%);
}

.\[mask-image\:linear-gradient\(to_bottom\2c black_0\%\2c transparent_100\%\)\] {
  -webkit-mask-image: linear-gradient(to bottom,black 0%,transparent 100%);
          mask-image: linear-gradient(to bottom,black 0%,transparent 100%);
}

.\[mask-image\:linear-gradient\(to_bottom\2c transparent_0\%\2c black_100\%\)\] {
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,black 100%);
          mask-image: linear-gradient(to bottom,transparent 0%,black 100%);
}

/* ==========================================
   POLICES (AUTO-HÉBERGÉES)
   ========================================== */

/* Fichiers dans assets/fonts/ (plus de dépendance à Google Fonts) */

@font-face {
  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 300;

  font-display: swap;

  src: url('../assets/fonts/quicksand-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../assets/fonts/quicksand-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../assets/fonts/quicksand-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('../assets/fonts/quicksand-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../assets/fonts/quicksand-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';

  font-style: normal;

  font-weight: 300;

  font-display: swap;

  src: url('../assets/fonts/fredoka-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../assets/fonts/fredoka-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../assets/fonts/fredoka-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('../assets/fonts/fredoka-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../assets/fonts/fredoka-700.woff2') format('woff2');
}

/* ==========================================
   0. MOTEUR DE VARIABLES RESPONSIVE (:ROOT)
   ========================================== */

/* Valeurs responsive centralisées ici plutôt que dans le HTML */

/* .mobile-section/title/text/timeline/fragments = index.html uniquement ; .mobile-cta = les deux pages */

:root {
  /* Typo fluide : grandit avec l'écran, entre un min et un max (clamp) */
  --font-title-mobile: clamp(1.85rem, 7vw, 2.5rem);
  --font-text-mobile: clamp(0.9rem, 3.8vw, 1.05rem);
  --line-height-title: 1.12;
  --line-height-text: 1.45;
  /* --- BOUTONS / CTA --- */
  --btn-padding-y: 0.875rem;
  --btn-padding-x: 1.25rem;
  --btn-font-size: 0.95rem;
  /* --- COMPOSANTS (HEADER & LOGO) --- */
  /* Réduit encore un peu (1.75rem max) pour un logo plus discret sur desktop standard */
  --header-logo-height: clamp(1.5rem, 2vw, 1.75rem);
  --header-logo-height-sm: 1.9rem;
  --header-logo-height-xl: 2.75rem;
  --header-logo-height-2xl: 3.25rem;
  /* Marges de sécurité : encoche en haut, "home indicator" en bas (valeurs différentes) */
  --mobile-padding-top: max(env(safe-area-inset-top), 1rem);
  --mobile-padding-bottom: max(env(safe-area-inset-bottom), 1rem);
  --mobile-padding-x: 1.25rem;
  --mobile-gap: 0.85rem;
  /* Position basse partagée par TOUTES les timelines du site (section 1, section 3 d'index.html,
       et contact.html) : une seule valeur à changer ici plutôt que de répéter "bottom-12 sm:bottom-10"
       un peu partout dans le HTML. Voir la classe ".timeline-bottom" plus bas.
       --timeline-bottom-desktop n'est plus utilisée directement (".timeline-bottom" a désormais une
       valeur desktop propre, 3.5rem, testée pour ne pas chevaucher le bouton) : gardée en référence. */
  --timeline-bottom-mobile: 3.5rem;
  --timeline-bottom-desktop: 2.5rem;
  /* Échelles des mini-cartes décoratives selon la taille d'écran */
  --scale-timeline-mobile: 0.92;
  --scale-fragments-mobile: 0.48;
  --scale-fragments-tablet: 0.86;
  --scale-fragments-xl: 1.12;
  --scale-fragments-2xl: 1.20;
  /* Amplitude du flottement des fragments (section 3, @keyframes plus bas) */
  --float-translate-y: 6px;
  --float-rotate: 2deg;
}

/* ==========================================
   1. BASE
   ========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  /* Désactive le rebond/pull-to-refresh mobile (casserait l'effet "écrans verrouillés" d'index.html) */
  overscroll-behavior-y: none;
}

/* scroll-snap-type n'est PAS mis ici globalement : posé uniquement sur index.html (classes Tailwind
   snap-y/snap-proximity sur <html>), car il n'a de sens que là où existent des sections .mobile-section
   à accrocher. Réglage retiré du global suite à un bug de scroll bloqué sur Chrome Android — le snap
   actif sans point d'ancrage valide (formulaire.html/contact.html) semble en cause. */

/* "overflow-x: hidden" ne doit être posé QUE sur <html>, pas aussi sur <body> : avoir "overflow-x"
   non-visible sur les deux force chacun à calculer son "overflow-y" en "auto" (règle CSS Overflow),
   ce qui crée deux zones de scroll imbriquées (html ET body) au lieu d'une seule. Sur Chrome Android,
   ce doublon pouvait faire que le geste de scroll tactile ne soit capté par aucune des deux
   correctement, bloquant le scroll de la page formulaire. <body> n'a donc plus aucune règle ici. */

/* ==========================================
   2. HEADER
   ========================================== */

/* Hauteur du logo, avec paliers fixes à certains breakpoints (voir aussi section 5) */

.header-logo {
  height: var(--header-logo-height);
  width: auto;
}

@media (min-width: 400px) and (max-width: 640px) {
  .header-logo {
    height: var(--header-logo-height-sm);
  }
}

/* Survol du bouton hamburger réservé aux appareils à vrai pointeur (souris/trackpad). */

/* Sur tactile, Tailwind "hover:" resterait "collé" après un tap tant qu'on ne touche pas ailleurs : */

/* (hover: hover) ne s'active jamais sur un écran tactile, donc le souci ne peut pas se produire. */

/* Le retour au toucher est géré à part par "active:bg-katakidz-nuit/10" dans header.html. */

@media (hover: hover) {
  #menu-toggle:hover {
    background-color: rgba(58, 66, 80, 0.05);
    /* katakidz-nuit/5 */
  }
}

/* ==========================================
   3. ANIMATIONS KATAKIDZ
   ========================================== */

@keyframes float-slow {
  0%,
    100% {
    transform: translateY(0) rotate(var(--tw-rotate, 0deg));
  }

  50% {
    transform: translateY(calc(-1 * var(--float-translate-y))) rotate(calc(var(--tw-rotate, 0deg) + var(--float-rotate)));
  }
}

@keyframes float-reverse {
  0%,
    100% {
    transform: translateY(0) rotate(var(--tw-rotate, 0deg));
  }

  50% {
    transform: translateY(var(--float-translate-y)) rotate(calc(var(--tw-rotate, 0deg) - var(--float-rotate)));
  }
}

.animate-float-1 {
  animation: float-slow 7s ease-in-out infinite;
  will-change: transform;
}

.animate-float-2 {
  animation: float-reverse 8s ease-in-out infinite 1s;
  will-change: transform;
}

.animate-float-3 {
  animation: float-slow 9s ease-in-out infinite 2s;
  will-change: transform;
}

/* Ralentit le halo décoratif à 6s (au lieu de 2s par défaut avec animate-pulse) */

.halo-pulse-slow {
  animation-duration: 6s;
}

/* Position basse partagée des timelines (point + trait + carte(s)) : remplace les classes
   Tailwind "bottom-12 sm:bottom-10" qui étaient répétées telles quelles à chaque timeline.
   Utilisée en "position: absolute" par section 1 d'index.html.
   Desktop repoussé à 3.5rem (au lieu de 2.5rem) pour se rapprocher visuellement de la section 3 —
   c'est le maximum testé qui ne fait JAMAIS chevaucher le bouton "Partager mon expérience" sur les
   résolutions d'ordinateur portable les plus basses (ex : 1280×720, marge de sécurité ~12px). Ne pas
   monter davantage sans re-tester ces résolutions : la section 1 a un texte plus long que la section 3,
   donc moins de marge disponible. */

.timeline-bottom {
  bottom: var(--timeline-bottom-mobile);
}

@media (min-width: 640px) {
  .timeline-bottom {
    bottom: 3.5rem;
  }
}

/* Variante "plus haute" sur desktop uniquement (mobile identique à ".timeline-bottom") : utilisée par
   la section 3 d'index.html, dont le texte est plus court et laisse assez de marge pour descendre
   davantage (5rem) sans jamais chevaucher son contenu. Volontairement séparée de ".timeline-bottom" :
   la section 1 a un texte plus long et chevauchait son bouton sur les écrans d'ordinateur portable bas
   (ex : 1280×720) avec ce même écart plus grand — chaque section garde donc son propre écart, calé sur
   SON contenu. */

.timeline-bottom-lg {
  bottom: var(--timeline-bottom-mobile);
}

@media (min-width: 640px) {
  .timeline-bottom-lg {
    bottom: 5rem;
  }
}

/* En "padding-bottom" plutôt qu'en position absolue : utilisée par contact.html, où la timeline est en
   flux normal (pas de section plein écran garantie assez haute) — évite tout risque de chevauchement
   avec le contenu au-dessus. Valeurs propres à contact.html (pas les variables --timeline-bottom-*
   partagées avec index.html) : la carte de contact.html est seule (pas de 2e carte à protéger en
   dessous), donc peut descendre plus bas sans risque, contrairement aux sections d'index.html. */

.timeline-bottom-space {
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .timeline-bottom-space {
    padding-bottom: 1.5rem;
  }
}

/* ==========================================
   4. RESPONSIVE MOBILE
   ========================================== */

/* !important nécessaire : ces classes réécrivent des tailles Tailwind déjà posées dans le HTML */

@media (max-width: 640px) {
  .mobile-section {
    min-height: 100dvh;
    padding-top: var(--mobile-padding-top);
    padding-bottom: var(--mobile-padding-bottom);
    padding-left: var(--mobile-padding-x);
    padding-right: var(--mobile-padding-x);
  }

  .mobile-content {
    width: 100%;
    max-width: 100%;
    gap: var(--mobile-gap) !important;
  }

  .mobile-title {
    font-size: var(--font-title-mobile) !important;
    line-height: var(--line-height-title) !important;
  }

  .mobile-text {
    font-size: var(--font-text-mobile) !important;
    line-height: var(--line-height-text) !important;
  }

  .mobile-cta {
    width: 100% !important;
    padding-top: var(--btn-padding-y) !important;
    padding-bottom: var(--btn-padding-y) !important;
    padding-left: var(--btn-padding-x) !important;
    padding-right: var(--btn-padding-x) !important;
    font-size: var(--btn-font-size) !important;
    box-sizing: border-box !important;
  }

  /* Base, sans translation : sûre par défaut pour un usage en flux normal déjà centré par le parent
       (contact.html, via flex items-center). */

  .mobile-timeline {
    transform: scale(var(--scale-timeline-mobile));
    transform-origin: center bottom;
  }

  /* Variante pour un usage en "position: absolute; left: 50%" (section 1 et section 3 d'index.html) :
       intègre aussi le recentrage "translate(-50%,0)" dans la même règle. Nécessaire car un "transform:
       scale(...)" seul écraserait un "-translate-x-1/2" Tailwind posé à côté au lieu de s'y ajouter — les
       deux doivent être combinés dans UNE seule déclaration "transform", d'où cette classe séparée plutôt
       que de réutiliser ".mobile-timeline" avec le utilitaire Tailwind. */

  .mobile-timeline-absolute {
    transform: translate(-50%, 0) scale(var(--scale-timeline-mobile));
    transform-origin: center bottom;
  }

  .mobile-fragments {
    transform: scale(var(--scale-fragments-mobile));
    transform-origin: center center;
  }
}

@media (max-width: 820px) {
  .mobile-fragments {
    transform: scale(var(--scale-fragments-tablet));
    transform-origin: center center;
  }
}

/* ==========================================
   5. GRANDS ÉCRANS
   ========================================== */

/* Paliers supplémentaires pour très grands moniteurs (1800px, 2200px+) */

@media (min-width: 1800px) {
  .header-logo {
    height: var(--header-logo-height-xl);
  }

  .mobile-fragments {
    transform: scale(var(--scale-fragments-xl));
  }
}

@media (min-width: 2200px) {
  .header-logo {
    height: var(--header-logo-height-2xl);
  }

  .mobile-fragments {
    transform: scale(var(--scale-fragments-2xl));
  }
}

/* ==========================================
   6. MODE PAYSAGE MOBILE
   ========================================== */

@media (orientation: landscape) and (max-width: 1024px) {
  .landscape-warning {
    display: flex !important;
  }
}

/* ==========================================
   7. SCROLL PREMIUM
   ========================================== */

/* Complément CSS du verrouillage JS (js/main.js) : accroche chaque section en haut */

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

/* ==========================================
   8. STYLE UNIFIÉ DES BOUTONS
   ========================================== */

/* Référence : bouton "Partager mon expérience" (index.html, section 1). Tout bouton du site doit reprendre ce même arrondi et ce même comportement de clic */

/* Couleurs (bg-*, text-*, shadow-*) et cas particuliers restent des classes Tailwind ajoutées à côté de .btn dans le HTML — grâce à @layer components, ces utilitaires passent toujours au-dessus de .btn */

/* ==========================================
   8bis. STYLE UNIFIÉ DES CARTES DE TIMELINE
   ========================================== */

/* Identité visuelle partagée par TOUTES les cartes de timeline du site (section 1 et section 3
   d'index.html, carte de contact.html) : même fond "verre" légèrement translucide, même bordure, même
   ombre, même arrondi — quelle que soit la taille de la carte. Padding et largeur restent des classes
   Tailwind posées à côté dans le HTML (elles varient légèrement selon le contexte), mais fond/bordure/
   ombre/arrondi ne doivent JAMAIS être redéfinis à la main : une future timeline n'a qu'à ajouter cette
   classe pour hériter automatiquement du même style que les autres. */

/* ==========================================
   9. BOUTONS FLOTTANTS (LIQUID GLASS)
   ========================================== */

/* Bouton secondaire translucide façon "Liquid Glass" (flou du contenu derrière), utilisé sur formulaire.html */

.glass-btn {
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-btn:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

/* Repli pour les navigateurs sans support de backdrop-filter (ex : Firefox < 103) : fond quasi opaque pour rester lisible */

@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-btn {
    background-color: rgba(255, 255, 255, 0.92);
  }
}

/* ==========================================
   10. PANNEAU "LIQUID GLASS" (RÉUTILISABLE)
   ========================================== */

/* Reflet "verre" discret par-dessus un fond de couleur pleine (posé à côté dans le HTML, ex :
   bg-katakidz-sauge). Contrairement à .glass-btn, on n'utilise volontairement PAS de backdrop-filter/
   transparence ici : sur iOS Safari, un fond de menu semi-transparent empêche la bande derrière la
   barre d'adresse/outils de prendre la bonne couleur. Le "verre" vient donc d'un dégradé blanc en
   surimpression (::before), qui reste discret et n'importe quel fond garde son opacité à 100%.
   Réutilisable ailleurs (cartes, modales...) à l'avenir : il suffit d'ajouter "glass-panel" sur un
   élément déjà positionné (fixed/absolute/relative — c'est le cas du menu, déjà "fixed"). On ne pose
   pas position:relative ici pour ne pas risquer d'entrer en conflit avec la classe Tailwind "fixed". */

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
}

.selection\:bg-katakidz-peche\/20 *::-moz-selection {
  background-color: rgb(240 155 154 / 0.2);
}

.selection\:bg-katakidz-peche\/20 *::selection {
  background-color: rgb(240 155 154 / 0.2);
}

.selection\:bg-katakidz-peche\/20::-moz-selection {
  background-color: rgb(240 155 154 / 0.2);
}

.selection\:bg-katakidz-peche\/20::selection {
  background-color: rgb(240 155 154 / 0.2);
}

.placeholder\:text-katakidz-nuit\/40::-moz-placeholder {
  color: rgb(58 66 80 / 0.4);
}

.placeholder\:text-katakidz-nuit\/40::placeholder {
  color: rgb(58 66 80 / 0.4);
}

.hover\:border-katakidz-sauge\/50:hover {
  border-color: rgb(138 187 157 / 0.5);
}

.hover\:bg-katakidz-peche\/90:hover {
  background-color: rgb(240 155 154 / 0.9);
}

.hover\:bg-katakidz-sauge\/5:hover {
  background-color: rgb(138 187 157 / 0.05);
}

.hover\:bg-katakidz-sauge\/90:hover {
  background-color: rgb(138 187 157 / 0.9);
}

.hover\:text-katakidz-nuit:hover {
  --tw-text-opacity: 1;
  color: rgb(58 66 80 / var(--tw-text-opacity, 1));
}

.hover\:text-katakidz-nuit\/70:hover {
  color: rgb(58 66 80 / 0.7);
}

.focus\:border-katakidz-sauge:focus {
  --tw-border-opacity: 1;
  border-color: rgb(138 187 157 / var(--tw-border-opacity, 1));
}

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

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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-katakidz-sauge\/20:focus {
  --tw-ring-color: rgb(138 187 157 / 0.2);
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.active\:bg-katakidz-nuit\/10:active {
  background-color: rgb(58 66 80 / 0.1);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.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));
}

@media (min-width: 400px) {
  .min-\[400px\]\:w-44 {
    width: 11rem;
  }
}

@media (min-width: 640px) {
  .sm\:bottom-6 {
    bottom: 1.5rem;
  }

  .sm\:bottom-8 {
    bottom: 2rem;
  }

  .sm\:left-\[22\%\] {
    left: 22%;
  }

  .sm\:left-\[8\%\] {
    left: 8%;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:right-\[10\%\] {
    right: 10%;
  }

  .sm\:right-\[9\%\] {
    right: 9%;
  }

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

  .sm\:top-28 {
    top: 7rem;
  }

  .sm\:top-\[22\%\] {
    top: 22%;
  }

  .sm\:top-\[24\%\] {
    top: 24%;
  }

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

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

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-2 {
    height: 0.5rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-3 {
    height: 0.75rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-\[5\.5rem\] {
    height: 5.5rem;
  }

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

  .sm\:h-auto {
    height: auto;
  }

  .sm\:min-h-\[calc\(100dvh-10rem\)\] {
    min-height: calc(100dvh - 10rem);
  }

  .sm\:w-60 {
    width: 15rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

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

  .sm\:w-auto {
    width: auto;
  }

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

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

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

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

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

  .sm\:-translate-y-20 {
    --tw-translate-y: -5rem;
    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));
  }

  .sm\:-translate-y-8 {
    --tw-translate-y: -2rem;
    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));
  }

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

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

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

  .sm\:gap-10 {
    gap: 2.5rem;
  }

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

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\: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));
  }

  .sm\: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));
  }

  .sm\: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));
  }

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

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

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

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

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-\[1\.125rem\] {
    padding: 1.125rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

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

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

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

  .sm\:py-\[1\.125rem\] {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }

  .sm\:pt-28 {
    padding-top: 7rem;
  }

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

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

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

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

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

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

  .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\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1024px) {
  .lg\:max-w-lg {
    max-width: 32rem;
  }

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

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (min-width: 1536px) {
  .\32xl\:bottom-8 {
    bottom: 2rem;
  }

  .\32xl\:left-\[12\%\] {
    left: 12%;
  }

  .\32xl\:left-\[14\%\] {
    left: 14%;
  }

  .\32xl\:left-\[26\%\] {
    left: 26%;
  }

  .\32xl\:right-\[14\%\] {
    right: 14%;
  }

  .\32xl\:top-28 {
    top: 7rem;
  }

  .\32xl\:h-16 {
    height: 4rem;
  }

  .\32xl\:h-20 {
    height: 5rem;
  }

  .\32xl\:h-4 {
    height: 1rem;
  }

  .\32xl\:h-7 {
    height: 1.75rem;
  }

  .\32xl\:h-8 {
    height: 2rem;
  }

  .\32xl\:h-\[700px\] {
    height: 700px;
  }

  .\32xl\:w-4 {
    width: 1rem;
  }

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

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

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

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

  .\32xl\:origin-center {
    transform-origin: center;
  }

  .\32xl\: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));
  }

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

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

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

  .\32xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .\32xl\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
}