/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; } } } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2") format("woff2"), url("/build/static/inter-cyrillic-ext-400-normal-DQukG94-.woff") format("woff"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-cyrillic-400-normal-obahsSVq.woff2") format("woff2"), url("/build/static/inter-cyrillic-400-normal-HOLc17fK.woff") format("woff"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-greek-ext-400-normal-DGGRlc-M.woff2") format("woff2"), url("/build/static/inter-greek-ext-400-normal-KugGGMne.woff") format("woff"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-greek-400-normal-B4URO6DV.woff2") format("woff2"), url("/build/static/inter-greek-400-normal-q2sYcFCs.woff") format("woff"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-vietnamese-400-normal-DMkecbls.woff2") format("woff2"), url("/build/static/inter-vietnamese-400-normal-Bbgyi5SW.woff") format("woff"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-latin-ext-400-normal-C1nco2VV.woff2") format("woff2"), url("/build/static/inter-latin-ext-400-normal-77YHD8bZ.woff") format("woff"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url("/build/static/inter-latin-400-normal-C38fXH4l.woff2") format("woff2"), url("/build/static/inter-latin-400-normal-CyCys3Eg.woff") format("woff"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2") format("woff2"), url("/build/static/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff") format("woff"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-cyrillic-500-normal-BasfLYem.woff2") format("woff2"), url("/build/static/inter-cyrillic-500-normal-CxZf_p3X.woff") format("woff"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-greek-ext-500-normal-C4iEst2y.woff2") format("woff2"), url("/build/static/inter-greek-ext-500-normal-2j5mBUwD.woff") format("woff"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-greek-500-normal-BIZE56-Y.woff2") format("woff2"), url("/build/static/inter-greek-500-normal-Xzm54t5V.woff") format("woff"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-vietnamese-500-normal-DOriooB6.woff2") format("woff2"), url("/build/static/inter-vietnamese-500-normal-mJboJaSs.woff") format("woff"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-latin-ext-500-normal-CV4jyFjo.woff2") format("woff2"), url("/build/static/inter-latin-ext-500-normal-BxGbmqWO.woff") format("woff"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url("/build/static/inter-latin-500-normal-Cerq10X2.woff2") format("woff2"), url("/build/static/inter-latin-500-normal-BL9OpVg8.woff") format("woff"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2") format("woff2"), url("/build/static/inter-cyrillic-ext-600-normal-Bcila6Z-.woff") format("woff"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-cyrillic-600-normal-CWCymEST.woff2") format("woff2"), url("/build/static/inter-cyrillic-600-normal-4D_pXhcN.woff") format("woff"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-greek-ext-600-normal-DRtmH8MT.woff2") format("woff2"), url("/build/static/inter-greek-ext-600-normal-B8X0CLgF.woff") format("woff"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-greek-600-normal-plRanbMR.woff2") format("woff2"), url("/build/static/inter-greek-600-normal-BZpKdvQh.woff") format("woff"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-vietnamese-600-normal-Cc8MFFhd.woff2") format("woff2"), url("/build/static/inter-vietnamese-600-normal-BuLX-rYi.woff") format("woff"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-latin-ext-600-normal-D2bJ5OIk.woff2") format("woff2"), url("/build/static/inter-latin-ext-600-normal-CIVaiw4L.woff") format("woff"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 600; src: url("/build/static/inter-latin-600-normal-LgqL8muc.woff2") format("woff2"), url("/build/static/inter-latin-600-normal-CiBQ2DWP.woff") format("woff"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-cyrillic-ext-700-normal-BjwYoWNd.woff2") format("woff2"), url("/build/static/inter-cyrillic-ext-700-normal-LO58E6JB.woff") format("woff"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-cyrillic-700-normal-CjBOestx.woff2") format("woff2"), url("/build/static/inter-cyrillic-700-normal-DrXBdSj3.woff") format("woff"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-greek-ext-700-normal-qfdV9bQt.woff2") format("woff2"), url("/build/static/inter-greek-ext-700-normal-BoQ6DsYi.woff") format("woff"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-greek-700-normal-C3JjAnD8.woff2") format("woff2"), url("/build/static/inter-greek-700-normal-BUv2fZ6O.woff") format("woff"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-vietnamese-700-normal-DlLaEgI2.woff2") format("woff2"), url("/build/static/inter-vietnamese-700-normal-BZaoP0fm.woff") format("woff"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-latin-ext-700-normal-Ca8adRJv.woff2") format("woff2"), url("/build/static/inter-latin-ext-700-normal-TidjK2hL.woff") format("woff"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url("/build/static/inter-latin-700-normal-Yt3aPRUw.woff2") format("woff2"), url("/build/static/inter-latin-700-normal-BLAVimhd.woff") format("woff"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-cyrillic-ext-800-normal-BZOjs1Xv.woff2") format("woff2"), url("/build/static/inter-cyrillic-ext-800-normal-Ca-gJeZY.woff") format("woff"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-cyrillic-800-normal-C7MGvYyJ.woff2") format("woff2"), url("/build/static/inter-cyrillic-800-normal-CCHyn08d.woff") format("woff"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-greek-ext-800-normal-B--PVpEC.woff2") format("woff2"), url("/build/static/inter-greek-ext-800-normal-DUe57HfS.woff") format("woff"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-greek-800-normal-CLIouy3y.woff2") format("woff2"), url("/build/static/inter-greek-800-normal-BU00tryP.woff") format("woff"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-vietnamese-800-normal-Cm7tD1pz.woff2") format("woff2"), url("/build/static/inter-vietnamese-800-normal-DDlpr_Ee.woff") format("woff"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-latin-ext-800-normal-DZJjya6U.woff2") format("woff2"), url("/build/static/inter-latin-ext-800-normal-BOMpwxm3.woff") format("woff"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 800; src: url("/build/static/inter-latin-800-normal-BYj_oED-.woff2") format("woff2"), url("/build/static/inter-latin-800-normal-D1mf63XC.woff") format("woff"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer theme { :root, :host { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-blue-300: oklch(80.9% .105 251.813); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-black: #000; --color-white: #fff; --spacing: .2rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-6xl: 72rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -.025em; --tracking-wide: .025em; --tracking-wider: .05em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-md: .375rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-2xl: 1rem; --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-background: #f6f7f9; --color-foreground: #111214; --color-ink-2: #3c4043; --color-muted: #f4f5f7; --color-muted-foreground: #6b7280; --color-border: #e5e7eb; --color-card: #fff; --color-brand: #e23a2e; --color-brand-dark: #c22f24; --color-brand-soft: #fff4f2; --color-brand-foreground: #fff; --color-header: #0b0b0c; --color-header-text: #e8eaee; --color-footer: #1f1f1f; --color-footer-muted: #9ea3aa; --color-positive: #00b67a; --max-width-mall: 1440px; --max-width-svc: 12.5rem; --min-width-menu: 13rem; --min-width-notif: 16.5rem; --spacing-gutter: clamp(.875rem, 2.5vw, 1.5rem); --spacing-gap-hdr: clamp(.75rem, 1.8vw, 1.25rem); --spacing-gap-hdr-sm: clamp(.5rem, 1.3vw, .875rem); --spacing-gap-hdr-xs: clamp(.375rem, .9vw, .625rem); --spacing-search: clamp(0px, 12vw - 5rem, 11rem); --spacing-search-pl: clamp(.75rem, 1.6vw, 1rem); --spacing-menu-y: .625rem; --height-ctl: clamp(2.25rem, 1.9rem + 1.1vw, 2.5rem); --size-ctl: clamp(1rem, 1.4rem + 1.1vw, 2.5rem); --size-search-btn: calc(var(--height-ctl) - .5rem); --size-caret: .7rem; --height-logo-hdr: clamp(2rem, 1.2rem + 2.2vw, 2.875rem); --text-hdr-sm: .93rem; --z-hdr: 60; --z-hdr-menu: 75; --z-hdr-sug: 70; --z-locale: 200; --z-cart-ovl: 205; --z-cart: 210; } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } :root, [data-theme] { background-color: var(--root-bg); color: var(--color-base-content); } :root { background-color: var(--page-scroll-bg, var(--root-bg)); } :where(:root, [data-theme]) { --root-bg: var(--color-base-100); } :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); --page-has-backdrop: var(--page-scroll-lock) 1; --page-scroll-bg: var(--page-scroll-lock) var(--root-bg, #0000); } @supports (color: color-mix(in lab, red, red)) { :root { --page-scroll-bg: var(--page-scroll-lock) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)); } } :root { background-image: var(--page-scroll-lock) linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)); transition: var(--page-scroll-lock) background-color .3s ease-out; animation: var(--page-scroll-lock) set-page-has-scroll forwards; animation-timeline: var(--page-scroll-lock) scroll(); --page-has-scroll: initial; scrollbar-gutter: var(--page-has-scroll) var(--page-scroll-lock) stable; } @keyframes set-page-has-scroll { 0%, to { --page-has-scroll: ; } } :root { scrollbar-color: currentColor #0000; } @supports (color: color-mix(in lab, red, red)) { :root { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; } } :root { --page-scroll-lock: initial; --page-overflow: var(--page-scroll-lock) hidden; } :root:not(span) { overflow: var(--page-overflow); } :where(:root), :root:has(input.theme-controller[value="u4n"]:checked), [data-theme="u4n"] { color-scheme: light; --color-base-100: #fff; --color-base-200: #f6f7f9; --color-base-300: #e5e7eb; --color-base-content: #111214; --color-primary: #e23a2e; --color-primary-content: #fff; --color-secondary: #0b0b0c; --color-secondary-content: #e8eaee; --color-accent: #00b67a; --color-accent-content: #fff; --color-neutral: #3c4043; --color-neutral-content: #fff; --color-info: #3b82f6; --color-info-content: #fff; --color-success: #00b67a; --color-success-content: #fff; --color-warning: #b5761b; --color-warning-content: #111214; --color-error: #e23a2e; --color-error-content: #fff; --radius-selector: .5rem; --radius-field: .75rem; --radius-box: 1rem; --border: 1px; --depth: 0; --noise: 0; } } @layer components { .hdr { background-color: var(--color-header); color: var(--color-header-text); z-index: var(--z-hdr); position: sticky; top: 0; } .hdr-pill { height: var(--height-ctl); justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: #ffffff59; border-radius: 3.40282e38px; display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .hdr-pill { border-color: color-mix(in oklab, var(--color-white) 35%, transparent); } } .hdr-pill { padding-inline: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--color-header-text); } @media (hover: hover) { .hdr-pill:hover { border-color: var(--color-white); background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .hdr-pill:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } @media not all and (min-width: 64rem) { .hdr-pill { width: var(--size-ctl); height: var(--size-ctl); gap: 0; padding-inline: 0; } } @media (min-width: 64rem) { .hdr-pill { padding-inline: calc(var(--spacing) * 4); } } .hdr-icon { width: var(--size-ctl); height: var(--size-ctl); border-style: var(--tw-border-style); border-width: 1px; border-color: #ffffff59; border-radius: 3.40282e38px; place-items: center; display: grid; } @supports (color: color-mix(in lab, red, red)) { .hdr-icon { border-color: color-mix(in oklab, var(--color-white) 35%, transparent); } } @media (hover: hover) { .hdr-icon:hover { border-color: var(--color-white); background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .hdr-icon:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .hdr-badge { pointer-events: none; top: calc(var(--spacing) * -1); right: calc(var(--spacing) * -1.5); background-color: var(--color-brand); min-width: 1.125rem; padding-inline: var(--spacing); --tw-leading: 1.125rem; --tw-font-weight: var(--font-weight-bold); font-size: .6875rem; line-height: 1.125rem; font-weight: var(--font-weight-bold); color: var(--color-white); box-shadow: 0 0 0 2px var(--color-header); border-radius: 3.40282e38px; place-items: center; display: grid; position: absolute; } .hdr-badge:empty { display: none; } .hdr-cart { width: var(--size-ctl); height: var(--size-ctl); background-color: var(--color-brand); border-radius: 3.40282e38px; place-items: center; display: grid; } @media (hover: hover) { .hdr-cart:hover { background-color: var(--color-brand-dark); } } .hdr-cart.is-pop, .hdr-badge.is-pop { animation: .42s cubic-bezier(.22, 1.2, .36, 1) u4n-cart-pop; } .hdr-menu { margin-top: var(--spacing-menu-y); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); padding: calc(var(--spacing) * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-foreground); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: var(--z-hdr-menu); position: absolute; top: 100%; right: 0; } .hdr-menu.hdr-notif-menu { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .hdr-notif-item { align-items: center; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-foreground); display: flex; } @media (hover: hover) { .hdr-notif-item:hover { background-color: var(--color-muted); color: var(--color-brand); } } .hdr-notif-item svg { opacity: .65; flex-shrink: 0; width: 1.125rem; height: 1.125rem; } .hdr-notif-item:hover svg { opacity: 1; } .hdr-notif-num { min-width: calc(var(--spacing) * 5); background-color: var(--color-brand); padding-inline: var(--spacing); --tw-leading: calc(var(--spacing) * 5); font-size: .6875rem; line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-white); border-radius: 3.40282e38px; place-items: center; margin-inline-start: auto; display: grid; } .hdr-notif-num:empty { display: none; } .hdr-acct-btn { padding: 0; overflow: hidden; } .hdr-acct-avatar { object-fit: cover; border-radius: 3.40282e38px; width: 100%; height: 100%; } .hdr-acct-avatar.is-initials { background-color: var(--color-brand); --tw-font-weight: var(--font-weight-bold); font-size: .625rem; font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-white); text-transform: uppercase; place-items: center; display: grid; } .hdr-menu.hdr-acct-menu { overscroll-behavior: contain; width: min(19rem, 100vw - 1.5rem); max-height: min(80vh, 38rem); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); min-width: 0; padding: 0; overflow: auto; } .hdr-acc-top { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border); background: linear-gradient(180deg, var(--color-muted, #fafbfc), var(--color-card, #fff)); } .hdr-acc-hd { align-items: center; gap: calc(var(--spacing) * 3); padding-inline: calc(var(--spacing) * 3.5); padding-top: calc(var(--spacing) * 3.5); padding-bottom: calc(var(--spacing) * 3); --acc-st: var(--color-positive, #16a34a); display: flex; } .hdr-acc-hd[data-st="offline"] { --acc-st: var(--color-footer-muted, #9ca3af); } .hdr-acc-ava { width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); --tw-font-weight: var(--font-weight-bold); font-size: .9375rem; font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-white); text-transform: uppercase; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark)); border-radius: 3.40282e38px; flex-shrink: 0; place-items: center; display: grid; position: relative; } .hdr-acc-ava img { z-index: 1; object-fit: cover; border-radius: 3.40282e38px; width: 100%; height: 100%; position: absolute; inset: 0; } .hdr-acc-ava-st { z-index: 2; background: var(--acc-st); width: .8125rem; height: .8125rem; box-shadow: 0 0 0 2px var(--color-card, #fff); border-radius: 3.40282e38px; position: absolute; bottom: -1px; right: -1px; } .hdr-acc-id { flex: 1; min-width: 0; } .hdr-acc-name { text-overflow: ellipsis; white-space: nowrap; --tw-leading: var(--leading-snug); font-size: .9375rem; line-height: var(--leading-snug); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-foreground); margin: 0; overflow: hidden; } .hdr-acc-st-btn { margin-top: var(--spacing); align-items: center; gap: calc(var(--spacing) * 1.5); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-white); max-width: 100%; padding-block: calc(var(--spacing) * .5); padding-right: calc(var(--spacing) * 2); padding-left: calc(var(--spacing) * .5); --tw-leading: var(--leading-snug); font-size: .6875rem; line-height: var(--leading-snug); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-ink-2); border-radius: 3.40282e38px; display: inline-flex; } .hdr-acc-st-btn:hover { border-color: var(--color-border); background-color: var(--color-muted); } .hdr-acc-st-btn:disabled { opacity: .6; } .hdr-acc-sw { height: calc(var(--spacing) * 3.5); width: calc(var(--spacing) * 6); background-color: var(--color-border); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); border-radius: 3.40282e38px; flex-shrink: 0; position: relative; } .hdr-acc-sw i { top: calc(var(--spacing) * .5); left: calc(var(--spacing) * .5); width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); background-color: var(--color-white); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); border-radius: 3.40282e38px; position: absolute; box-shadow: 0 1px 2px #1112144d; } @supports (color: color-mix(in lab, red, red)) { .hdr-acc-sw i { box-shadow: 0 1px 2px color-mix(in srgb, var(--color-foreground, #111214) 30%, transparent); } } .hdr-acc-st-btn[aria-pressed="true"] .hdr-acc-sw { background: var(--acc-st); } .hdr-acc-st-btn[aria-pressed="true"] .hdr-acc-sw i { transform: translateX(.625rem); } .hdr-acc-st-txt { text-overflow: ellipsis; white-space: nowrap; min-width: 0; overflow: hidden; } .hdr-acc-pts { gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 3.5); padding-bottom: calc(var(--spacing) * 3.5); display: flex; } .hdr-acc-pt { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-white); min-width: 0; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); border-radius: .625rem; flex: 1; } .hdr-acc-pt-k { align-items: center; gap: calc(var(--spacing) * 1.5); --tw-font-weight: var(--font-weight-semibold); font-size: .6875rem; font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-muted-foreground); display: flex; overflow: hidden; } .hdr-acc-pt-k svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); flex-shrink: 0; } .hdr-acc-pt.is-buyer .hdr-acc-pt-k svg { color: var(--color-brand); } .hdr-acc-pt.is-seller .hdr-acc-pt-k svg { color: var(--color-warning, #f59e0b); } .hdr-acc-pt-v { margin-top: calc(var(--spacing) * .5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); color: var(--color-foreground); --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, ); display: block; } .hdr-acc-nav { padding: calc(var(--spacing) * 1.5); } .hdr-acc-item { align-items: center; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-md); width: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-foreground); display: flex; } @media (hover: hover) { .hdr-acc-item:hover { background-color: var(--color-muted); color: var(--color-brand); } } .hdr-acc-item svg { opacity: .65; flex-shrink: 0; width: 1.125rem; height: 1.125rem; } .hdr-acc-item:hover svg { opacity: 1; } .hdr-acc-row { border-style: var(--tw-border-style); background-color: #0000; border-width: 0; } .hdr-acc-caret { opacity: .55; width: .7rem; height: .7rem; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); margin-inline-start: auto; } .hdr-acc-fold.is-open > .hdr-acc-item { color: var(--color-brand); } .hdr-acc-fold.is-open > .hdr-acc-item svg { opacity: 1; } .hdr-acc-fold.is-open .hdr-acc-caret { transform: rotate(180deg); } .hdr-acc-sub { grid-template-rows: 0fr; transition: grid-template-rows .22s; display: grid; } .hdr-acc-fold.is-open .hdr-acc-sub { grid-template-rows: 1fr; } .hdr-acc-sub-in { min-height: 0; overflow: hidden; } .hdr-acc-sub-list { margin-block: calc(var(--spacing) * .5); border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-border); padding-left: calc(var(--spacing) * 2); margin-left: 1.34375rem; } .hdr-acc-sub-item { border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1.5); --tw-font-weight: var(--font-weight-medium); font-size: .8125rem; font-weight: var(--font-weight-medium); color: var(--color-ink-2); display: block; } @media (hover: hover) { .hdr-acc-sub-item:hover { background-color: var(--color-muted); color: var(--color-brand); } } .hdr-acc-out { border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-border); padding: calc(var(--spacing) * 1.5); } .hdr-acc-aff { margin-inline: calc(var(--spacing) * 2.5); margin-bottom: calc(var(--spacing) * 2.5); align-items: center; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; border-color: #e23a2e40; display: flex; } @supports (color: color-mix(in lab, red, red)) { .hdr-acc-aff { border-color: color-mix(in oklab, var(--color-brand) 25%, transparent); } } .hdr-acc-aff { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); background: linear-gradient(135deg, var(--color-brand-soft, #fff4f2), #fadcd9); text-decoration-line: none; } @supports (color: color-mix(in lab, red, red)) { .hdr-acc-aff { background: linear-gradient(135deg, var(--color-brand-soft, #fff4f2), color-mix(in srgb, var(--color-brand, #e23a2e) 18%, var(--color-card, #fff))); } } .hdr-acc-aff:hover { border-color: var(--color-brand); box-shadow: 0 6px 16px #e23a2e29; } @supports (color: color-mix(in lab, red, red)) { .hdr-acc-aff:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--color-brand, #e23a2e) 16%, transparent); } } .hdr-acc-aff.is-code { cursor: default; } .hdr-acc-aff.is-code:hover { box-shadow: none; } .hdr-acc-aff-ic { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: var(--radius-lg); background-color: var(--color-brand); color: var(--color-white); flex-shrink: 0; place-items: center; display: grid; } .hdr-acc-aff-ic svg { width: 1.0625rem; height: 1.0625rem; } .hdr-acc-aff-tx { flex: 1; min-width: 0; } .hdr-acc-aff-t { text-overflow: ellipsis; white-space: nowrap; --tw-font-weight: var(--font-weight-bold); font-size: .8125rem; font-weight: var(--font-weight-bold); color: var(--color-brand); display: block; overflow: hidden; } .hdr-acc-aff-s { text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); margin-top: 1px; font-size: .6875rem; display: block; overflow: hidden; } .hdr-acc-aff-go { width: .9rem; height: .9rem; color: var(--color-brand); flex-shrink: 0; } .hdr-svc-opt { align-items: center; gap: calc(var(--spacing) * 2); border-radius: var(--radius-md); width: 100%; padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2); text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); white-space: nowrap; color: var(--color-foreground); display: flex; } @media (hover: hover) { .hdr-svc-opt:hover { background-color: var(--color-muted); } } .hdr-svc-opt.is-sel { background-color: var(--color-brand-soft); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-brand); } .hdr-svc-tick { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); color: var(--color-brand); opacity: 0; flex-shrink: 0; margin-inline-start: auto; } .hdr-svc-opt.is-sel .hdr-svc-tick { opacity: 1; } .locale-ovl { background-color: #0009; justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; } @supports (color: color-mix(in lab, red, red)) { .locale-ovl { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .locale-ovl { padding: var(--spacing-gutter); z-index: var(--z-locale); } .locale-modal { border-radius: var(--radius-xl); background-color: var(--color-card); width: min(100%, 45rem); max-height: min(86vh, 50rem); color: var(--color-foreground); --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); flex-direction: column; display: flex; } .locale-hd { justify-content: space-between; align-items: center; gap: calc(var(--spacing) * 2); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border); padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 3); display: flex; } @media (min-width: 40rem) { .locale-hd { padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 5); padding-bottom: calc(var(--spacing) * 4); } } .locale-hd h3 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); margin: 0; } .locale-x { border-style: var(--tw-border-style); background-color: var(--color-muted); width: 2.125rem; height: 2.125rem; color: var(--color-ink-2); border-width: 0; border-radius: 3.40282e38px; flex-shrink: 0; place-items: center; display: grid; } @media (hover: hover) { .locale-x:hover { background-color: var(--color-border); } } .locale-bd { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 4); overflow: auto; } @media (min-width: 40rem) { .locale-bd { padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 5); } } .locale-bd h4 { margin-bottom: calc(var(--spacing) * 3); --tw-font-weight: var(--font-weight-bold); font-size: .93rem; font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); color: var(--color-muted-foreground); text-transform: uppercase; } .locale-bd h4 + .locale-opt-grid { margin-bottom: calc(var(--spacing) * 6); } .locale-opt-grid { gap: calc(var(--spacing) * 2.5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); display: grid; } .locale-opt { align-items: center; gap: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); min-width: 0; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); text-align: left; border-radius: 10px; display: flex; } @media (hover: hover) { .locale-opt:hover { border-color: var(--color-border); background-color: var(--color-muted); } } .locale-opt.is-sel { border-color: var(--color-brand); background-color: var(--color-brand-soft); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-brand); } .locale-opt-sub { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-muted-foreground); margin-inline-start: auto; } .locale-opt.is-sel .locale-opt-sub { color: var(--color-brand); } .locale-cur { margin-bottom: calc(var(--spacing) * 2); position: relative; } .locale-cur-btn { height: var(--height-ctl); align-items: center; gap: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); width: 100%; padding-inline: calc(var(--spacing) * 3.5); text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); border-radius: .5625rem; display: flex; } @media (hover: hover) { .locale-cur-btn:hover { border-color: var(--color-border); } } .locale-cur.is-open .locale-cur-btn { border-color: var(--color-muted-foreground); box-shadow: 0 0 0 3px #6b72801f; } @supports (color: color-mix(in lab, red, red)) { .locale-cur.is-open .locale-cur-btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-muted-foreground, #6b7280) 12%, transparent); } } .locale-cur-val { text-overflow: ellipsis; white-space: nowrap; --tw-font-weight: var(--font-weight-semibold); min-width: 0; font-weight: var(--font-weight-semibold); flex: 1; overflow: hidden; } .locale-cur-panel { margin-top: calc(var(--spacing) * 2); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); padding: calc(var(--spacing) * 2.5); } .locale-seek { align-items: center; gap: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); border-radius: .5625rem; display: flex; } .locale-seek:focus-within { border-color: var(--color-muted-foreground); box-shadow: 0 0 0 3px #6b72801f; } @supports (color: color-mix(in lab, red, red)) { .locale-seek:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-muted-foreground, #6b7280) 12%, transparent); } } .locale-seek input { border-style: var(--tw-border-style); min-width: 0; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-outline-style: none; background-color: #0000; border-width: 0; outline-style: none; flex: 1; } .locale-seek-x { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); border-style: var(--tw-border-style); background-color: var(--color-muted); color: var(--color-muted-foreground); border-width: 0; border-radius: 3.40282e38px; flex-shrink: 0; place-items: center; padding: 0; display: none; } @media (hover: hover) { .locale-seek-x:hover { background-color: var(--color-border); color: var(--color-foreground); } } .locale-seek-x.is-show { display: grid; } .locale-cur-count { margin-inline: calc(var(--spacing) * .5); margin-top: calc(var(--spacing) * 2.5); margin-bottom: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-muted-foreground); text-transform: uppercase; } .locale-cur-list { gap: calc(var(--spacing) * .5); flex-direction: column; max-height: min(16.5rem, 45vh); display: flex; overflow: auto; } .locale-cur-opt { align-items: center; gap: calc(var(--spacing) * 2.5); border-style: var(--tw-border-style); width: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); text-align: left; background-color: #0000; border-width: 0; border-radius: .5625rem; display: flex; } @media (hover: hover) { .locale-cur-opt:hover { background-color: var(--color-muted); } } .locale-cur-opt.is-active { background-color: var(--color-muted); } .locale-cur-opt.is-sel { background-color: var(--color-brand-soft); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-brand); } .locale-cur-opt.is-sel.is-active { background-color: var(--color-brand-soft); } .locale-tick { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); color: var(--color-brand); opacity: 0; flex-shrink: 0; } .locale-cur-opt.is-sel .locale-tick { opacity: 1; } .locale-empty { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 4); text-align: center; --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-muted-foreground); } .locale-empty b { margin-bottom: var(--spacing); color: var(--color-ink-2); display: block; } .locale-ft { justify-content: flex-end; gap: calc(var(--spacing) * 2); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-border); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); flex-wrap: wrap; display: flex; } @media (min-width: 40rem) { .locale-ft { padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); } } .locale-btn-ghost, .locale-btn-solid { height: clamp(2.5rem, 5.5vw, 2.75rem); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); border-radius: .5625rem; flex-shrink: 1; } .locale-btn-ghost { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); padding-inline: calc(var(--spacing) * 4); color: var(--color-ink-2); } @media (hover: hover) { .locale-btn-ghost:hover { background-color: var(--color-muted); } } @media (min-width: 40rem) { .locale-btn-ghost { padding-inline: calc(var(--spacing) * 5); } } .locale-btn-solid { border-style: var(--tw-border-style); background-color: var(--color-brand); padding-inline: calc(var(--spacing) * 5); color: var(--color-white); border-width: 0; } @media (hover: hover) { .locale-btn-solid:hover { background-color: var(--color-brand-dark); } } .locale-btn-solid:disabled { opacity: .6; } @media (min-width: 40rem) { .locale-btn-solid { padding-inline: calc(var(--spacing) * 7); } } .hdr-sug { margin-top: calc(var(--spacing) * 2); border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); width: 100%; min-width: min(88vw, 20rem); padding: calc(var(--spacing) * 2); color: var(--color-foreground); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: var(--z-hdr-sug); position: absolute; top: 100%; left: 0; } .hdr-sug-hd { margin-inline: calc(var(--spacing) * 2); margin-top: var(--spacing); margin-bottom: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); color: var(--color-muted-foreground); text-transform: uppercase; } .hdr-sug-list { gap: calc(var(--spacing) * .5); flex-direction: column; max-height: min(20rem, 50vh); display: flex; overflow: auto; } .hdr-sug-item { align-items: center; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-lg); width: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-foreground); display: flex; } @media (hover: hover) { .hdr-sug-item:hover { background-color: var(--color-muted); } } .hdr-sug-item.is-active { background-color: var(--color-muted); } .hdr-sug-ico { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); border-radius: var(--radius-md); background-color: var(--color-brand-soft); color: var(--color-brand); flex-shrink: 0; place-items: center; display: grid; } .hdr-sug-ico svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .hdr-sug-txt { text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; } .hdr-sug-tag { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-muted-foreground); flex-shrink: 0; } .hdr-sug-empty { padding-inline: calc(var(--spacing) * 3); text-align: center; --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-muted-foreground); padding-block: 1.125rem; } .hdr-sug-empty b { margin-bottom: var(--spacing); color: var(--color-ink-2); display: block; } .cart-ovl { background: #0b0b0c8c; position: fixed; inset: 0; } @supports (color: color-mix(in lab, red, red)) { .cart-ovl { background: color-mix(in srgb, var(--color-header, #0b0b0c) 55%, transparent); } } .cart-ovl { z-index: var(--z-cart-ovl); } .cart-drawer { background-color: var(--color-card); width: min(100%, 26rem); height: 100dvh; color: var(--color-foreground); flex-direction: column; display: flex; position: fixed; top: 0; right: 0; box-shadow: -10px 0 40px #11121447; } @supports (color: color-mix(in lab, red, red)) { .cart-drawer { box-shadow: -10px 0 40px color-mix(in srgb, var(--color-foreground, #111214) 28%, transparent); } } .cart-drawer { z-index: var(--z-cart); } .cart-hd { align-items: center; gap: var(--spacing-gap-hdr-sm); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border); padding-block: clamp(1rem, 3vw, 1.25rem); padding-inline: clamp(1rem, 3vw, 1.375rem); display: flex; } .cart-hd h3 { align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); margin: 0; display: flex; } .cart-count { min-width: calc(var(--spacing) * 6); background-color: var(--color-brand-soft); padding-inline: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-brand); border-radius: 3.40282e38px; place-items: center; height: 1.5rem; display: grid; } .cart-hd .locale-x { margin-inline-start: auto; } .cart-bd { gap: var(--spacing-gap-hdr-sm); flex-direction: column; flex: 1; padding-block: clamp(.75rem, 2.4vw, 1rem); padding-inline: clamp(1rem, 3vw, 1.375rem); display: flex; overflow: auto; } .cart-empty { padding-inline: var(--spacing-gap-hdr); padding-block: var(--spacing-gap-hdr); text-align: center; --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-muted-foreground); margin: auto; } .cart-empty b { margin-bottom: var(--spacing); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-foreground); display: block; } .cart-item { align-items: flex-start; gap: var(--spacing-gap-hdr-sm); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); padding: clamp(.75rem, 2.2vw, .875rem); display: flex; } .cart-thumb { aspect-ratio: 1; border-radius: var(--radius-lg); background-color: var(--color-brand-soft); flex-shrink: 0; place-items: center; width: clamp(2.75rem, 9vw, 3.25rem); display: grid; overflow: hidden; } .cart-thumb img { object-fit: contain; width: 100%; height: 100%; } .cart-info { flex: 1; min-width: 0; } .cart-info h4 { margin-bottom: calc(var(--spacing) * .5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: var(--leading-snug); line-height: var(--leading-snug); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); -webkit-line-clamp: 2; word-break: break-word; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .cart-sub { margin-bottom: var(--spacing); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-muted-foreground); overflow: hidden; } .cart-unit { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-muted-foreground); } .cart-qty { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); border-radius: 3.40282e38px; flex-shrink: 0; align-items: center; display: inline-flex; overflow: hidden; } .cart-qty button { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); border-style: var(--tw-border-style); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: 1; color: var(--color-ink-2); background-color: #0000; border-width: 0; flex-shrink: 0; place-items: center; line-height: 1; display: grid; } @media (hover: hover) { .cart-qty button:hover { background-color: var(--color-muted); color: var(--color-brand); } } .cart-qty button:disabled { opacity: .35; } @media (hover: hover) { .cart-qty button:disabled:hover { color: var(--color-ink-2); background-color: #0000; } } .cart-qty input { width: calc(var(--spacing) * 16); min-width: calc(var(--spacing) * 16); border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * .5); text-align: center; --tw-font-weight: var(--font-weight-semibold); font-size: .8125rem; font-weight: var(--font-weight-semibold); --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, ); --tw-outline-style: none; background-color: #0000; border-width: 0; outline-style: none; padding-block: 0; } .cart-qty-sfx { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-muted-foreground); padding-inline-end: calc(var(--spacing) * 1.5); } .cart-side { align-items: flex-end; gap: calc(var(--spacing) * 1.5); flex-direction: column; flex-shrink: 0; display: flex; } .cart-side b { --tw-font-weight: var(--font-weight-bold); font-size: .9375rem; font-weight: var(--font-weight-bold); white-space: nowrap; } .cart-del { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); border-style: var(--tw-border-style); color: var(--color-muted-foreground); background-color: #0000; border-width: 0; border-radius: 3.40282e38px; place-items: center; display: grid; } @media (hover: hover) { .cart-del:hover { background-color: var(--color-brand-soft); color: var(--color-brand); } } .cart-del svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .cart-ft { gap: var(--spacing-gap-hdr-sm); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-border); padding-inline: clamp(1rem, 3vw, 1.375rem); padding-top: clamp(1rem, 3vw, 1.25rem); padding-bottom: calc(clamp(1rem, 3vw, 1.375rem) + env(safe-area-inset-bottom)); flex-direction: column; display: flex; } .cart-sum { justify-content: space-between; align-items: baseline; gap: var(--spacing-gap-hdr-sm); display: flex; } .cart-sum span { color: var(--color-muted-foreground); } .cart-sum b { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .cart-note { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-muted-foreground); margin: 0; } .cart-btn-solid, .cart-btn-ghost { text-align: center; width: 100%; height: clamp(2.5rem, 5.5vw, 2.75rem); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); border-radius: .5625rem; } .cart-btn-solid { border-style: var(--tw-border-style); background-color: var(--color-brand); color: var(--color-white); border-width: 0; } @media (hover: hover) { .cart-btn-solid:hover { background-color: var(--color-brand-dark); } } .cart-btn-ghost { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); color: var(--color-ink-2); } @media (hover: hover) { .cart-btn-ghost:hover { background-color: var(--color-muted); } } .crumbbar { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border); background-color: var(--color-background); } .crumb-wrap { width: 100%; max-width: var(--max-width-mall); padding-inline: var(--spacing-gutter); margin-inline: auto; } .crumb { padding-block: clamp(.625rem, 1.6vw, .5rem); } .crumb ol { color: var(--color-muted-foreground); flex-wrap: wrap; align-items: center; gap: clamp(.375rem, 1vw, .5625rem); margin: 0; padding: 0; font-size: .78rem; list-style-type: none; display: flex; } .crumb li { align-items: center; gap: clamp(.375rem, 1vw, .5625rem); display: flex; } .crumb-sep { color: var(--color-footer-muted); font-size: 1.14rem; } @media (hover: hover) { .crumb a:hover { color: var(--color-brand); } } .crumb [aria-current] { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-foreground); } .pay { background-color: var(--color-card); padding-block: clamp(1rem, 2.6vw, 1.375rem); } .pay-in { width: 100%; max-width: var(--max-width-mall); padding-inline: var(--spacing-gutter); flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(.5rem, 1.3vw, .4rem); margin-inline: auto; display: flex; } .pay-mark { border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border); background-color: var(--color-card); min-width: clamp(3.25rem, 9vw, 4rem); height: clamp(2.5rem, 6vw, 2.875rem); padding-inline: calc(var(--spacing) * 2.5); flex-shrink: 0; justify-content: center; align-items: center; gap: .4375rem; display: inline-flex; } .pay-mark img { width: auto; height: clamp(1.25rem, 3vw, 1.5rem); display: block; } @media (max-width: 1000px) { .pay-in { justify-content: flex-start; } } .ftr { background-color: var(--color-footer); color: var(--color-footer-muted); margin-top: auto; padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 1.625rem); overflow-x: clip; } .ftr-in { width: 100%; max-width: var(--max-width-mall); padding-inline: var(--spacing-gutter); min-width: 0; margin-inline: auto; } .ftr-grid { flex-wrap: wrap; align-items: flex-start; gap: clamp(1.5rem, 3.6vw, 1rem); display: flex; } .ftr-grid > * { flex: min(100%, 11rem); min-width: 0; } .ftr-grid > .ftr-brand { flex: 2 min(100%, 18rem); } @media (max-width: 639px) { .ftr-grid { gap: 1.5rem .875rem; } .ftr-grid > .ftr-brand { flex: 100%; width: 100%; max-width: 100%; } .ftr-grid > .ftr-col { flex: calc(50% - .5rem); width: calc(50% - .5rem); max-width: calc(50% - .5rem); } .ftr-col h4 { font-size: 1.07rem; } .ftr-col a { font-size: .86rem; } .ftr-socials { max-width: 100%; } } .ftr-logo { margin-bottom: calc(var(--spacing) * 5); } .ftr-logo img { height: calc(var(--spacing) * 10); width: auto; max-width: 100%; } .ftr-tag { --tw-leading: 1.75; max-width: min(100%, 20rem); color: var(--color-footer-muted); margin-bottom: 1.375rem; font-size: .86rem; line-height: 1.75; } .ftr-locale { width: 100%; max-width: 16rem; } .ftr-locale > span { margin-bottom: calc(var(--spacing) * 2.5); --tw-font-weight: var(--font-weight-semibold); font-size: .86rem; font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); color: var(--color-footer-muted); text-transform: uppercase; display: block; } .ftr-locale-btn { align-items: center; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; border-color: #fff3; width: 100%; display: flex; } @supports (color: color-mix(in lab, red, red)) { .ftr-locale-btn { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .ftr-locale-btn { padding-inline: calc(var(--spacing) * 3.5); text-align: left; color: var(--color-header-text); background-color: #2c2c2c; padding-block: .6875rem; font-size: .93rem; } @media (hover: hover) { .ftr-locale-btn:hover { border-color: #fff6; } @supports (color: color-mix(in lab, red, red)) { .ftr-locale-btn:hover { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .ftr-locale-btn:hover { background-color: var(--color-header); } } .ftr-locale-btn .lb-txt { text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; } .ftr-locale-btn .caret { opacity: .7; flex-shrink: 0; width: .7rem; height: .7rem; } .ftr-gsource { border-radius: var(--radius-lg); width: 100%; max-width: min(100%, 16rem); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-leading: 1.3; --tw-font-weight: var(--font-weight-medium); line-height: 1.3; font-weight: var(--font-weight-medium); background-color: #2c2c2c; margin-top: clamp(1rem, 2.8vw, 1.875rem); } .ftr-gsource-row { justify-content: center; align-items: center; gap: calc(var(--spacing) * 5); flex-wrap: wrap; display: flex; } .ftr-gsource-row > img { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; } .ftr-gsource-line { border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-footer-muted); padding-left: calc(var(--spacing) * 5); } .ftr-gsource-line img { height: calc(var(--spacing) * 5); object-fit: contain; width: 4.375rem; max-width: 100%; } .ftr-gsource-see { padding-inline: var(--spacing); padding-block: calc(var(--spacing) * 2.5); text-align: center; color: var(--color-footer-muted); font-size: .79rem; } .ftr-gsource-btn { border-radius: var(--radius-lg); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 2.5); text-align: center; color: var(--color-header); font-size: .86rem; display: block; } @media (hover: hover) { .ftr-gsource-btn:hover { background-color: var(--color-brand); color: var(--color-white); } } .ftr-col { min-width: 0; } .ftr-col h4 { --tw-font-weight: var(--font-weight-bold); font-size: 1.29rem; font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: clamp(.75rem, 2vw, 1.125rem); } .ftr-col ul { flex-direction: column; gap: clamp(.625rem, 1.6vw, 1rem); margin: 0; padding: 0; list-style-type: none; display: flex; } .ftr-col a { overflow-wrap: break-word; color: var(--color-footer-muted); font-size: .93rem; } @media (hover: hover) { .ftr-col a:hover { color: var(--color-white); } } .ftr-downpwa { min-width: 0; } .ftr-app { border-radius: var(--radius-lg); border-style: var(--tw-border-style); background-color: var(--color-brand); --tw-font-weight: var(--font-weight-semibold); max-width: 100%; font-size: 1.07rem; font-weight: var(--font-weight-semibold); color: var(--color-white); border-width: 0; align-items: center; gap: .5625rem; margin-top: 1.375rem; padding-block: .6875rem; padding-inline: 1.125rem; display: inline-flex; } @media (hover: hover) { .ftr-app:hover { background-color: var(--color-brand-dark); color: var(--color-white); } } .ftr-app img { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; } .ftr-follow { margin-top: clamp(1rem, 2.8vw, 1.875rem); } .ftr-follow h5 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-white); text-transform: uppercase; margin-bottom: .875rem; } .ftr-socials { flex-wrap: wrap; gap: clamp(.5rem, 1.3vw, .875rem); max-width: 100%; display: flex; } .ftr-soc { border-style: var(--tw-border-style); border-width: 1px; border-color: #fff3; border-radius: 10px; place-items: center; display: grid; } @supports (color: color-mix(in lab, red, red)) { .ftr-soc { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .ftr-soc { background-color: var(--color-footer); } @media (hover: hover) { .ftr-soc:hover { border-color: #fff6; } @supports (color: color-mix(in lab, red, red)) { .ftr-soc:hover { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .ftr-soc:hover { background-color: var(--color-header); } } .ftr-soc { width: clamp(2.375rem, 6vw, 2.75rem); height: clamp(2.375rem, 6vw, 2.75rem); } .ftr-soc img { object-fit: contain; width: 1.375rem; height: 1.375rem; } .ftr-note { border-top-style: var(--tw-border-style); margin-inline: auto; border-color: #ffffff26; border-top-width: 1px; margin-top: clamp(1.5rem, 3.6vw, 2.5rem); } @supports (color: color-mix(in lab, red, red)) { .ftr-note { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .ftr-note { text-align: center; --tw-leading: 1.7; overflow-wrap: break-word; color: var(--color-footer-muted); padding-top: clamp(.75rem, 1.8vw, 1.25rem); font-size: .93rem; line-height: 1.7; } } @layer utilities { @layer daisyui.l1.l2.l3 { .range { appearance: none; webkit-appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: currentColor; } @supports (color: color-mix(in lab, red, red)) { .range { --range-bg: color-mix(in oklab, currentColor 10%, #0000); } } .range { --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; container-type: inline-size; } [dir="rtl"] .range { --range-dir: -1; } .range:focus { outline: none; } .range:focus-visible { outline-offset: 2px; outline: 2px solid; } .range::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5); } @media (forced-colors: active) { .range::-webkit-slider-runnable-track { border: 1px solid; } .range::-moz-range-track { border: 1px solid; } } .range::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5); } .range::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; appearance: none; webkit-appearance: none; color: var(--range-progress); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%); } @supports (color: color-mix(in lab, red, red)) { .range::-webkit-slider-thumb { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); } } .range::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative; } @supports (color: color-mix(in lab, red, red)) { .range::-moz-range-thumb { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); } } .range:disabled { cursor: not-allowed; opacity: .3; } .modal { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; } .modal::backdrop { display: none; } .modal[popover] { color: inherit; background: none; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; } .modal[popover]::backdrop { background-color: oklch(0% 0 0 / .4); transition: background-color .3s ease-out; } @media (hover: hover) { .tab:is(.tabs > .tab):hover { color: var(--color-base-content); } } @supports (color: color-mix(in lab, red, red)) { .tab:is(.tabs > .tab):not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } @media (forced-colors: active) { .tab:is(.tabs > .tab):focus { outline-offset: 2px; outline: 2px solid #0000; } } @media (hover: hover) { .tab:is(.tabs > .tab):hover { color: var(--color-base-content); } } @supports (color: color-mix(in lab, red, red)) { .tab:is(.tabs > .tab):not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } @media (forced-colors: active) { .tab:is(.tabs > .tab):focus { outline-offset: 2px; outline: 2px solid #0000; } } .tooltip { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-radius: min(var(--radius-field), .8rem); --tt-overlap: clamp(1px, calc(var(--radius-field) / 8), 2px); --tt-tail: calc(100% + var(--tt-overlap) + .25rem); --tt-tail-off: max(.5rem, var(--tt-radius)); display: inline-block; position: relative; } .tooltip > .tooltip-content, .tooltip[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50%; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; font-weight: 400; line-height: 1.25; position: absolute; } .tooltip:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; -webkit-mask-position: -1px 0; mask-position: -1px 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--mask-tooltip); -webkit-mask-image: var(--mask-tooltip); mask-image: var(--mask-tooltip); transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50%; display: block; position: absolute; } @media (prefers-reduced-motion: no-preference) { .tooltip > .tooltip-content, .tooltip[data-tip]:before, .tooltip:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms; } :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)) > .tooltip-content { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1); } } :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)) > .tooltip-content { opacity: 1; --tt-pos: 0rem; } @media (prefers-reduced-motion: no-preference) { :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)) > .tooltip-content, :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before, :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1); } } :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before { opacity: 1; --tt-pos: 0rem; } @media (prefers-reduced-motion: no-preference) { :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before, :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)):after, :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)):after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1); } } :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)):after { opacity: 1; --tt-pos: 0rem; } @media (prefers-reduced-motion: no-preference) { :is(.tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover, .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)):after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1); } } .tabs { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex; } .tab:is(.tabs > .tab) { cursor: pointer; appearance: none; text-align: center; webkit-user-select: none; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; } @media (hover: hover) { .tab:is(.tabs > .tab):hover { color: var(--color-base-content); } } .tab:is(.tabs > .tab) { --tab-p: .75rem; --tab-bg: var(--color-base-100); --tab-border-color: var(--color-base-300); --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: 0; --tab-radius-ee: 0; --tab-order: 0; --tab-radius-min: calc(.75rem - var(--border)); --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad: #0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order: var(--tab-order); height: var(--tab-height); padding-inline: var(--tab-p); border-color: #0000; font-size: .875rem; } .tab:is(.tabs > .tab):is(input[type="radio"]) { min-width: fit-content; } .tab:is(.tabs > .tab):is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } .tab:is(.tabs > .tab):is(label) { position: relative; } .tab:is(.tabs > .tab):is(label) input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0; } :is(.tab:is(.tabs > .tab):checked, .tab:is(.tabs > .tab):is(label:has(:checked)), .tab:is(.tabs > .tab):is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content { display: block; } .tab:is(.tabs > .tab):not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .tab:is(.tabs > .tab):not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .tab:is(.tabs > .tab):not(input):empty { cursor: default; flex-grow: 1; } .tab:is(.tabs > .tab):focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .tab:is(.tabs > .tab):focus { outline-offset: 2px; outline: 2px solid #0000; } } .tab:is(.tabs > .tab):focus-visible, .tab:is(.tabs > .tab):is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid; } .tab:is(.tabs > .tab)[disabled] { pointer-events: none; opacity: .4; } .menu { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; } .menu :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; } .menu :where(li ul, li menu):before { background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; inset-inline-start: 0; position: absolute; top: .75rem; bottom: .75rem; } .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } .menu :where(li:not(.menu-title) > :not(ul, menu, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; -webkit-user-select: none; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid; } .menu :where(li > details > summary) { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .menu :where(li > details > summary) { outline-offset: 2px; outline: 2px solid #0000; } } .menu :where(li > details > summary)::-webkit-details-marker { display: none; } :is(.menu :where(li > details > summary), .menu :where(li > .menu-dropdown-toggle)):after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px; } .menu details { interpolate-size: allow-keywords; overflow: hidden; } .menu details::details-content { block-size: 0; } @media (prefers-reduced-motion: no-preference) { .menu details::details-content { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); } } .menu details[open]::details-content { block-size: auto; } .menu :where(li > details[open] > summary):after, .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg; } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])).menu-focus { cursor: pointer; background-color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])).menu-focus { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])).menu-focus { color: var(--color-base-content); --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])).menu-focus { outline-offset: 2px; outline: 2px solid #0000; } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):focus-visible { cursor: pointer; background-color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):focus-visible { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):focus-visible { color: var(--color-base-content); --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):focus-visible { outline-offset: 2px; outline: 2px solid #0000; } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover) { cursor: pointer; background-color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover) { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover) { outline-offset: 2px; outline: 2px solid #0000; } } .menu :where(li:not(.menu-title, .disabled) > :not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn, [aria-current]:not([aria-current="false"], [aria-current=""])):hover) { box-shadow: inset 0 1px oklch(0% 0 0 / .01), inset 0 -1px oklch(100% 0 0 / .01); } .menu :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem; } .menu :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; } .menu :where(li) .badge { justify-self: flex-end; } .menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn).menu-active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn)[aria-current]:not([aria-current="false"], [aria-current=""]), .menu :where(li) > details > summary:active { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn).menu-active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn)[aria-current]:not([aria-current="false"], [aria-current=""]), .menu :where(li) > details > summary:active { outline-offset: 2px; outline: 2px solid #0000; } } .menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn).menu-active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn)[aria-current]:not([aria-current="false"], [aria-current=""]), .menu :where(li) > details > summary:active { color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } :is(.menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn).menu-active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn)[aria-current]:not([aria-current="false"], [aria-current=""]), .menu :where(li) > details > summary:active):not(:is(.menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn).menu-active, .menu :where(li) > :not(ul, menu, .menu-title, details, .btn)[aria-current]:not([aria-current="false"], [aria-current=""]), .menu :where(li) > details > summary:active):active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); } .menu :where(li).menu-disabled, .menu :where(li) [disabled] { pointer-events: none; color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .menu :where(li).menu-disabled, .menu :where(li) [disabled] { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } .menu .dropdown-content { margin-top: .5rem; padding: .5rem; } .menu .dropdown-content:before { display: none; } .dropdown { position-area: var(--anchor-v, block-end) var(--anchor-h, span-inline-end); display: inline-block; position: relative; } .dropdown > :not(:has( ~ [class*="dropdown-content"])):focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .dropdown > :not(:has( ~ [class*="dropdown-content"])):focus { outline-offset: 2px; outline: 2px solid #0000; } } .dropdown .dropdown-content { position: absolute; } .dropdown.dropdown-close .dropdown-content, .dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, .dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95; } .dropdown[popover] { z-index: 999; } @media (prefers-reduced-motion: no-preference) { .dropdown[popover] { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown; } } @starting-style { .dropdown[popover] { opacity: 0; scale: .95; } } .dropdown .dropdown-content { z-index: 999; } @media (prefers-reduced-motion: no-preference) { .dropdown .dropdown-content { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown; } } @starting-style { .dropdown .dropdown-content { opacity: 0; scale: .95; } } :is(.dropdown:not(.dropdown-close).dropdown-open, .dropdown:not(.dropdown-close):not(.dropdown-hover):focus, .dropdown:not(.dropdown-close):focus-within) > [tabindex]:first-child { pointer-events: none; } :is(.dropdown:not(.dropdown-close).dropdown-open, .dropdown:not(.dropdown-close):not(.dropdown-hover):focus, .dropdown:not(.dropdown-close):focus-within) .dropdown-content, .dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content { opacity: 1; scale: 1; } .dropdown:is(details) { overflow: revert-layer; } .dropdown:is(details) summary::-webkit-details-marker { display: none; } .dropdown:where([popover]) { background: none; } .dropdown[popover] { color: inherit; position: fixed; } @supports not (position-area: bottom) { .dropdown[popover] { margin: auto; } .dropdown[popover].dropdown-close { transform-origin: top; opacity: 0; display: none; scale: .95; } .dropdown[popover].dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95; } .dropdown[popover]::backdrop { background-color: oklab(0% none none / .3); } } :is(.dropdown[popover].dropdown-close, .dropdown[popover]:not(.dropdown-open, :popover-open)) { transform-origin: top; opacity: 0; display: none; scale: .95; } :where(.btn) { width: unset; } .btn { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: var(--btn-color, var(--color-base-200)); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; font-weight: 600; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .btn { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); } } .btn { --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); } @supports (color: color-mix(in lab, red, red)) { .btn { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } } .btn { --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); } .btn:is([type="checkbox"], [type="radio"]) { appearance: none; } .btn:is([type="checkbox"], [type="radio"])[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content); } .btn:where(:checked:not(.filter [type="radio"].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } .\!loading { pointer-events: none !important; aspect-ratio: 1 !important; vertical-align: middle !important; width: calc(var(--size-selector, .25rem) * 6) !important; background-color: currentColor !important; flex-shrink: 0 !important; display: inline-block !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 100% !important; mask-size: 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } @media (prefers-reduced-motion: no-preference) { .\!loading { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important; } } .loading { pointer-events: none; aspect-ratio: 1; vertical-align: middle; width: calc(var(--size-selector, .25rem) * 6); background-color: currentColor; flex-shrink: 0; display: inline-block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { .loading { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } } .countdown { display: inline-flex; } .countdown > * { visibility: hidden; --value-v: calc(mod(max(0, var(--value)), 1000)); --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1)); --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1)); --value-ones: calc(mod(var(--value-v), 100)); --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1); --show-tens: clamp(clamp(0, var(--digits, 1) - 1, 1), var(--value-tens) + var(--show-hundreds), 1); --first-digits: calc(round(to-zero, var(--value-v) / 10, 1)); height: 1em; width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch); direction: ltr; transition: width .4s ease-out .2s; display: inline-block; position: relative; overflow-y: clip; } .countdown > :before, .countdown > :after { visibility: visible; --tw-content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a "; content: var(--tw-content); font-variant-numeric: tabular-nums; white-space: pre; text-align: end; direction: rtl; transition: all 1s cubic-bezier(1, 0, 0, 1), width .2s ease-out .2s, opacity .2s ease-out .2s; position: absolute; overflow-x: clip; } .countdown > :before { width: calc(1ch + var(--show-hundreds) * 1ch); top: calc(var(--first-digits) * -1em); opacity: var(--show-tens); inset-inline-end: 0; } .countdown > :after { width: 1ch; top: calc(var(--value-ones) * -1em); inset-inline-start: 0; } .filter { flex-wrap: wrap; display: flex; } .filter [type="radio"] { width: auto; } .filter input { opacity: 1; transition: visibility .1s allow-discrete, margin .1s, opacity .3s, padding .3s, border-width .1s; overflow: hidden; scale: 1; } .filter input.filter-reset { aspect-ratio: 1; } .filter input.filter-reset:after { --tw-content: "×"; content: var(--tw-content); } .filter > input:not(:last-child), .filter > :not(:last-child) input { margin-inline-end: .25rem; } .list { flex-direction: column; font-size: .875rem; display: flex; } .list .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative; } @supports (color: color-mix(in lab, red, red)) { :is(.list > :not(:last-child).list-row, .list > :not(:last-child) .list-row):after { border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } } :is(.list > :not(:last-child).list-row, .list > :not(:last-child) .list-row):after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: var(--color-base-content); position: absolute; bottom: 0; } @supports (color: color-mix(in lab, red, red)) { :is(.list > :not(:last-child).list-row, .list > :not(:last-child) .list-row):after { border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } } .toast { translate: var(--toast-x, 0) var(--toast-y, 0); inset-inline: auto 1rem; background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; } @media (prefers-reduced-motion: no-preference) { .toast > * { animation: .25s ease-out toast; } } .toggle { border: var(--border) solid currentColor; color: var(--input-color); cursor: pointer; appearance: none; vertical-align: middle; webkit-user-select: none; -webkit-user-select: none; user-select: none; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max))); padding: var(--toggle-p); flex-shrink: 0; grid-template-columns: 0fr 1fr 1fr; place-content: center; display: inline-grid; position: relative; box-shadow: inset 0 1px; } @supports (color: color-mix(in lab, red, red)) { .toggle { box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; } } .toggle { --input-color: var(--color-base-content); transition: color .3s, grid-template-columns .2s; } @supports (color: color-mix(in lab, red, red)) { .toggle { --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000); } } .toggle { --toggle-p: calc(var(--size) * .125); --size: calc(var(--size-selector, .25rem) * 6); width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); height: var(--size); } .toggle > * { z-index: 1; cursor: pointer; appearance: none; background-color: #0000; border: none; grid-column: 2 / span 1; grid-row-start: 1; height: 100%; padding: .125rem; transition: opacity .2s, rotate .4s; } .toggle > :focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .toggle > :focus { outline-offset: 2px; outline: 2px solid #0000; } } .toggle > :nth-child(2) { color: var(--color-base-100); rotate: 0deg; } .toggle > :nth-child(3) { color: var(--color-base-100); opacity: 0; rotate: -15deg; } .toggle:has(:checked) > :nth-child(2) { opacity: 0; rotate: 15deg; } .toggle:has(:checked) > :nth-child(3) { opacity: 1; rotate: 0deg; } .toggle:before { aspect-ratio: 1; border-radius: var(--radius-selector); --tw-content: ""; content: var(--tw-content); width: 100%; height: 100%; box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor; background-color: currentColor; grid-row-start: 1; grid-column-start: 2; transition: background-color .1s, translate .2s, inset-inline-start .2s; position: relative; inset-inline-start: 0; translate: 0; } @supports (color: color-mix(in lab, red, red)) { .toggle:before { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000); } } .toggle:before { background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } @media (forced-colors: active) { .toggle:before { outline-style: var(--tw-outline-style); outline-offset: calc(1px * -1); outline-width: 1px; } } @media print { .toggle:before { outline-offset: -1rem; outline: .25rem solid; } } .toggle:focus-visible, .toggle:has(:focus-visible) { outline-offset: 2px; outline: 2px solid; } .toggle:checked { background-color: var(--color-base-100); --input-color: var(--color-base-content); grid-template-columns: 1fr 1fr 0fr; } .toggle:checked:before { background-color: currentColor; } @starting-style { .toggle:checked:before { opacity: 0; } } .toggle[aria-checked="true"] { background-color: var(--color-base-100); --input-color: var(--color-base-content); grid-template-columns: 1fr 1fr 0fr; } .toggle[aria-checked="true"]:before { background-color: currentColor; } @starting-style { .toggle[aria-checked="true"]:before { opacity: 0; } } .toggle:has( > input:checked) { background-color: var(--color-base-100); --input-color: var(--color-base-content); grid-template-columns: 1fr 1fr 0fr; } .toggle:has( > input:checked):before { background-color: currentColor; } @starting-style { .toggle:has( > input:checked):before { opacity: 0; } } .toggle:indeterminate { grid-template-columns: .5fr 1fr .5fr; } .toggle:disabled { cursor: not-allowed; opacity: .3; } .toggle:disabled:before { border: var(--border) solid currentColor; background-color: #0000; } .input { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul, 10)); --input-color: var(--color-base-content); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; } @supports (color: color-mix(in lab, red, red)) { .input { --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); } } .input { cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min, .875rem)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); } @supports (color: color-mix(in lab, red, red)) { .input { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } } .input input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; } .input input::placeholder { color: var(--color-base-content); opacity: .5; } .input input:focus, .input input:focus-within { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .input input:focus, .input input:focus-within { outline-offset: 2px; outline: 2px solid #0000; } } .input input::-webkit-calendar-picker-indicator { inset-inline-end: -.15em; } .input::-webkit-inner-spin-button { margin-inline-end: -10px; } .input::-webkit-calendar-picker-indicator { inset-inline-end: .75em; } input.input { text-align: start; display: inline-flex; position: relative; } input.input[type="url"], input.input[type="tel"], input.input[type="email"], input.input[type="number"] { direction: ltr; } input.input::-webkit-datetime-edit { min-height: 100%; text-align: inherit; align-items: center; display: grid; } input.input::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid; } input.input::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my, -3)); } input.input::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute; } input.input::-webkit-color-swatch-wrapper { padding-block: .25rem; } .input input { text-align: start; display: inline-flex; position: relative; } .input input[type="url"], .input input[type="tel"], .input input[type="email"], .input input[type="number"] { direction: ltr; } .input input::-webkit-datetime-edit { min-height: 100%; text-align: inherit; align-items: center; display: grid; } .input input::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid; } .input input::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my, -3)); } .input input::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute; } .input input::-webkit-color-swatch-wrapper { padding-block: .25rem; } .input:focus { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); } @supports (color: color-mix(in lab, red, red)) { .input:focus { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } } .input:focus { outline: 2px solid var(--input-color); outline-offset: 2px; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { .input:focus { --font-size: 1rem; } } } .input:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); } @supports (color: color-mix(in lab, red, red)) { .input:focus-within { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } } .input:focus-within { outline: 2px solid var(--input-color); outline-offset: 2px; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { .input:focus-within { --font-size: 1rem; } } } .table { border-collapse: separate; --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; } .table:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } @media (hover: hover) { :is(:is(.table tr.row-hover), .table tr.row-hover:nth-child(2n)):hover { background-color: var(--color-base-200); } } .table :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem; } .table :where(thead, tfoot) { white-space: nowrap; color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .table :where(thead, tfoot) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } .table :where(thead, tfoot) { font-size: .875rem; font-weight: 600; } .table :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .table :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } .table :where(.table-pin-rows thead) { z-index: 1; position: sticky; top: 0; } .table :where(.table-pin-rows tfoot) { z-index: 1; position: sticky; bottom: 0; } .table :where(.table-pin-rows :is(thead, tfoot) tr) { background-color: var(--color-base-100); } .table :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0; } .table :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .table :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } .steps { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; } .steps .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; } .steps .step:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0; } .steps .step > .step-icon, .steps .step:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative; } .steps .step:first-child:before { --tw-content: none; content: var(--tw-content); } .steps .step[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content); } .avatar-group .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden; } .avatar { vertical-align: middle; align-self: center; display: inline-flex; position: relative; } .avatar > div { aspect-ratio: 1; display: block; overflow: hidden; } .avatar img { object-fit: cover; width: 100%; height: 100%; } .checkbox { border: var(--border) solid var(--input-color, var(--color-base-content)); } @supports (color: color-mix(in lab, red, red)) { .checkbox { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } } .checkbox { cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; } .checkbox:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg; } .checkbox:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px; } .checkbox:checked { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); } .checkbox:checked:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1; translate: 3.5% -7%; } @media (forced-colors: active) { .checkbox:checked:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } @media print { .checkbox:checked:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } .checkbox[aria-checked="true"] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); } .checkbox[aria-checked="true"]:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1; translate: 3.5% -7%; } @media (forced-colors: active) { .checkbox[aria-checked="true"]:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } @media print { .checkbox[aria-checked="true"]:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } .checkbox:indeterminate { background-color: var(--input-color, var(--color-base-content)); } @supports (color: color-mix(in lab, red, red)) { .checkbox:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } } .checkbox:indeterminate:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -40%; rotate: 0deg; } .checkbox[aria-checked="mixed"] { background-color: var(--input-color, var(--color-base-content)); } @supports (color: color-mix(in lab, red, red)) { .checkbox[aria-checked="mixed"] { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } } .checkbox[aria-checked="mixed"]:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -40%; rotate: 0deg; } .radio { cursor: pointer; appearance: none; vertical-align: middle; border: var(--border) solid var(--input-color, currentColor); border-radius: 3.40282e38px; flex-shrink: 0; padding: .25rem; display: inline-block; position: relative; } @supports (color: color-mix(in lab, red, red)) { .radio { border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); } } .radio { box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); color: var(--input-color, currentColor); } .radio:before { --tw-content: ""; content: var(--tw-content); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); border-radius: 3.40282e38px; width: 100%; height: 100%; display: block; } .radio:focus-visible { outline: 2px solid; } .radio:checked { background-color: var(--color-base-100); border-color: currentColor; } @media (prefers-reduced-motion: no-preference) { .radio:checked { animation: .2s ease-out radio; } } .radio:checked:before { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); background-color: currentColor; } @media (forced-colors: active) { .radio:checked:before { outline-style: var(--tw-outline-style); outline-offset: calc(1px * -1); outline-width: 1px; } } @media print { .radio:checked:before { outline-offset: -1rem; outline: .25rem solid; } } .radio[aria-checked="true"] { background-color: var(--color-base-100); border-color: currentColor; } @media (prefers-reduced-motion: no-preference) { .radio[aria-checked="true"] { animation: .2s ease-out radio; } } .radio[aria-checked="true"]:before { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); background-color: currentColor; } @media (forced-colors: active) { .radio[aria-checked="true"]:before { outline-style: var(--tw-outline-style); outline-offset: calc(1px * -1); outline-width: 1px; } } @media print { .radio[aria-checked="true"]:before { outline-offset: -1rem; outline: .25rem solid; } } .rating { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; } .rating input { cursor: pointer; appearance: none; } .rating * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; } @media (prefers-reduced-motion: no-preference) { .rating * { animation: .25s ease-out rating; } } .rating .rating-hidden { background-color: #0000; width: .5rem; } .rating :checked, .rating [aria-checked="true"], .rating [aria-current="true"], .rating :has( ~ :checked, ~ [aria-checked="true"], ~ [aria-current="true"]) { opacity: 1; } .rating :focus-visible { scale: 1.1; } @media (prefers-reduced-motion: no-preference) { .rating :focus-visible { transition: scale .2s ease-out; } } .rating :active:focus { animation: none; scale: 1.1; } .card { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; } .card:focus-visible, .card[aria-checked="true"], .card:has( > :checked, > :is([type="checkbox"], [type="radio"]):focus-visible) { outline-color: currentColor; } .card:has( > :checked:focus-visible), .card[aria-checked="true"]:focus-visible, .card[aria-checked="true"]:has( > :is([type="checkbox"], [type="radio"]):focus-visible) { outline-width: 4px; } .card:has( > :is([type="checkbox"], [type="radio"])) { cursor: pointer; -webkit-user-select: none; user-select: none; } .card > :is([type="checkbox"], [type="radio"]) { appearance: none; } .stats { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto; } .progress { appearance: none; border-radius: var(--radius-box); background-color: currentColor; width: 100%; height: .5rem; position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .progress { background-color: color-mix(in oklab, currentcolor 20%, transparent); } } .progress { color: var(--color-base-content); } .progress:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; } @media (prefers-reduced-motion: no-preference) { .progress:indeterminate { animation: 5s ease-in-out infinite progress; } } @supports ((-moz-appearance: none)) { .progress:indeterminate::-moz-progress-bar { background-color: #0000; } @media (prefers-reduced-motion: no-preference) { .progress:indeterminate::-moz-progress-bar { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress; } } .progress::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; } @media (prefers-reduced-motion: no-preference) { .progress::-moz-progress-bar { transition: inline-size .3s; } } } @supports ((-webkit-appearance: none)) { .progress::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000; } .progress::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; } @media (prefers-reduced-motion: no-preference) { .progress::-webkit-progress-value { transition: inline-size .3s; } } } .textarea { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: var(--color-base-content); flex-shrink: 1; min-height: 5rem; padding-block: .5rem; padding-inline: .75rem; } @supports (color: color-mix(in lab, red, red)) { .textarea { --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); } } .textarea { width: clamp(3rem, 20rem, 100%); font-size: max(var(--font-size, 0rem), var(--font-size-min, .875rem)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } @supports (color: color-mix(in lab, red, red)) { .textarea { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } } .textarea textarea { appearance: none; background-color: #0000; border: none; } .textarea textarea::placeholder { color: var(--color-base-content); opacity: .5; } .textarea textarea:focus, .textarea textarea:focus-within { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .textarea textarea:focus, .textarea textarea:focus-within { outline-offset: 2px; outline: 2px solid #0000; } } .textarea:focus { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); } @supports (color: color-mix(in lab, red, red)) { .textarea:focus { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } } .textarea:focus { outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { .textarea:focus { --font-size: 1rem; } } } .textarea:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); } @supports (color: color-mix(in lab, red, red)) { .textarea:focus-within { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } } .textarea:focus-within { outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { .textarea:focus-within { --font-size: 1rem; } } } .stack { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; } .stack > * { width: 100%; height: 100%; } .stack > :nth-child(n+2) { opacity: .7; width: 100%; } .stack > :nth-child(2) { z-index: 2; opacity: .9; } .stack > :first-child { z-index: 3; width: 100%; } .tab-content { order: var(--tabcontent-order); --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none; } .hero { background-position: center; background-size: cover; place-items: center; width: 100%; display: grid; } .hero > * { grid-row-start: 1; grid-column-start: 1; } .label { white-space: nowrap; color: currentColor; align-items: center; gap: .375rem; display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .label { color: color-mix(in oklab, currentcolor 60%, transparent); } } .label:has(input) { cursor: pointer; } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } .label:is(.input > *, .select > *) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; } .label:is(.input > *, .select > *):first-child { border-inline-end: var(--border) solid currentColor; margin-inline: -.75rem .75rem; } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } .label:is(.input > *, .select > *):last-child { border-inline-start: var(--border) solid currentColor; margin-inline: .75rem -.75rem; } @supports (color: color-mix(in lab, red, red)) { .label:is(.input > *, .select > *):last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } .carousel-item { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex; } .status { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: var(--color-base-content); display: inline-block; } @supports (color: color-mix(in lab, red, red)) { .status { background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } .status { vertical-align: middle; color: #0000004d; background-position: center; background-repeat: no-repeat; } @supports (color: color-mix(in lab, red, red)) { .status { color: color-mix(in oklab, var(--color-black) 30%, transparent); } } .status { --size: calc(var(--size-selector, .25rem) * 2); width: var(--size); height: var(--size); background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px; } @supports (color: color-mix(in lab, red, red)) { .status { box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); } } .badge { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); flex-shrink: 0; justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex; } .footer { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; } .footer > :not(script, style, template) { place-items: start; gap: .5rem; display: grid; } .carousel { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; } @media (prefers-reduced-motion: no-preference) { .carousel { scroll-behavior: smooth; } } .carousel::-webkit-scrollbar { display: none; } .chat { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid; } .mask { vertical-align: middle; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .menu .dropdown:focus-within .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg; } .skeleton { border-radius: var(--radius-box); background-color: var(--color-base-300); will-change: background-position; background-image: linear-gradient(105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%); background-position-x: -50%; background-size: 200%; } @media (prefers-reduced-motion: reduce) { .skeleton { transition-duration: 15s; } } @media (prefers-reduced-motion: no-preference) { .skeleton { animation: 1.8s ease-in-out infinite skeleton; } .skeleton:dir(rtl) { animation-direction: reverse; } } .link { cursor: pointer; text-decoration-line: underline; } .link:focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .link:focus { outline-offset: 2px; outline: 2px solid #0000; } } .link:focus-visible { outline-offset: 2px; outline: 2px solid; } .aura:has( > .card, > .alert) { --aura-radius: var(--radius-box); } .aura:has( > .btn, > .input, > .select) { --aura-radius: var(--radius-field); } .aura:has( > .checkbox, > .toggle, > .badge) { --aura-radius: var(--radius-selector); } .collapse:not(td, tr, colgroup) { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; } @media (prefers-reduced-motion: no-preference) { .collapse:not(td, tr, colgroup) { transition: grid-template-rows .2s; } } .collapse:not(td, tr, colgroup) > input:is([type="checkbox"], [type="radio"]) { appearance: none; opacity: 0; z-index: 1; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding: 1rem; padding-inline-end: 3rem; transition: background-color .2s ease-out; } .collapse:not(td, tr, colgroup):is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), .collapse:not(td, tr, colgroup):not(.collapse-close):has( > input:is([type="checkbox"], [type="radio"]):checked) { grid-template-rows: max-content 1fr; } .collapse:not(td, tr, colgroup):is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > .collapse-content, .collapse:not(td, tr, colgroup):not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; } @supports not (content-visibility: visible) { .collapse:not(td, tr, colgroup):is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > .collapse-content, .collapse:not(td, tr, colgroup):not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { visibility: visible; } } .collapse:not(td, tr, colgroup):focus-visible, .collapse:not(td, tr, colgroup):has( > input:is([type="checkbox"], [type="radio"]):focus-visible), .collapse:not(td, tr, colgroup):has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid; } .collapse:not(td, tr, colgroup):not(.collapse-close) > input[type="checkbox"], .collapse:not(td, tr, colgroup):not(.collapse-close) > input[type="radio"]:not(:checked), .collapse:not(td, tr, colgroup):not(.collapse-close) > .collapse-title { cursor: pointer; } :is(.collapse:not(td, tr, colgroup)[tabindex]:focus:not(.collapse-close, .collapse[open]), .collapse:not(td, tr, colgroup)[tabindex]:focus-within:not(.collapse-close, .collapse[open])) > .collapse-title { cursor: unset; } .collapse:not(td, tr, colgroup):is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content), .collapse:not(td, tr, colgroup):not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { padding-bottom: 1rem; } .collapse:not(td, tr, colgroup):is(details) { width: 100%; } .collapse:not(td, tr, colgroup):is(details)::details-content { --overflow-delay: 0s; height: 0; overflow: clip; } .collapse:not(td, tr, colgroup):is(details):where([open])::details-content { overflow: revert-layer; height: auto; } @media (prefers-reduced-motion: no-preference) { .collapse:not(td, tr, colgroup):is(details)::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords; } .collapse:not(td, tr, colgroup):is(details):where([open])::details-content { --overflow-delay: .2s; } } .collapse:not(td, tr, colgroup):is(details) > summary { outline: none; display: block; position: relative; } .collapse:not(td, tr, colgroup):is(details) > summary::-webkit-details-marker { display: none; } .alert { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; } @supports (color: color-mix(in lab, red, red)) { .alert { box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); } } .alert:has( > :nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr); } } @layer daisyui.l1.l2 { .diff { webkit-user-select: none; -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; } .diff:focus-visible, .diff:has(.diff-item-1:focus-visible), .diff:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); } .diff:focus-visible .diff-resizer { min-width: 95cqi; max-width: 95cqi; } .diff:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; } .diff:has(.diff-item-1:focus-visible) .diff-resizer { min-width: 5cqi; max-width: 5cqi; } .diff:hover .diff-item-2:after { height: 2.4rem; } @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { .diff:focus .diff-resizer { min-width: 5cqi; max-width: 5cqi; } } @supports ((-moz-appearance: none)) { @media (hover: none) and (pointer: coarse) { .diff:focus .diff-resizer { min-width: 5cqi; max-width: 5cqi; } } } @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { .diff:has(.diff-item-1:focus) .diff-resizer { min-width: 95cqi; max-width: 95cqi; } } @supports ((-moz-appearance: none)) { @media (hover: none) and (pointer: coarse) { .diff:has(.diff-item-1:focus) .diff-resizer { min-width: 95cqi; max-width: 95cqi; } } } .modal.modal-open { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); } .modal.modal-open > .modal-box { opacity: 1; translate: 0; scale: 1; } :root:has(.modal.modal-open) { --page-scroll-lock: ; } @starting-style { .modal.modal-open { opacity: 0; } } .modal[open] { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); } .modal[open] > .modal-box { opacity: 1; translate: 0; scale: 1; } :root:has(.modal[open]) { --page-scroll-lock: ; } @starting-style { .modal[open] { opacity: 0; } } .modal:popover-open { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); } .modal:popover-open > .modal-box { opacity: 1; translate: 0; scale: 1; } :root:has(.modal:popover-open) { --page-scroll-lock: ; } @starting-style { .modal:popover-open { opacity: 0; } } .modal:target { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); } .modal:target > .modal-box { opacity: 1; translate: 0; scale: 1; } :root:has(.modal:target) { --page-scroll-lock: ; } @starting-style { .modal:target { opacity: 0; } } .modal-toggle:checked + .modal { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); } .modal-toggle:checked + .modal > .modal-box { opacity: 1; translate: 0; scale: 1; } :root:has(.modal-toggle:checked + .modal) { --page-scroll-lock: ; } @starting-style { .modal-toggle:checked + .modal { opacity: 0; } } .tabs-border > .tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; } .tabs-border > .tab:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute; } :is(.tabs-border > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-border > .tab:is(input:checked), .tabs-border > .tab:is(label:has(:checked))):before { --tab-border-color: currentColor; border-top: 3px solid; } .tabs-lift > .tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); } .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); } :is(.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked))):before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute; } :is(.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked))):first-child:before { --radius-start: none; } [dir="rtl"] :is(.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked))):first-child:before { transform: rotateY(180deg); } :is(.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked))):last-child:before { --radius-end: none; } [dir="rtl"] :is(.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-lift > .tab:is(input:checked, label:has(:checked))):last-child:before { transform: rotateY(180deg); } .tabs-top > .tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; } .tabs-top > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-top > .tab:is(input:checked), .tabs-top > .tab:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); } .tabs-bottom > .tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; } .tabs-bottom > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(.tab-disabled, [disabled]), .tabs-bottom > .tab:is(input:checked), .tabs-bottom > .tab:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)); } .tabs-box > .tab { border-radius: var(--radius-field); border-style: none; } .tabs-box > .tab:focus-visible, .tabs-box > .tab:is(label:has(:checked:focus-visible)) { outline-offset: 2px; } .tabs-box > .tab:focus-visible { z-index: 1; } .tabs-xs > .tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem; } .tabs-sm > .tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem; } .tabs-md > .tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem; } .tabs-lg > .tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem; } .tabs-xl > .tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem; } .btn:is([aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-bg: var(--btn-color, var(--color-base-200)); } @supports (color: color-mix(in lab, red, red)) { .btn:is([aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); } } .btn:is([aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { color: var(--btn-fg, var(--color-base-content)); --btn-border: var(--btn-color, var(--color-base-200)); } @supports (color: color-mix(in lab, red, red)) { .btn:is([aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } .btn:is([aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0 / 0); --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0); isolation: isolate; } .list .list-row:has( > .list-col-grow:first-child) { --list-grid-cols: 1fr; } .list .list-row:has( > .list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr; } .list .list-row:has( > .list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; } .list .list-row:has( > .list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } .list .list-row:has( > .list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } .list .list-row:has( > .list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } .list .list-row > * { grid-row-start: 1; } .input:has( > input[disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); } .input:has( > input[disabled]):is(input), .input:has( > input[disabled]) :is(input) { color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .input:has( > input[disabled]):is(input), .input:has( > input[disabled]) :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .input:has( > input[disabled]) { box-shadow: none; } .input:has( > input[disabled])::placeholder, .input:has( > input[disabled]) ::placeholder { color: var(--color-base-content); opacity: .2; } .input:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); } .input:is(:disabled, [disabled]):is(input), .input:is(:disabled, [disabled]) :is(input) { color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .input:is(:disabled, [disabled]):is(input), .input:is(:disabled, [disabled]) :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .input:is(:disabled, [disabled]) { box-shadow: none; } .input:is(:disabled, [disabled])::placeholder, .input:is(:disabled, [disabled]) ::placeholder { color: var(--color-base-content); opacity: .2; } fieldset:disabled .input { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); } fieldset:disabled .input:is(input), fieldset:disabled .input :is(input) { color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { fieldset:disabled .input:is(input), fieldset:disabled .input :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } fieldset:disabled .input { box-shadow: none; } fieldset:disabled .input::placeholder, fieldset:disabled .input ::placeholder { color: var(--color-base-content); opacity: .2; } .input:has( > input[disabled]) > input[disabled] { cursor: not-allowed; } .steps-horizontal .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; } .steps-horizontal .step:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0; } [dir="rtl"] :is(.steps-horizontal .step):before { translate: 0; } .steps-vertical .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; } .steps-vertical .step:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50%; } [dir="rtl"] :is(.steps-vertical .step):before { translate: 50% -50%; } .steps .step-neutral + .step-neutral:before, .steps .step-neutral:after, .steps .step-neutral > .step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content); } .steps .step-primary + .step-primary:before, .steps .step-primary:after, .steps .step-primary > .step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content); } .steps .step-secondary + .step-secondary:before, .steps .step-secondary:after, .steps .step-secondary > .step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content); } .steps .step-accent + .step-accent:before, .steps .step-accent:after, .steps .step-accent > .step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content); } .steps .step-info + .step-info:before, .steps .step-info:after, .steps .step-info > .step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content); } .steps .step-success + .step-success:before, .steps .step-success:after, .steps .step-success > .step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content); } .steps .step-warning + .step-warning:before, .steps .step-warning:after, .steps .step-warning > .step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content); } .steps .step-error + .step-error:before, .steps .step-error:after, .steps .step-error > .step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content); } .checkbox:disabled, .radio:disabled { cursor: not-allowed; opacity: .2; } .dropdown-center { --anchor-h: center; } .dropdown-center :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; } [dir="rtl"] :is(.dropdown-center :where(.dropdown-content)) { translate: -50%; } .dropdown-center.dropdown-left { --anchor-h: left; --anchor-v: center; } .dropdown-center.dropdown-left .dropdown-content { top: auto; bottom: 50%; translate: 0 50%; } .dropdown-center.dropdown-right { --anchor-h: right; --anchor-v: center; } .dropdown-center.dropdown-right .dropdown-content { top: auto; bottom: 50%; translate: 0 50%; } .textarea:has( > textarea[disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .textarea:has( > textarea[disabled]) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .textarea:has( > textarea[disabled]) { box-shadow: none; } .textarea:has( > textarea[disabled])::placeholder, .textarea:has( > textarea[disabled]) ::placeholder { color: var(--color-base-content); opacity: .2; } .textarea:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .textarea:is(:disabled, [disabled]) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .textarea:is(:disabled, [disabled]) { box-shadow: none; } .textarea:is(:disabled, [disabled])::placeholder, .textarea:is(:disabled, [disabled]) ::placeholder { color: var(--color-base-content); opacity: .2; } .textarea:has( > textarea[disabled]) > textarea[disabled] { cursor: not-allowed; } :is(.stack, .stack.stack-bottom) > * { grid-area: 3 / 3 / 6 / 4; } :is(.stack, .stack.stack-bottom) > :nth-child(2) { grid-area: 2 / 2 / 5 / 5; } :is(.stack, .stack.stack-bottom) > :first-child { grid-area: 1 / 1 / 4 / 6; } .stack.stack-top > * { grid-area: 1 / 3 / 4 / 4; } .stack.stack-top > :nth-child(2) { grid-area: 2 / 2 / 5 / 5; } .stack.stack-top > :first-child { grid-area: 3 / 1 / 6 / 6; } .stack.stack-start > * { grid-area: 3 / 1 / 4 / 4; } .stack.stack-start > :nth-child(2) { grid-area: 2 / 2 / 5 / 5; } .stack.stack-start > :first-child { grid-area: 1 / 3 / 6 / 6; } .stack.stack-end > * { grid-area: 3 / 3 / 4 / 6; } .stack.stack-end > :nth-child(2) { grid-area: 2 / 2 / 5 / 5; } .stack.stack-end > :first-child { grid-area: 1 / 1 / 6 / 4; } .tabs-lift:has( > .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); } .tabs-lift > .tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); } :is(.tabs-lift :checked, .tabs-lift label:has(:checked), .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content:first-child, :is(.tabs-lift :checked, .tabs-lift label:has(:checked), .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box); } .tabs-top:has( > .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); } .tabs-top > .tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); } :is(.tabs-top :checked, .tabs-top label:has(:checked), .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content:first-child, :is(.tabs-top :checked, .tabs-top label:has(:checked), .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box); } .tabs-bottom:has( > .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); } .tabs-bottom > .tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box); } :is(.tabs-bottom > :checked, .tabs-bottom > :is(label:has(:checked)), .tabs-bottom > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"])) + .tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box); } .tabs-box > .tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem; } .carousel-start .carousel-item { scroll-snap-align: start; } .carousel-center .carousel-item { scroll-snap-align: center; } .carousel-end .carousel-item { scroll-snap-align: end; } .alert-success { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success); } .btn-primary { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial; } .btn-secondary { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial; } .btn-sm { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8); } .btn-success { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial; } @media (prefers-reduced-motion: no-preference) { .collapse:not(td, tr, colgroup)[open].collapse-arrow > .collapse-title:after, .collapse:not(td, tr, colgroup).collapse-open.collapse-arrow > .collapse-title:after { transform: translateY(-50%) rotate(225deg); } } .collapse:not(td, tr, colgroup).collapse-open.collapse-plus > .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } :is(.collapse:not(td, tr, colgroup)[tabindex].collapse-arrow:focus:not(.collapse-close), .collapse:not(td, tr, colgroup).collapse-arrow[tabindex]:focus-within:not(.collapse-close)) > .collapse-title:after, .collapse:not(td, tr, colgroup).collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { transform: translateY(-50%) rotate(225deg); } .collapse:not(td, tr, colgroup)[open].collapse-plus > .collapse-title:after, .collapse:not(td, tr, colgroup)[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after, .collapse:not(td, tr, colgroup).collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } } .prose :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration-line: none; } @layer daisyui.l1 { @media (hover: hover) { .btn:hover { --btn-bg: var(--btn-color, var(--color-base-200)); } @supports (color: color-mix(in lab, red, red)) { .btn:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } .btn:hover { color: var(--btn-fg); --btn-border: var(--btn-bg); } @supports (color: color-mix(in lab, red, red)) { .btn:hover { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } } .btn:hover { --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); } @supports (color: color-mix(in lab, red, red)) { .btn:hover { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } } } .btn:active:not(.btn-active, [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-bg: var(--btn-color, var(--color-base-200)); translate: 0 .5px; } @supports (color: color-mix(in lab, red, red)) { .btn:active:not(.btn-active, [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); } } .btn:active:not(.btn-active, [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { color: var(--btn-fg, var(--color-base-content)); --btn-border: var(--btn-color, var(--color-base-200)); } @supports (color: color-mix(in lab, red, red)) { .btn:active:not(.btn-active, [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } .btn:active:not(.btn-active, [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"], [aria-current=""])) { --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0 / 0); --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0); } .btn:where(:checked:not(.filter [type="radio"].btn), :not([type="radio"], [type="checkbox"]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: var(--btn-bg); } @supports (color: color-mix(in lab, red, red)) { .btn:where(:checked:not(.filter [type="radio"].btn), :not([type="radio"], [type="checkbox"]):focus-visible) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } } .btn:where(:checked:not(.filter [type="radio"].btn), :not([type="radio"], [type="checkbox"]):focus-visible) { --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); } @supports (color: color-mix(in lab, red, red)) { .btn:where(:checked:not(.filter [type="radio"].btn), :not([type="radio"], [type="checkbox"]):focus-visible) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } } .btn:where(:checked:not(.filter [type="radio"].btn), :not([type="radio"], [type="checkbox"]):focus-visible) { isolation: isolate; } .btn:focus-visible, .btn:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid; } .filter:not(:has(:checked:not(.filter-reset))) :is(.filter-reset, [type="reset"]):not(:focus-visible) { visibility: hidden; opacity: 0; border-width: 0; width: 0; margin-inline: 0; padding-inline: 0; scale: 0; } .filter:not(:has(:focus-visible)):has(:checked:not(.filter-reset, [type="checkbox"])) :is(input, button):not(:checked, .filter-reset, [type="reset"]) { opacity: 0; border-width: 0; width: 0; margin-inline: 0; padding-inline: 0; scale: 0; } } @layer daisyui { .btn:is(:disabled, [disabled], [aria-disabled="true"]) { pointer-events: none; color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { .btn:is(:disabled, [disabled], [aria-disabled="true"]) { color: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } .btn:is(:disabled, [disabled], [aria-disabled="true"]) { --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0 / 0); --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0); background-image: none; } :is(.btn-disabled, .btn:is(:disabled, [disabled], [aria-disabled="true"])):not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :is(.btn-disabled, .btn:is(:disabled, [disabled], [aria-disabled="true"])):not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } } .pointer-events-none { pointer-events: none; } .countdown.countdown { line-height: 1em; } .collapse:not(td, tr, colgroup) { visibility: revert-layer; } .collapse { visibility: collapse; } .visible { visibility: visible; } :is(.input[type="url"], .input[type="tel"], .input[type="email"], .input[type="number"]):dir(rtl) { border-start-start-radius: var(--join-se, var(--radius-field)); border-start-end-radius: var(--join-ss, var(--radius-field)); border-end-end-radius: var(--join-es, var(--radius-field)); border-end-start-radius: var(--join-ee, var(--radius-field)); } .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } @layer daisyui.l1.l2.l3.l4 { .card figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden; } .card figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden; } .card figure { justify-content: center; align-items: center; display: flex; } } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .start-0 { inset-inline-start: calc(var(--spacing) * 0); } .start-1\/2 { inset-inline-start: 50%; } .start-50 { inset-inline-start: calc(var(--spacing) * 50); } .end-0 { inset-inline-end: calc(var(--spacing) * 0); } .top-0 { top: 0; } .top-1\/2 { top: 50%; } .top-3 { top: calc(var(--spacing) * 3); } .top-50 { top: calc(var(--spacing) * 50); } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-ml: 0; --join-mt: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; } @scope (.join) { :scope > :where(:focus, :has(:focus)) { z-index: 2; } @media (hover: hover) { :scope > :where(.btn:hover, :has(.btn:hover)) { z-index: 1; } } :scope :where(:scope > :first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0; } :scope :where(:scope > :last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field); } :scope :where(:scope > :only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } :scope :where(:scope > :not(:first-child)) { --join-ml: calc(var(--border, 1px) * -1 * var(--join-h)); --join-mt: calc(var(--border, 1px) * -1 * var(--join-v)); } } .z-0 { z-index: 0; } .z-\[1\] { z-index: 1; } .z-\[5\] { z-index: 5; } .z-\[60\] { z-index: 60; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .col-1 { grid-column: 1; } .col-2 { grid-column: 2; } .col-3 { grid-column: 3; } .col-4 { grid-column: 4; } .col-5 { grid-column: 5; } .col-6 { grid-column: 6; } .col-7 { grid-column: 7; } .col-8 { grid-column: 8; } .col-12 { grid-column: 12; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .m-0 { margin: 0; } .m-2 { margin: calc(var(--spacing) * 2); } .m-448 { margin: calc(var(--spacing) * 448); } .m-auto { margin: auto; } .mx-1 { margin-inline: var(--spacing); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-3 { margin-inline: calc(var(--spacing) * 3); } .mx-auto { margin-inline: auto; } .my-4 { margin-block: calc(var(--spacing) * 4); } .ms-1 { margin-inline-start: var(--spacing); } .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } .ms-3 { margin-inline-start: calc(var(--spacing) * 3); } .me-1 { margin-inline-end: var(--spacing); } .me-2 { margin-inline-end: calc(var(--spacing) * 2); } .me-3 { margin-inline-end: calc(var(--spacing) * 3); } .me-4 { margin-inline-end: calc(var(--spacing) * 4); } .me-5 { margin-inline-end: calc(var(--spacing) * 5); } .me-auto { margin-inline-end: auto; } .-mt-px { margin-top: -1px; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-2\.5 { margin-bottom: calc(var(--spacing) * 2.5); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-3\.5 { margin-bottom: calc(var(--spacing) * 3.5); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-7 { margin-bottom: calc(var(--spacing) * 7); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .-ml-px { margin-left: -1px; } .ml-1 { margin-left: var(--spacing); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-12 { margin-left: calc(var(--spacing) * 12); } .ml-auto { margin-left: auto; } .alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); } :root .prose { --tw-prose-body: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); } } :root .prose { --tw-prose-headings: var(--color-base-content); --tw-prose-lead: var(--color-base-content); --tw-prose-links: var(--color-base-content); --tw-prose-bold: var(--color-base-content); --tw-prose-counters: var(--color-base-content); --tw-prose-bullets: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); } } :root .prose { --tw-prose-hr: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); } } :root .prose { --tw-prose-quotes: var(--color-base-content); --tw-prose-quote-borders: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } } :root .prose { --tw-prose-captions: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000); } } :root .prose { --tw-prose-code: var(--color-base-content); --tw-prose-pre-code: var(--color-neutral-content); --tw-prose-pre-bg: var(--color-neutral); --tw-prose-th-borders: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000); } } :root .prose { --tw-prose-td-borders: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } } :root .prose { --tw-prose-kbd: var(--color-base-content); } @supports (color: color-mix(in lab, red, red)) { :root .prose { --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000); } } :root .prose :where(code):not(pre > code) { background-color: var(--color-base-200); border-radius: var(--radius-selector); border: var(--border) solid var(--color-base-300); font-weight: inherit; padding-block: .2em; padding-inline: .5em; } :root .prose :where(code):not(pre > code):before, :root .prose :where(code):not(pre > code):after { display: none; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .list-item { display: list-item; } .table { display: table; } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-caret { width: var(--size-caret); height: var(--size-caret); } .size-search-btn { width: var(--size-search-btn); height: var(--size-search-btn); } .h-5 { height: calc(var(--spacing) * 5); } .h-8 { height: calc(var(--spacing) * 8); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-75 { height: calc(var(--spacing) * 75); } .h-100 { height: calc(var(--spacing) * 100); } .h-auto { height: auto; } .h-ctl { height: var(--height-ctl); } .h-full { height: 100%; } .h-logo-hdr { height: var(--height-logo-hdr); } .min-h-11 { min-height: calc(var(--spacing) * 11); } .min-h-dvh { min-height: 100dvh; } .min-h-screen { min-height: 100vh; } .w-5 { width: calc(var(--spacing) * 5); } .w-8 { width: calc(var(--spacing) * 8); } .w-50 { width: calc(var(--spacing) * 50); } .w-100 { width: calc(var(--spacing) * 100); } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-6xl { max-width: var(--container-6xl); } .max-w-\[12rem\] { max-width: 12rem; } .max-w-\[20rem\] { max-width: 20rem; } .max-w-full { max-width: 100%; } .max-w-mall { max-width: var(--max-width-mall); } .max-w-md { max-width: var(--container-md); } .max-w-svc { max-width: var(--max-width-svc); } .max-w-xl { max-width: var(--container-xl); } .min-w-0 { min-width: 0; } .min-w-menu { min-width: var(--min-width-menu); } .min-w-notif { min-width: var(--min-width-notif); } .flex-1 { flex: 1; } .flex-shrink-0, .shrink-0 { flex-shrink: 0; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-0 { --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .rotate-180 { rotate: 180deg; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .list-disc { list-style-type: disc; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .justify-items-center { justify-items: center; } .gap-0 { gap: 0; } .gap-1 { gap: var(--spacing); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-gap-hdr { column-gap: var(--spacing-gap-hdr); } .gap-x-gap-hdr-xs { column-gap: var(--spacing-gap-hdr-xs); } .gap-y-1 { row-gap: var(--spacing); } .gap-y-gap-hdr-sm { row-gap: var(--spacing-gap-hdr-sm); } .self-stretch { align-self: stretch; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .overflow-y-scroll { overflow-y: scroll; } .rounded { border-radius: .25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-\[0\.625rem\] { border-radius: .625rem; } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-3 { border-style: var(--tw-border-style); border-width: 3px; } .border-5 { border-style: var(--tw-border-style); border-width: 5px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-border { border-color: var(--color-border); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-400 { border-color: var(--color-gray-400); } .bg-\[\#f6f6f6\] { background-color: #f6f6f6; } .bg-\[\#fce9e9\] { background-color: #fce9e9; } .bg-background { background-color: var(--color-background); } .bg-border { background-color: var(--color-border); } .bg-brand { background-color: var(--color-brand); } .bg-card { background-color: var(--color-card); } .bg-footer { background-color: var(--color-footer); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-header { background-color: var(--color-header); } .bg-secondary { background-color: var(--color-secondary); } .bg-transparent { background-color: #0000; } .bg-white { background-color: var(--color-white); } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-\[\#fff3f1\] { --tw-gradient-from: #fff3f1; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-white { --tw-gradient-from: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .via-\[\#fcfafa\] { --tw-gradient-via: #fcfafa; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-background { --tw-gradient-to: var(--color-background); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .p-0 { padding: 0; } .p-1 { padding: var(--spacing); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .px-0 { padding-inline: 0; } .px-1 { padding-inline: var(--spacing); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-\[var\(--spacing-gutter\,1\.25rem\)\] { padding-inline: var(--spacing-gutter, 1.25rem); } .px-gutter { padding-inline: var(--spacing-gutter); } .py-0 { padding-block: 0; } .py-1 { padding-block: var(--spacing); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-16 { padding-block: calc(var(--spacing) * 16); } .ps-0 { padding-inline-start: 0; } .ps-3 { padding-inline-start: calc(var(--spacing) * 3); } .ps-5 { padding-inline-start: calc(var(--spacing) * 5); } .pe-0 { padding-inline-end: 0; } .pt-0 { padding-top: 0; } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pr-1 { padding-right: var(--spacing); } .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--spacing); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pl-search-pl { padding-left: var(--spacing-search-pl); } .text-center { text-align: center; } .text-end { text-align: end; } .text-start { text-align: start; } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[0\.9375rem\] { font-size: .9375rem; } .text-\[13\.5px\] { font-size: 13.5px; } .text-hdr-sm { font-size: var(--text-hdr-sm); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[0\.1em\] { --tw-tracking: .1em; letter-spacing: .1em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .text-nowrap { text-wrap: nowrap; } .whitespace-nowrap { white-space: nowrap; } .text-\[\#0066cc\] { color: #06c; } .text-\[\#333\] { color: #333; } .text-\[\#666\] { color: #666; } .text-\[\#999\] { color: #999; } .text-\[\#707070\] { color: #707070; } .text-\[\#fca43c\] { color: #fca43c; } .text-black { color: var(--color-black); } .text-brand { color: var(--color-brand); } .text-footer-muted { color: var(--color-footer-muted); } .text-foreground { color: var(--color-foreground); } .text-gray-200 { color: var(--color-gray-200); } .text-gray-300 { color: var(--color-gray-300); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-900 { color: var(--color-gray-900); } .text-ink-2 { color: var(--color-ink-2); } .text-muted { color: var(--color-muted); } .text-muted-foreground { color: var(--color-muted-foreground); } .text-primary { color: var(--color-primary); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-white { color: var(--color-white); } .uppercase { text-transform: uppercase; } .no-underline, .prose :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration-line: none; } .underline { text-decoration-line: underline; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-60 { opacity: .6; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-gray-300 { --tw-ring-color: var(--color-gray-300); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .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, ); } .invert { --tw-invert: invert(100%); 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, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-150 { --tw-duration: .15s; transition-duration: .15s; } .duration-300 { --tw-duration: .3s; transition-duration: .3s; } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .placeholder\:text-muted-foreground::placeholder { color: var(--color-muted-foreground); } @media (hover: hover) { .hover\:bg-brand-dark:hover { background-color: var(--color-brand-dark); } .hover\:bg-muted:hover { background-color: var(--color-muted); } .hover\:text-foreground:hover { color: var(--color-foreground); } .hover\:text-gray-400:hover { color: var(--color-gray-400); } .hover\:text-gray-500:hover { color: var(--color-gray-500); } .hover\:text-white:hover { color: var(--color-white); } .hover\:opacity-90:hover { opacity: .9; } } .focus\:z-10:focus { z-index: 10; } .focus\:border-blue-300:focus { border-color: var(--color-blue-300); } .focus\:ring:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .active\:bg-gray-100:active { background-color: var(--color-gray-100); } .active\:text-gray-500:active { color: var(--color-gray-500); } .active\:text-gray-700:active { color: var(--color-gray-700); } .disabled\:opacity-50:disabled { opacity: .5; } @media (min-width: 40rem) { .sm\:flex { display: flex; } .sm\:hidden { display: none; } .sm\:flex-1 { flex: 1; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:items-center { align-items: center; } .sm\:justify-between { justify-content: space-between; } .sm\:justify-start { justify-content: flex-start; } .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } .sm\:pt-0 { padding-top: 0; } } @media (min-width: 48rem) { .md\:order-2 { order: 2; } .md\:order-3 { order: 3; } .md\:ms-search { margin-inline-start: var(--spacing-search); } .md\:mb-6 { margin-bottom: calc(var(--spacing) * 6); } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:max-w-lg { max-width: var(--container-lg); } .md\:flex-1 { flex: 1; } .md\:basis-56 { flex-basis: calc(var(--spacing) * 56); } .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\:items-center { align-items: center; } .md\:justify-center { justify-content: center; } .md\:justify-end { justify-content: flex-end; } .md\:gap-0 { gap: 0; } .md\:gap-2 { gap: calc(var(--spacing) * 2); } .md\:p-5 { padding: calc(var(--spacing) * 5); } .md\:p-6 { padding: calc(var(--spacing) * 6); } .md\:p-8 { padding: calc(var(--spacing) * 8); } .md\:px-8 { padding-inline: calc(var(--spacing) * 8); } .md\:py-24 { padding-block: calc(var(--spacing) * 24); } .md\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .md\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .md\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .md\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (min-width: 64rem) { .lg\:block { display: block; } .lg\:inline { display: inline; } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); } } .rtl\:flex-row-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { flex-direction: row-reverse; } @media (prefers-color-scheme: dark) { .dark\:border-gray-600 { border-color: var(--color-gray-600); } .dark\:bg-gray-800 { background-color: var(--color-gray-800); } .dark\:bg-gray-900 { background-color: var(--color-gray-900); } .dark\:text-gray-300 { color: var(--color-gray-300); } .dark\:text-gray-400 { color: var(--color-gray-400); } .dark\:text-gray-600 { color: var(--color-gray-600); } @media (hover: hover) { .dark\:hover\:text-gray-300:hover { color: var(--color-gray-300); } } .dark\:focus\:border-blue-700:focus { border-color: var(--color-blue-700); } .dark\:focus\:border-blue-800:focus { border-color: var(--color-blue-800); } .dark\:active\:bg-gray-700:active { background-color: var(--color-gray-700); } .dark\:active\:text-gray-300:active { color: var(--color-gray-300); } } } html { scrollbar-gutter: stable; } button { cursor: pointer; } [x-cloak] { display: none !important; } :root { --font14: 1rem; --table-text: var(--color-foreground, #1f2328); --table-text-muted: var(--color-muted-foreground, #6b7280); --table-border: var(--color-border, #e5e7eb); --table-border-head: #d1d5db; --table-head-bg: #f8f9fa; --table-stripe: #00000006; --table-hover: #0000000d; --table-active: #3b82f614; --table-focus: #3b82f6; --table-stuck-bg: var(--color-card, #fff); --table-stuck-stripe: #fafafa; --table-radius: .5rem; --table-cell-py: clamp(.5rem, 1.2vw, .75rem); --table-cell-px: clamp(.625rem, 1.4vw, .875rem); --table-font-size: var(--font14); } .prose { background: var(--color-card, #fff); border-radius: 16px; padding: 36px; } .prose h2 { letter-spacing: -.5px; scroll-margin-top: calc(var(--rail-top, 0px) + 12px); margin: 38px 0 14px; font-size: 26px; font-weight: 800; line-height: 1.3; } .prose h2:first-child { margin-top: 0; } .prose h3 { scroll-margin-top: calc(var(--rail-top, 0px) + 12px); margin: 26px 0 10px; font-size: 19px; font-weight: 700; } .prose p { color: var(--color-ink-2, #3c4043); margin: 0 0 16px; font-size: 16px; line-height: 1.78; } .prose ul, .prose ol { color: var(--color-ink-2, #3c4043); margin: 0 0 18px; padding-left: 22px; font-size: 16px; line-height: 1.78; } .prose li { margin-bottom: 8px; } .prose a { color: var(--color-brand, #e23a2e); text-decoration: underline; } .prose strong { color: var(--color-foreground, #111214); font-weight: 650; } .prose figure { margin: 0 0 24px; } .prose figure svg { background: #151622; border-radius: 12px; width: 100%; height: auto; display: block; } .prose figcaption { color: var(--color-muted-foreground, #6b7280); text-align: center; font-size: 12.5px; } .prose table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14.5px; } .prose th, .prose td { border: 1px solid var(--color-border, #e5e7eb); text-align: left; padding: 11px 13px; } .prose th { background: var(--table-head-bg); font-weight: 700; } .prose blockquote { border-left: 3px solid var(--color-brand, #e23a2e); background: var(--color-brand-soft, #fff7f6); border-radius: 0 10px 10px 0; margin: 22px 0; padding: 16px 20px; } .prose blockquote p { margin: 0; font-size: 15.5px; } .takeaway { border: 1px solid var(--color-border, #e5e7eb); background: #f7f8fa; border-radius: 13px; margin: 0 0 28px; padding: 20px 22px; } .takeaway h2 { letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-foreground, #6b7280); font-weight: 700; margin: 0 0 12px !important; font-size: 15px !important; } .takeaway ul { margin: 0; padding-left: 20px; font-size: 15px; } .cl-faq-body figure.table, .news .prose figure.table, .v1-rich figure.table { -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; margin: 1rem 0; display: block; overflow-x: auto; } .cl-faq-body figure.table > table, .news .prose figure.table > table, .v1-rich figure.table > table { width: max-content; min-width: 100%; margin-bottom: 0; } .cl-faq-body figure.table th, .cl-faq-body figure.table td, .news .prose figure.table th, .news .prose figure.table td, .v1-rich figure.table th, .v1-rich figure.table td { white-space: nowrap; word-break: normal; } @media (max-width: 767.98px) { .cl-faq-body figure.table th, .cl-faq-body figure.table td, .news .prose figure.table th, .news .prose figure.table td, .v1-rich figure.table th, .v1-rich figure.table td { padding: .5rem .75rem; font-size: .875rem; } } .u4n-cart-fly { z-index: 400; background: var(--color-brand, #e23a2e); min-width: 2.25rem; height: 2.25rem; color: var(--color-brand-foreground, #fff); pointer-events: none; border-radius: 999px; place-items: center; padding: 0 .55rem; font-size: .9375rem; font-weight: 800; line-height: 1; display: grid; position: fixed; box-shadow: 0 10px 24px #e23a2e73; } @supports (color: color-mix(in lab, red, red)) { .u4n-cart-fly { box-shadow: 0 10px 24px color-mix(in srgb, var(--color-brand, #e23a2e) 45%, transparent); } } .u4n-cart-fly { opacity: 1; will-change: left, top, transform, opacity; margin: 0; transform: translate(-50%, -50%) scale(1); } @keyframes u4n-cart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } } .toast-viewport { z-index: 9999; pointer-events: none; flex-direction: column; align-items: stretch; gap: 12px; width: min(388px, 100vw - 32px); display: flex; position: fixed; top: 20px; right: 20px; } .u4n-toast { --toast-color: var(--color-info, #2468c9); --toast-soft: var(--color-info, #3b82f6); } @supports (color: color-mix(in lab, red, red)) { .u4n-toast { --toast-soft: color-mix(in srgb, var(--color-info, #3b82f6) 10%, var(--color-card, #fff)); } } .u4n-toast { background: #fffffffa; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: start; gap: 12px; width: 100%; min-height: 78px; padding: 14px 13px 13px 14px; display: grid; position: relative; } @supports (color: color-mix(in lab, red, red)) { .u4n-toast { background: color-mix(in srgb, var(--color-card, #fff) 98%, transparent); } } .u4n-toast { border: 1px solid #11121417; } @supports (color: color-mix(in lab, red, red)) { .u4n-toast { border: 1px solid color-mix(in srgb, var(--color-foreground, #111214) 9%, transparent); } } .u4n-toast { border-radius: 12px; box-shadow: 0 16px 42px #11121429, 0 2px 8px #1112140f; } @supports (color: color-mix(in lab, red, red)) { .u4n-toast { box-shadow: 0 16px 42px color-mix(in srgb, var(--color-foreground, #111214) 16%, transparent), 0 2px 8px color-mix(in srgb, var(--color-foreground, #111214) 6%, transparent); } } .u4n-toast { pointer-events: auto; transform-origin: 100% 0; animation: .28s cubic-bezier(.22, 1, .36, 1) both u4n-toast-in; overflow: hidden; } .u4n-toast:before { content: ""; background: var(--toast-color); width: 4px; position: absolute; inset: 0 auto 0 0; } .u4n-toast[data-type="success"] { --toast-color: var(--color-positive, #16845b); --toast-soft: #e6f8f2; } @supports (color: color-mix(in lab, red, red)) { .u4n-toast[data-type="success"] { --toast-soft: color-mix(in srgb, var(--color-positive, #00b67a) 10%, var(--color-card, #fff)); } } .u4n-toast[data-type="error"] { --toast-color: var(--color-brand, #c9342a); --toast-soft: var(--color-brand-soft, #fff0ee); } .u4n-toast[data-type="warning"] { --toast-color: var(--color-warning, #a66708); --toast-soft: var(--color-warning, #b5761b); } @supports (color: color-mix(in lab, red, red)) { .u4n-toast[data-type="warning"] { --toast-soft: color-mix(in srgb, var(--color-warning, #b5761b) 12%, var(--color-card, #fff)); } } .u4n-toast[data-type="info"] { --toast-color: var(--color-info, #2468c9); --toast-soft: var(--color-info, #3b82f6); } @supports (color: color-mix(in lab, red, red)) { .u4n-toast[data-type="info"] { --toast-soft: color-mix(in srgb, var(--color-info, #3b82f6) 10%, var(--color-card, #fff)); } } .u4n-toast[data-type="loading"] { --toast-color: var(--color-muted-foreground, #6b7280); --toast-soft: var(--color-muted, #f2f3f5); } .u4n-toast[data-type="action"] { --toast-color: var(--color-brand, #e23a2e); --toast-soft: var(--color-brand-soft, #fff4f2); } .u4n-toast-icon { width: 40px; height: 40px; color: var(--toast-color); background: var(--toast-soft); border-radius: 10px; place-items: center; display: grid; } .u4n-toast-icon svg { width: 20px; height: 20px; display: block; } .u4n-toast-icon .u4n-toast-spinner { border: 2px solid #6b72803d; width: 18px; height: 18px; } @supports (color: color-mix(in lab, red, red)) { .u4n-toast-icon .u4n-toast-spinner { border: 2px solid color-mix(in srgb, var(--color-muted-foreground, #6b7280) 24%, transparent); } } .u4n-toast-icon .u4n-toast-spinner { border-top-color: currentColor; border-radius: 50%; animation: .75s linear infinite u4n-toast-spin; } .u4n-toast-copy { min-width: 0; padding-top: 1px; } .u4n-toast-title { color: var(--color-foreground, #111214); margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.35; } .u4n-toast-copy:not(:has(.u4n-toast-message)) .u4n-toast-title { margin-bottom: 0; } .u4n-toast-message { color: var(--color-muted-foreground, #6b7280); white-space: pre-line; margin: 0; font-size: 12.5px; line-height: 1.5; } .u4n-toast-action { color: var(--toast-color); cursor: pointer; background: none; border: 0; margin: 0; padding: 7px 0 0; font-size: 12.5px; font-weight: 700; display: inline-flex; } .u4n-toast-action:hover { text-decoration: underline; } .u4n-toast-close { width: 28px; height: 28px; color: var(--color-footer-muted, #8b9199); cursor: pointer; background: none; border: 0; border-radius: 50%; place-items: center; padding: 0; display: grid; } .u4n-toast-close:hover { background: var(--color-muted, #f2f3f5); color: var(--color-foreground, #111214); } .u4n-toast-progress { background: var(--toast-soft); height: 3px; position: absolute; bottom: 0; left: 4px; right: 0; } .u4n-toast-progress > span { background: var(--toast-color); transform-origin: 0; width: 100%; height: 100%; animation: u4n-toast-timer var(--toast-duration, 5s) linear forwards; display: block; } .u4n-toast.is-paused .u4n-toast-progress > span { animation-play-state: paused; } .u4n-toast.is-leaving { animation: .2s both u4n-toast-out; } @keyframes u4n-toast-in { from { opacity: 0; transform: translate3d(22px, -8px, 0) scale(.97); } to { opacity: 1; transform: none; } } @keyframes u4n-toast-out { to { opacity: 0; transform: translate3d(26px, 0, 0) scale(.97); } } @keyframes u4n-toast-spin { to { transform: rotate(360deg); } } @keyframes u4n-toast-timer { to { transform: scaleX(0); } } @media (max-width: 620px) { .toast-viewport { gap: 9px; width: calc(100vw - 24px); top: 12px; right: 12px; } .u4n-toast { grid-template-columns: 38px minmax(0, 1fr) 28px; gap: 10px; min-height: 72px; padding: 12px 11px 12px 12px; } .u4n-toast-icon { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .u4n-toast, .u4n-toast.is-leaving, .u4n-toast-icon .u4n-toast-spinner, .u4n-toast-progress > span { animation: none !important; } } .select { appearance: none; width: 100%; min-width: 0; height: auto; min-height: 0; box-shadow: none; white-space: normal; vertical-align: top; touch-action: auto; background-color: #0000; background-image: none; border: 0; border-radius: 0; padding: 0; display: block; position: relative; overflow: visible; } .select-btn { border: 1px solid var(--color-border, #e5e7eb); background: var(--color-card, #fff); width: 100%; min-height: 2.75rem; color: var(--color-foreground, #111214); text-align: left; cursor: pointer; border-radius: .625rem; outline: none; align-items: center; gap: .55rem; padding: .625rem .875rem; font-size: .9375rem; display: flex; } .select-btn:hover { border-color: var(--color-border, #dcdfe4); } .select.is-open .select-btn { border-color: var(--color-brand, #e23a2e); box-shadow: 0 0 0 3px #e23a2e1f; } @supports (color: color-mix(in lab, red, red)) { .select.is-open .select-btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #e23a2e) 12%, transparent); } } .select-btn.is-bad { border-color: var(--color-brand, #e23a2e); background: var(--color-brand-soft, #fffbfb); } .select-val { white-space: nowrap; text-overflow: ellipsis; flex: auto; min-width: 0; overflow: hidden; } .select-val.is-ph { color: var(--color-footer-muted, #a6abb3); } .select-caret { opacity: .55; flex: none; width: .7rem; height: .7rem; transition: transform .15s; } .select.is-open .select-caret { transform: rotate(180deg); } .select-menu { z-index: 60; box-sizing: border-box; border: 1px solid var(--color-border, #e5e7eb); background: var(--color-card, #fff); border-radius: .8125rem; width: 100%; max-width: 100%; padding: .625rem; position: absolute; top: calc(100% + .5rem); left: 0; box-shadow: 0 14px 38px #11121429; } @supports (color: color-mix(in lab, red, red)) { .select-menu { box-shadow: 0 14px 38px color-mix(in srgb, var(--color-foreground, #111214) 16%, transparent); } } .select-seek { margin-bottom: .4rem; display: block; position: relative; } .select-seek > svg { color: var(--color-footer-muted, #9aa0a6); pointer-events: none; position: absolute; top: 50%; left: .8rem; transform: translateY(-50%); } .select-seek input { border: 1px solid var(--color-border, #ebedf0); background: var(--color-card, #fff); width: 100%; height: 2.75rem; color: var(--color-foreground, #111214); font: inherit; border-radius: .5625rem; outline: 0; padding: 0 .875rem 0 2.5rem; font-size: .875rem; } .select-seek input:focus { border-color: var(--color-border, #dcdfe4); } .select-opts { flex-direction: column; gap: .125rem; max-height: 15.375rem; display: flex; overflow: auto; } .select-opt { box-sizing: border-box; width: 100%; max-width: 100%; color: var(--color-foreground, #111214); text-align: left; cursor: pointer; background: none; border: 0; border-radius: .5625rem; align-items: flex-start; gap: .625rem; padding: .625rem .75rem; font-size: .875rem; display: flex; } .select-opt:hover { background: var(--color-muted, #f0f1f4); } .select-opt.is-sel { background: var(--color-brand-soft, #fdecea); color: var(--color-brand, #e23a2e); font-weight: 600; } .select-label { white-space: nowrap; text-overflow: ellipsis; flex: auto; min-width: 0; line-height: 1.35; overflow: hidden; } .select-opts.is-wrap .select-label { white-space: normal; text-overflow: unset; word-break: break-word; overflow: visible; } .select-meta { color: var(--color-muted-foreground, #6b7280); flex: none; font-size: .8125rem; } .select-opt.is-sel .select-meta { color: var(--color-brand, #e23a2e); } .select-tick { width: .875rem; color: var(--color-brand, #e23a2e); opacity: 0; flex: none; margin-top: .15rem; } .select-opt.is-sel .select-tick { opacity: 1; } .select-empty { text-align: center; color: var(--color-muted-foreground, #6b7280); margin: 0; padding: 1.25rem .75rem; font-size: .875rem; line-height: 1.6; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--color-brand, #e23a2e); border-color: var(--color-brand, #e23a2e); } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange { background: var(--color-brand-soft, #fff4f2); border-color: var(--color-brand-soft, #fff4f2); box-shadow: none; } @keyframes rotator { 89.9999%, 100% { --first-item-position: 0 0%; } 90%, 99.9999% { --first-item-position: 0 calc(var(--items) * 100%); } 100% { translate: 0 -100%; } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes menu { 0% { opacity: 0; } } @keyframes dropdown { 0% { opacity: 0; } } @keyframes toast { 0% { opacity: 0; scale: .9; } 100% { opacity: 1; scale: 1; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } @keyframes rating { 0%, 40% { filter: brightness(1.05) contrast(1.05); scale: 1.1; } } @keyframes progress { 50% { background-position-x: -115%; } } @keyframes aura { to { --aura-angle: 360deg; transform: translateZ(1px); } } @keyframes aura-glow { 20%, 80% { opacity: .7; filter: blur(.25rem); } 50% { opacity: 1; filter: blur(.75rem); } } @keyframes aura-glow-after { 20%, 80% { opacity: .3; filter: blur(1rem); } 50% { opacity: .6; filter: blur(1.5rem); } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false }