/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-sans","display":"swap"}],"variableName":"inter"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_f367f3 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_f367f3 {--font-sans: 'Inter', 'Inter Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Space_Grotesk","arguments":[{"subsets":["latin"],"weight":["500","700"],"variable":"--font-gauge","display":"swap"}],"variableName":"spaceGrotesk"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_4f4604 {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_4f4604 {--font-gauge: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-end-2 {
  inset-inline-end: -0.5rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.end-0 {
  inset-inline-end: 0px;
}
.end-2 {
  inset-inline-end: 0.5rem;
}
.end-2\.5 {
  inset-inline-end: 0.625rem;
}
.end-6 {
  inset-inline-end: 1.5rem;
}
.left-1\/2 {
  left: 50%;
}
.left-6 {
  left: 1.5rem;
}
.right-6 {
  right: 1.5rem;
}
.start-0 {
  inset-inline-start: 0px;
}
.start-6 {
  inset-inline-start: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-6 {
  top: 1.5rem;
}
.z-10 {
  z-index: 10;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1100\] {
  z-index: 1100;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-me-1 {
  margin-inline-end: -0.25rem;
}
.-ms-2 {
  margin-inline-start: -0.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ms-auto {
  margin-inline-start: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-11 {
  height: 2.75rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[2px\] {
  height: 2px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-56 {
  max-height: 14rem;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[6rem\] {
  min-height: 6rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[min\(17rem\2c 85vw\)\] {
  width: min(17rem,85vw);
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[336px\] {
  max-width: 336px;
}
.max-w-\[38ch\] {
  max-width: 38ch;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[min\(70vh\2c 320px\)\] {
  max-width: min(70vh,320px);
}
.max-w-\[min\(72vh\2c 360px\)\] {
  max-width: min(72vh,360px);
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 12px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 8px;
}
.rounded-md {
  border-radius: 6px;
}
.rounded-xl {
  border-radius: 10px;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-e {
  border-inline-end-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-accent) / var(--tw-border-opacity));
}
.border-bad\/40 {
  border-color: rgb(var(--c-bad-fg) / 0.4);
}
.border-bad\/60 {
  border-color: rgb(var(--c-bad-fg) / 0.6);
}
.border-bad\/70 {
  border-color: rgb(var(--c-bad-fg) / 0.7);
}
.border-current {
  border-color: currentColor;
}
.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
}
.border-line-2 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
}
.border-line\/60 {
  border-color: rgb(var(--c-line) / 0.6);
}
.border-ok {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-ok-fg) / var(--tw-border-opacity));
}
.border-ok\/30 {
  border-color: rgb(var(--c-ok-fg) / 0.3);
}
.border-paper\/10 {
  border-color: rgb(var(--c-paper) / 0.1);
}
.border-red-400\/70 {
  border-color: rgb(248 113 113 / 0.7);
}
.border-transparent {
  border-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent) / var(--tw-bg-opacity));
}
.bg-bad {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-bad-fg) / var(--tw-bg-opacity));
}
.bg-bad\/10 {
  background-color: rgb(var(--c-bad-fg) / 0.1);
}
.bg-bad\/70 {
  background-color: rgb(var(--c-bad-fg) / 0.7);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-info-fg) / var(--tw-bg-opacity));
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ink) / var(--tw-bg-opacity));
}
.bg-ink\/10 {
  background-color: rgb(var(--c-ink) / 0.1);
}
.bg-ink\/40 {
  background-color: rgb(var(--c-ink) / 0.4);
}
.bg-ink\/55 {
  background-color: rgb(var(--c-ink) / 0.55);
}
.bg-ink\/70 {
  background-color: rgb(var(--c-ink) / 0.7);
}
.bg-ink\/75 {
  background-color: rgb(var(--c-ink) / 0.75);
}
.bg-ink\/80 {
  background-color: rgb(var(--c-ink) / 0.8);
}
.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-line) / var(--tw-bg-opacity));
}
.bg-line-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-line-2) / var(--tw-bg-opacity));
}
.bg-line\/60 {
  background-color: rgb(var(--c-line) / 0.6);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-muted) / var(--tw-bg-opacity));
}
.bg-ok {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ok-fg) / var(--tw-bg-opacity));
}
.bg-ok\/10 {
  background-color: rgb(var(--c-ok-fg) / 0.1);
}
.bg-ok\/15 {
  background-color: rgb(var(--c-ok-fg) / 0.15);
}
.bg-paper\/10 {
  background-color: rgb(var(--c-paper) / 0.1);
}
.bg-paper\/45 {
  background-color: rgb(var(--c-paper) / 0.45);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
}
.bg-surface-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-2) / var(--tw-bg-opacity));
}
.bg-surface\/40 {
  background-color: rgb(var(--c-surface) / 0.4);
}
.bg-warn {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-warn-fg) / var(--tw-bg-opacity));
}
.bg-warn\/90 {
  background-color: rgb(var(--c-warn-fg) / 0.9);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/60 {
  --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-lime-300 {
  --tw-gradient-from: #bef264 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(190 242 100 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/0 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-lime-400 {
  --tw-gradient-to: #a3e635 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pe-10 {
  padding-inline-end: 2.5rem;
}
.pe-3 {
  padding-inline-end: 0.75rem;
}
.pe-8 {
  padding-inline-end: 2rem;
}
.pe-9 {
  padding-inline-end: 2.25rem;
}
.ps-4 {
  padding-inline-start: 1rem;
}
.ps-7 {
  padding-inline-start: 1.75rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-center {
  text-align: center;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: var(--font-sans), Inter, ui-sans-serif, system-ui, sans-serif;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[34px\] {
  font-size: 34px;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-extrabold {
  font-weight: 800;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.55\] {
  line-height: 1.55;
}
.leading-\[1\.65\] {
  line-height: 1.65;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity));
}
.text-accent-ink\/70 {
  color: rgb(var(--c-accent-ink) / 0.7);
}
.text-bad {
  --tw-text-opacity: 1;
  color: rgb(var(--c-bad-fg) / var(--tw-text-opacity));
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--c-ink) / var(--tw-text-opacity));
}
.text-line {
  --tw-text-opacity: 1;
  color: rgb(var(--c-line) / var(--tw-text-opacity));
}
.text-line-2 {
  --tw-text-opacity: 1;
  color: rgb(var(--c-line-2) / var(--tw-text-opacity));
}
.text-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}
.text-ok {
  --tw-text-opacity: 1;
  color: rgb(var(--c-ok-fg) / var(--tw-text-opacity));
}
.text-paper {
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}
.text-paper\/70 {
  color: rgb(var(--c-paper) / 0.7);
}
.text-paper\/80 {
  color: rgb(var(--c-paper) / 0.8);
}
.text-paper\/85 {
  color: rgb(var(--c-paper) / 0.85);
}
.text-warn {
  --tw-text-opacity: 1;
  color: rgb(var(--c-warn-fg) / var(--tw-text-opacity));
}
.text-zinc-950 {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}
.decoration-accent {
  text-decoration-color: rgb(var(--c-accent) / 1);
}
.decoration-line\/60 {
  text-decoration-color: rgb(var(--c-line) / 0.6);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-accent {
  accent-color: rgb(var(--c-accent) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-bad\/30 {
  --tw-ring-color: rgb(var(--c-bad-fg) / 0.3);
}
.ring-red-400\/30 {
  --tw-ring-color: rgb(248 113 113 / 0.3);
}
.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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[partner\:auth\] {
  partner: auth;
}

/* ============================================================
   Theme tokens. Two themes, one set of utility classes.

   Switching is done by toggling `data-theme="light|dark"` on the
   `<html>` element (see `ThemeToggle`). Defaults to dark so the
   first paint matches the historical look.

   Naming mirrors `tailwind.config.ts`: ink/paper are the surface
   poles (inverted between modes), surface[-1,-2] is the elevation
   ramp above ink, line/line-2 are borders, accent is the partner
   brand amber #FFB400 (deliberately warmer than the admin console's
   #EAB308) with `accent-ink` as the readable foreground for amber
   surfaces.
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Near-black canvas with a three-step surface ramp — matched to
     the admin console's dark register (the previous charcoal ramp
     ran ~1.5 steps lighter at every level and read grey rather than
     dark; user-reported). Amber accent unchanged. */
  --c-ink: 10 10 11;          /* #0A0A0B — near-black page */
  --c-paper: 245 245 245;     /* near-white primary text */
  --c-surface: 17 17 19;
  --c-surface-1: 23 23 26;
  --c-surface-2: 32 32 36;
  --c-line: 31 31 35;
  --c-line-2: 46 46 52;
  /* 5.5:1 on `surface`, 5.8:1 on `ink`, 4.7:1 even on `surface-2`. Was
     122 122 130, which measured 4.43:1 against `surface` — under AA, and
     `surface` is where nearly every muted string actually renders
     (.panel, .steel, .card, .stat-label, table headers). */
  --c-muted: 138 138 146;

  /* Single high-energy accent — electric/sodium-lamp amber, the
     GymPass brand mark colour. Used SPARINGLY: stat numbers,
     active rail, key call-to-action only. Never decorative. */
  --c-accent: 255 180 0;       /* #FFB400 */
  --c-accent-ink: 14 14 15;    /* near-black text on amber chips */

  /* Status FOREGROUNDS (MD3-style semantic roles): the one colour per
     status used for TEXT — pill copy, form errors, warning notes.
     Split per theme because hues that read on charcoal fail WCAG on
     the light canvas. Dark uses the -400 weights: light enough for
     body-size error copy on ink (the old text-red-300 register),
     strong enough on the tinted chips. */
  --c-ok-fg: 255 180 0;        /* brand amber */
  --c-warn-fg: 251 146 60;     /* orange-400 — distinct hue from ok,
                                  so healthy vs needs-attention never
                                  collapse into one colour */
  --c-bad-fg: 248 113 113;     /* red-400 */
  --c-info-fg: 56 189 248;     /* sky-400 */

  /* Themed select chevron (SVG-as-image can't use currentColor — it
     resolves to black, which vanished on the dark input). */
  --select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%206%27%20fill%3D%27none%27%20stroke%3D%27%237A7A82%27%20stroke-width%3D%271.4%27%3E%3Cpath%20d%3D%27M1%201.5%20L5%205%20L9%201.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");

  --c-scroll-track: transparent;
  --c-scroll-thumb: 46 46 52;
  --c-scroll-thumb-hover: 64 64 70;

  --c-select-bg: 255 180 0;
  --c-select-fg: 10 10 11;
}

[data-theme="light"] {
  color-scheme: light;

  /* Light theme. Page is a warm-grey paper (not pure white) so the
     amber accent doesn't vibrate against it — slightly warmer than
     the admin console's light canvas, intentionally. */
  --c-ink: 246 246 244;
  --c-paper: 24 24 27;
  --c-surface: 236 236 232;
  --c-surface-1: 224 224 220;
  --c-surface-2: 212 212 208;
  --c-line: 220 220 215;
  --c-line-2: 196 196 190;
  --c-muted: 100 100 105;

  --c-accent: 240 160 0;
  --c-accent-ink: 14 14 15;

  /* Status foregrounds, light register — darkened until the 11px pill
     text passes 4.5:1 on its tinted chip (bright amber as text is
     ~2:1 on the warm-paper canvas; red-500 3.9:1; sky-500 2.8:1). */
  --c-ok-fg: 180 83 9;         /* amber-700 */
  --c-warn-fg: 194 65 12;      /* orange-700 — distinct from ok (the
                                  two collapsed to one colour before) */
  --c-bad-fg: 220 38 38;       /* red-600 */
  --c-info-fg: 3 105 161;      /* sky-700 */

  --select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%206%27%20fill%3D%27none%27%20stroke%3D%27%23646469%27%20stroke-width%3D%271.4%27%3E%3Cpath%20d%3D%27M1%201.5%20L5%205%20L9%201.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");

  --c-scroll-track: transparent;
  --c-scroll-thumb: 196 196 190;
  --c-scroll-thumb-hover: 161 161 158;

  --c-select-bg: 240 160 0;
  --c-select-fg: 14 14 15;
}

html,
body {
  height: 100%;
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  font-family: var(--font-sans), Inter, ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 13.5px;
  letter-spacing: -0.005em;
}

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

/* ============================================================
   Admin primitives. Density-first. Linear/Vercel/Stripe register.
   All utility classes resolve through theme tokens so they flip
   automatically when `data-theme` changes.
   ============================================================ */

/* --- Typography utilities ------------------------------------ */

/* Small mono-ish label (still Inter; tracking applied LTR-only below). */
.label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

/* Tabular numerals for any numeric column. */
.num {
  font-variant-numeric: tabular-nums;
}

/* Code-ish inline: same font, tighter letter-spacing + slightly smaller. */
.code {
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Keyboard / id chip — rounded, bordered. */
.kbd {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 10.5px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Headings - the only three you ever need. */
.h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

.h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

.h3 {
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

/* Sidebar group label — amber chip, unmistakably differentiates sections. */
.nav-group-label {
  margin-bottom: 0.375rem;
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent) / var(--tw-bg-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-ink) / var(--tw-text-opacity));
}

/* Letter-spacing on uppercase chrome labels in LTR only — positive
   tracking severs Arabic cursive letter joins, so AR renders without
   it (same gate the admin console carries). */
[dir="ltr"] .label,
[dir="ltr"] .nav-group-label {
  letter-spacing: 0.08em;
}
[dir="ltr"] .table thead th {
  letter-spacing: 0.04em;
}
[dir="ltr"] .tracked {
  letter-spacing: 0.12em;
}

/* --- Buttons ------------------------------------------------- */

.btn {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-ink) / var(--tw-text-opacity));
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (pointer: coarse) {
  .btn-primary {
    min-height: 44px;
  }
}

.btn-primary:hover {
  background-color: rgb(var(--c-accent) / 0.9);
}

.btn-primary:active {
  --tw-brightness: brightness(.95);
  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);
}

.btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (pointer: coarse) {
  .btn-secondary {
    min-height: 44px;
  }
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-line) / var(--tw-bg-opacity));
}

.btn-ghost {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (pointer: coarse) {
  .btn-ghost {
    min-height: 44px;
  }
}

.btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

.btn-danger {
  border-width: 1px;
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (pointer: coarse) {
  .btn-danger {
    min-height: 44px;
  }
}

.btn-danger {
  border-color: rgb(var(--c-bad-fg) / 0.3);
  background-color: rgb(var(--c-bad-fg) / 0.1);
  color: rgb(var(--c-bad-fg));
}
.btn-danger:hover {
  border-color: rgb(var(--c-bad-fg) / 0.6);
  background-color: rgb(var(--c-bad-fg) / 0.2);
}

/* Ghost variant for destructive inline actions. Needed because
   `btn-ghost text-bad` silently loses the cascade tie — btn-ghost's
   own text-muted is defined later in this sheet than the utility. */
.btn-ghost-danger {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@media (pointer: coarse) {
  .btn-ghost-danger {
    min-height: 44px;
  }
}
.btn-ghost-danger {
  color: rgb(var(--c-bad-fg));
}
.btn-ghost-danger:hover {
  background-color: rgb(var(--c-bad-fg) / 0.1);
}

.btn-sm {
  height: 1.75rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12px;
}

.btn-icon {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-icon:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

/* --- Inputs ------------------------------------------------- */

.input {
  display: block;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ink) / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

.input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

.input:focus {
  border-color: rgb(var(--c-accent) / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.input-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12.5px;
}

.select {
  /* Inline SVG chevron painted into the background. `pe-9` (logical
   * end padding) reserves room for the chevron on whichever side
   * matches the writing direction. The two `bg-position` rules pin
   * the chevron to the same logical edge so the arrow never sits on
   * top of the option text under RTL. */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
  display: block;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ink) / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.select::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

.select::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

.select:focus {
  border-color: rgb(var(--c-accent) / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

@media (pointer: coarse) {
  .select {
    min-height: 44px;
  }
}

.select:where([dir="rtl"], [dir="rtl"] *) {
  background-position: left 10px center;
}

.select {
  /* Chevron comes from the per-theme token — currentColor inside an
     SVG-as-image resolves to black, which was invisible on the dark
     input. */
  background-image: var(--select-chevron);
}

/* Labelled field. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field > .field-label {
  font-size: 12px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

.field > .field-hint {
  font-size: 11.5px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

/* --- Surfaces ----------------------------------------------- */

.card {
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  padding: 1.25rem;
}

.panel {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
}

.divider {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
}

/* --- Page chrome (toolbar / shell) -------------------------- */

/* Sticky top bar with page title + primary action. */
.toolbar {
  position: sticky;
  top: 0px;
  z-index: 20;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  background-color: rgb(var(--c-ink) / 0.8);
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Wraps rather than crushing: on a phone the page title and its
   action (the branch pill) do not fit one line, and `justify-between`
   on a nowrap row would squeeze the title to a few characters per
   line instead. */
.toolbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  padding-bottom: 1rem;
}
@media (min-width: 640px) {

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

/* --- Stat tile (6-up dashboard grid) ----------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

.stat-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
}

.stat-delta {
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
}

/* --- Table ------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  /* Logical `start`, NOT physical `text-left`: body cells default to
     `start`, so a hardcoded left header sits over right-aligned data
     in Arabic (RTL). `start` flips with direction — same fix the
     admin console carries. */
  text-align: start;
}

.table tbody td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom-width: 0px;
}

.table tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table tbody tr:hover {
  background-color: rgb(var(--c-line) / 0.4);
}

.table td.num,
.table th.num {
  font-variant-numeric: tabular-nums;
  /* Logical `end` so numeric columns mirror in RTL (right in EN,
     left in AR) — ledger alignment in both locales. */
  text-align: end;
}

/* Horizontal scroll container for a table inside a `.panel`.
   `.panel` carries `overflow-hidden` to clip its own rounded corners,
   which also CLIPPED any table wider than the panel — on a phone the
   payouts ledger simply lost its right-hand columns with no way to
   reach them. Scrolling belongs on an inner element: the panel keeps
   clipping the radius, this scrolls the columns. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  /* Momentum scrolling on iOS Safari, and keep the scrollbar out of
     the layout on platforms that would otherwise reserve a gutter. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Tables that carry more columns than a phone can show. The min-width
   is what makes `.table-wrap` actually scroll instead of crushing
   columns into unreadable slivers. */
.table-wide {
  min-width: 34rem;
}

/* Compact variant for dense log viewers. */
.table-compact tbody td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 12px;
}

.table-compact thead th {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* --- Pills (status) --------------------------------------- */

.pill {
  display: inline-flex;
  height: 20px;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

/* Pills are fully token-derived: text, border, and tint all resolve
   from the same per-theme status foreground (text at full strength,
   border at 30%, tint at 10%), so the whole chip retunes per theme
   through one variable — no raw hues (CLAUDE.md token rule). */
.pill-ok {
  border-color: rgb(var(--c-ok-fg) / 0.3);
  background-color: rgb(var(--c-ok-fg) / 0.1);
  color: rgb(var(--c-ok-fg));
}
.pill-warn {
  border-color: rgb(var(--c-warn-fg) / 0.3);
  background-color: rgb(var(--c-warn-fg) / 0.1);
  color: rgb(var(--c-warn-fg));
}
.pill-bad {
  border-color: rgb(var(--c-bad-fg) / 0.3);
  background-color: rgb(var(--c-bad-fg) / 0.1);
  color: rgb(var(--c-bad-fg));
}
.pill-info {
  border-color: rgb(var(--c-info-fg) / 0.3);
  background-color: rgb(var(--c-info-fg) / 0.1);
  color: rgb(var(--c-info-fg));
}
.pill-mute {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
}

/* Compact dot indicator (for inline use inside tables). */
.dot {
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
}

/* --- Segmented control (filter pills) --------------------- */

.seg {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity));
  padding: 0.125rem;
}

.seg a,
.seg button {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  border-radius: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.seg a:hover,
.seg button:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}

.seg a.is-active,
.seg button.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-line) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
  --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* A `.seg` with more filters than fit a phone. The control keeps its
   single row (wrapping a segmented control breaks the "one track"
   reading) and scrolls instead. The negative margin lets the track
   bleed to the screen edge so a half-visible chip signals there is
   more to reach, rather than ending flush and looking complete. */
.seg-scroll {
  margin-left: -1rem;
  margin-right: -1rem;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {

  .seg-scroll {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
.seg-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.seg-scroll::-webkit-scrollbar {
  display: none;
}

.seg-scroll > .seg {
  flex-wrap: nowrap;
}

.seg-scroll > .seg a,
.seg-scroll > .seg button {
  white-space: nowrap;
}

/* --- Animation --------------------------------------------- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-up 180ms ease both;
  animation-delay: var(--delay, 0ms);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.pulse { animation: pulse-dot 1.8s ease-in-out infinite; }

/* ============================================================
   Dashboard primitives — minimal register.

   (Minimalism pass: the former "training floor" decorative layer —
   brushed-steel noise, diagonal patterns, lane-grid chart
   backgrounds — is retired. The class names stay because screens
   opt in via markup; they now render flat token surfaces, matching
   the admin console's clean language.)
   ============================================================ */

/* Flat panel surface — one solid step above the canvas, hairline
   border. Depth comes from the elevation shadow on hover only. */
.steel {
  background-color: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
}

/* Functional graticule behind LaneChart — the chart SVG draws only
   the data stroke (no axes, gridlines or ticks), so these faint lane
   lines are its only reference structure. Restored after the
   minimalism pass briefly removed them: they are chart
   infrastructure, not decoration. Kept subtle to fit the register. */
.lane-grid {
  background-image:
    linear-gradient(to right, rgb(var(--c-line) / 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--c-line) / 0.4) 1px, transparent 1px);
  background-size: 32px 100%, 100% 24px;
}

/* Gauge numeral — Space Grotesk Bold. Geometric, mechanical, but
 * proportional and clearly legible at every size. Used for stat
 * card primary values and chart totals. */
.gauge {
  font-family: var(--font-gauge), "Space Grotesk", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tracked-out caps for stat labels. Heavier weight so the small caps
 * read as deliberately technical. (The 0.12em tracking itself is
 * applied LTR-only — see the [dir="ltr"] gate near .label.) */
.tracked {
  text-transform: uppercase;
  font-weight: 600;
  font-feature-settings: "ss01";
}

/* Stat card lift on hover — a quiet neutral shadow (minimalism
 * pass: the former amber-tinted "warm light off steel" glow is
 * gone). The 2px translate is the spec; transform is GPU-cheap. */
.lift-on-hover {
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lift-on-hover:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--c-line-2));
  box-shadow:
    0 8px 24px -8px rgb(0 0 0 / 0.3),
    0 2px 6px -2px rgb(0 0 0 / 0.35);
}

/* Sliding accent rail used by the icon-first sidebar nav. The rail
 * itself is 2px wide; items are positioned via `top:` from the
 * parent, animated with a transform — pure CSS, no JS state. */
.rail {
  position: absolute;
  inset-inline-start: 0;
  width: 2px;
  background: rgb(var(--c-accent));
  border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
              height 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Range slider used by the logo cropper's zoom control. The native
 * slider is shaped to match the flat input surfaces — thin track,
 * accent thumb that lights up on focus. Both webkit and firefox forks
 * since the browsers don't share a vendor prefix for the thumb. */
.zoom-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  height: 14px;
  cursor: pointer;
}
.zoom-slider:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.zoom-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: rgb(var(--c-line-2));
}
.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 999px;
  background: rgb(var(--c-accent));
  margin-top: -5.5px;
  border: 2px solid rgb(var(--c-ink));
  -webkit-transition: transform 120ms ease-out;
  transition: transform 120ms ease-out;
}
.zoom-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
}
.zoom-slider::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgb(var(--c-line-2));
}
.zoom-slider::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 999px;
  background: rgb(var(--c-accent));
  border: 2px solid rgb(var(--c-ink));
  -moz-transition: transform 120ms ease-out;
  transition: transform 120ms ease-out;
}
.zoom-slider:focus-visible::-moz-range-thumb {
  transform: scale(1.15);
}

/* Status dot — Open (live), Closed (dim), with an optional pulse.
 * Used by the gym status card in the sidebar. */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.status-dot.is-open {
  background: rgb(var(--c-accent));
  box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0.6);
  animation: status-pulse 2.4s ease-out infinite;
}
.status-dot.is-closed {
  background: rgb(var(--c-line-2));
}
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0   rgb(var(--c-accent) / 0.55); }
  70%  { box-shadow: 0 0 0 8px rgb(var(--c-accent) / 0);    }
  100% { box-shadow: 0 0 0 0   rgb(var(--c-accent) / 0);    }
}

/* --- Reduced motion ----------------------------------------- */
/* MD3/WCAG: decorative animation must respect the OS setting. One
   universal clamp (the industry-standard form) instead of a
   hand-enumerated class list — a list silently misses Tailwind
   utilities like RecencyDot's animate-ping and every animation added
   later. iteration-count 1 stops infinite loops; the delay clamp
   keeps future delay-* utilities from freezing-then-snapping. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .lift-on-hover:hover {
    transform: none;
  }
}

/* --- Scrollbar --------------------------------------------- */

/* Firefox-only, gated behind a -moz support query: in Chromium 121+
   an ungated scrollbar-color would DISABLE the ::-webkit-scrollbar
   styling below and swap every scrollbar to a thin native bar. */
@supports (-moz-appearance: none) {
  html {
    scrollbar-color: rgb(var(--c-scroll-thumb)) transparent;
    scrollbar-width: thin;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-scroll-track); }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-scroll-thumb));
  border-radius: 999px;
  border: 2px solid rgb(var(--c-ink));
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-scroll-thumb-hover)); }

::-moz-selection {
  background: rgb(var(--c-select-bg));
  color: rgb(var(--c-select-fg));
}

::selection {
  background: rgb(var(--c-select-bg));
  color: rgb(var(--c-select-fg));
}

/* --- Focus ring global ------------------------------------- */
*:focus-visible {
  outline: 2px solid rgb(var(--c-accent) / 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Amber at 50% alpha measures ~1.4:1 on the light canvas — a focus ring
   nobody can see is not a focus ring. Dark stays amber (11.9:1). */
[data-theme="light"] *:focus-visible {
  outline-color: rgb(var(--c-paper) / 0.6);
}

/* --- Page gutter -------------------------------------------- */

/* Content inset, stepped by viewport. The old flat `px-10` spent 80px
   — a fifth of a 390px screen — on whitespace flanking content that
   had nowhere left to go. `max()` against the safe-area insets keeps
   text clear of the rounded corners in landscape, where the notch
   sits on an inline edge rather than the top. */
/* Physical left/right, deliberately NOT logical: the gutter is
   symmetric, so direction is irrelevant to the rem value, while
   `env(safe-area-inset-*)` is always physical. Pairing
   `padding-inline-start` with `env(...-left)` would apply the left
   notch inset to the RIGHT edge in Arabic. */
.page-gutter {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {

  .page-gutter {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.page-gutter {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 640px) {
  .page-gutter {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

@media (min-width: 1024px) {
  .page-gutter {
    padding-left: max(2.5rem, env(safe-area-inset-left));
    padding-right: max(2.5rem, env(safe-area-inset-right));
  }
}

/* --- Mobile shell (top bar + off-canvas nav) ---------------- */

/* Below `lg` the 240px sidebar is off-canvas. Direction-aware by
   selector rather than a physical `translate-x` utility: the panel
   lives on the inline-start edge, so it must slide out to the LEFT in
   English and to the RIGHT in Arabic. Tailwind's translate utilities
   are physical and would send the Arabic drawer off the wrong edge. */
.drawer-panel {
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  /* Respect the notch/rounded corners when the drawer is edge-to-edge. */
  padding-inline-start: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}

[dir="rtl"] .drawer-panel {
  transform: translateX(100%);
  padding-inline-start: env(safe-area-inset-right);
}

.drawer-panel.is-open {
  transform: translateX(0);
}

/* Scrim fades rather than snapping — the drawer is the authored
   moment in this shell, so the backdrop supports it and does not
   compete. */
.drawer-scrim {
  background-color: rgb(var(--c-ink) / 0.7);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1);
  backdrop-filter: blur(2px);
}

.drawer-scrim.is-open {
  opacity: 1;
}

/* Sticky mobile top bar. Sits above page content and carries the
   status-bar inset so the title never slides under a notch. */
.topbar {
  position: sticky;
  top: 0px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity));
  background-color: rgb(var(--c-ink) / 0.85);
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  padding-top: env(safe-area-inset-top);
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  min-height: calc(3.5rem + env(safe-area-inset-top));
}

/* --- Touch ergonomics --------------------------------------- */
/* The portal is density-first for mouse + keyboard (28–32px
   controls). Partners often open it on phones/tablets at the front
   desk, where that density drops below the 44pt/48dp minimum — so
   controls grow ONLY under a coarse pointer; desktop keeps its
   density untouched (MD3 touch-target guidance as a progressive
   enhancement). */
@media (pointer: coarse) {
  .btn,
  .btn-sm {
    min-height: 44px;
  }
  .btn-icon {
    height: 44px;
    width: 44px;
  }
  .input,
  .select {
    min-height: 44px;
  }
  .seg a,
  .seg button {
    min-height: 40px;
  }
  /* Precision controls that aren't buttons: the logo-cropper zoom
     slider grows a fatter track/thumb, and checkboxes step up from
     16px so the day-pass toggle and amenity tiles are tappable. */
  .zoom-slider {
    height: 28px;
  }
  .zoom-slider::-webkit-slider-thumb {
    height: 22px;
    width: 22px;
    margin-top: -9.5px;
  }
  .zoom-slider::-moz-range-thumb {
    height: 22px;
    width: 22px;
  }
  input[type="checkbox"] {
    height: 20px;
    width: 20px;
  }
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:border-line-2:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-2) / var(--tw-border-opacity));
}
.hover\:bg-bad\/25:hover {
  background-color: rgb(var(--c-bad-fg) / 0.25);
}
.hover\:bg-ink:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ink) / var(--tw-bg-opacity));
}
.hover\:bg-line\/40:hover {
  background-color: rgb(var(--c-line) / 0.4);
}
.hover\:bg-surface-1:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-1) / var(--tw-bg-opacity));
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity));
}
.hover\:text-bad:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-bad-fg) / var(--tw-text-opacity));
}
.hover\:text-paper:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}
.focus\:border-paper:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-paper) / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-accent\/40:focus-visible {
  --tw-ring-color: rgb(var(--c-accent) / 0.4);
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-paper {
  --tw-text-opacity: 1;
  color: rgb(var(--c-paper) / var(--tw-text-opacity));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {

  @keyframes pulse {

    50% {
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {

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

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

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

  .lg\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
}
@media (min-width: 1280px) {

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.\[\&\>svg\]\:h-full>svg {
  height: 100%;
}
.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}
@media(pointer:coarse) {

  .\[\@media\(pointer\:coarse\)\]\:h-10 {
    height: 2.5rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-\[40px\] {
    min-height: 40px;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-\[44px\] {
    min-height: 44px;
  }

  .\[\@media\(pointer\:coarse\)\]\:w-10 {
    width: 2.5rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:opacity-100 {
    opacity: 1;
  }
}