/* GENERATED — do not edit. Regenerate with:
     WRITE_WEB_TOKENS=1 flutter test test/tools/generate_web_tokens_test.dart
   (run from client/brilliant).

   Source of truth: the Brilliant design-system seed template
   (client/brilliant/lib/state/dsl/seed_template.dart), resolved
   through the real DSL pipeline. :root = theme:light; .dark =
   theme:dark (the boldness-mirror program). A deeper
   #1D1D1D-anchored dark would be a DS-level ramp change, not a
   web override. --color-surface-raised has no DS role and lives
   as a web-local exception in index.css, not here. */
:root {
  --color-surface: #F8F8F8;
  --color-surface-container: #F0F0F0;
  --color-surface-container-high: #E1E1E1;
  --color-on-surface: #373737;
  --color-surface-hover: #F0F0F0;
  --color-surface-pressed: #E1E1E1;
  --color-surface-selected: #F2F5FA;
  --color-on-surface-selected: #454545;
  --color-outline: #C6C6C6;
  --color-outline-variant: #E1E1E1;
  --color-text-primary: #454545;
  --color-text-secondary: #575757;
  --color-text-disabled: #C6C6C6;
  --color-text-display: #005FC0;
  --color-text-display-alt: #C50054;
  --color-primary: #0080FF;
  --color-on-primary: #F8F8F8;
  --color-primary-container: #F2F5FA;
  --color-secondary: #FF3377;
  --color-on-secondary: #F8F8F8;
  --color-secondary-container: #FBF3F4;
  --color-tertiary: #FF9900;
  --color-on-tertiary: #F8F8F8;
  --color-tertiary-container: #F9F4EF;
  --color-quaternary: #FFDD00;
  --color-on-quaternary: #292929;
  --color-quaternary-container: #F8F5E9;
  --color-success: #00C950;
  --color-on-success: #F8F8F8;
  --color-success-container: #F1F7F2;
  --color-error: #FB2C36;
  --color-on-error: #F8F8F8;
  --color-error-container: #FBF3F2;
  --color-warning: #FF6900;
  --color-on-warning: #292929;
  --color-warning-container: #FAF3F1;
  --color-info: #2B7FFF;
  --color-on-info: #F8F8F8;
  --color-info-container: #F2F5FA;
  --color-shadow: #1D1D1D;
  --color-glow: #F8F8F8;
  --brand-primary: #0080FF;
  --brand-secondary: #FF3377;
  --brand-tertiary: #FF9900;
  --brand-quaternary: #FFDD00;
  --neutral-intense: #292929;
  --neutral-hint: #F8F8F8;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;
  --radius-7xl: 48px;
  --radius-8xl: 64px;
  --radius-9xl: 96px;
  --radius-full: 9999px;
  --spacing-none: 0px;
  --spacing-xs: 4px;
  --spacing-overlap-xs: -2px;
  --spacing-sm: 8px;
  --spacing-overlap-sm: -4px;
  --spacing-md: 12px;
  --spacing-overlap-md: -8px;
  --spacing-lg: 16px;
  --spacing-overlap-lg: -16px;
  --spacing-xl: 24px;
  --spacing-overlap-xl: -24px;
  --spacing-2xl: 32px;
  --spacing-overlap-2xl: -32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  --font-size-6xl: 64px;
  --font-size-7xl: 80px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;
  --font-weight-hint: 100;
  --font-weight-faint: 200;
  --font-weight-subtle: 300;
  --font-weight-soft: 400;
  --font-weight-mid: 500;
  --font-weight-firm: 600;
  --font-weight-bold: 700;
  --font-weight-strong: 800;
  --font-weight-intense: 900;
  --visibility-invisible: 0;
  --visibility-hint: 0.05;
  --visibility-faint: 0.1;
  --visibility-subtle: 0.2;
  --visibility-soft: 0.4;
  --visibility-mid: 0.5;
  --visibility-firm: 0.6;
  --visibility-bold: 0.8;
  --visibility-strong: 0.9;
  --visibility-intense: 0.95;
  --visibility-opaque: 1;
  --font-family: Manrope;
  --font-family-mono: monospace;
  --font-family-serif: "Noto Serif";
  --shadow-xs: 0px 1px 1px 0px rgba(0,0,0,0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-md: 0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0px 4px 6px -2px rgba(0,0,0,0.05), 0px 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0px 10px 10px -5px rgba(0,0,0,0.04), 0px 20px 25px -5px rgba(0,0,0,0.1);
  --shadow-2xl: 0px 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-2xs: 0px 1px 0px 0px rgba(0,0,0,0.05);
  --shadow-inner: 0px 2px 4px 0px rgba(0,0,0,0.06);
}

.dark {
  --color-surface: #292929;
  --color-surface-container: #373737;
  --color-surface-container-high: #454545;
  --color-on-surface: #F0F0F0;
  --color-surface-hover: #373737;
  --color-surface-pressed: #454545;
  --color-surface-selected: #00295B;
  --color-on-surface-selected: #E1E1E1;
  --color-outline: #575757;
  --color-outline-variant: #454545;
  --color-text-primary: #E1E1E1;
  --color-text-secondary: #C6C6C6;
  --color-text-disabled: #575757;
  --color-text-display: #98C0F5;
  --color-text-display-alt: #FAAAB8;
  --color-primary-container: #00295B;
  --color-secondary-container: #590022;
  --color-tertiary-container: #492800;
  --color-quaternary-container: #403600;
  --color-success-container: #003B12;
  --color-error-container: #590007;
  --color-warning-container: #501C00;
  --color-info-container: #032760;
  --neutral-intense: #F8F8F8;
  --neutral-hint: #292929;
}

/* Design tokens are generated from Brilliant's design system (default.ds) —
 * the ONE home for the site's visual tokens. Imported here as :root
 * (theme:light) + .dark (the boldness-mirror program). Regenerate via the
 * flutter test tool:
 *   WRITE_WEB_TOKENS=1 flutter test test/tools/generate_web_tokens_test.dart
 * (run from client/brilliant). Do not hand-edit src/generated/tokens.css. */

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

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

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

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

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

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

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

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: 'Manrope', 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]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){

  .\!container{
    max-width: 640px !important;
  }

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

  .\!container{
    max-width: 768px !important;
  }

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

  .\!container{
    max-width: 1024px !important;
  }

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

  .\!container{
    max-width: 1280px !important;
  }

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

  .\!container{
    max-width: 1536px !important;
  }

  .container{
    max-width: 1536px;
  }
}
.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.\!dark .white-shadow {
    box-shadow: 0 0 145px 0px rgba(255, 255, 255, 0.13) !important; /* Dark mode: yellow-400 with 20% opacity */
  }
.dark .white-shadow {
    box-shadow: 0 0 145px 0px rgba(255, 255, 255, 0.13); /* Dark mode: yellow-400 with 20% opacity */
  }
.\!dark .white-shadow-lg {
    box-shadow: 0 0 100px 0px rgba(255, 255, 255, 0.28) !important; /* Dark mode: yellow-400 with 20% opacity */
  }
.dark .white-shadow-lg {
    box-shadow: 0 0 100px 0px rgba(255, 255, 255, 0.28); /* Dark mode: yellow-400 with 20% opacity */
  }
.\!dark .hover .white-shadow-lg {
    box-shadow: 0 0 100px 0px rgba(255, 255, 255, 0.28) !important; /* Dark mode: yellow-400 with 20% opacity */
  }
.dark .hover .white-shadow-lg {
    box-shadow: 0 0 100px 0px rgba(255, 255, 255, 0.28); /* Dark mode: yellow-400 with 20% opacity */
  }
@tailwind typography;
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-bottom-\[5px\]{
  bottom: -5px;
}
.-left-\[5px\]{
  left: -5px;
}
.-right-\[5px\]{
  right: -5px;
}
.-top-\[5px\]{
  top: -5px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-6{
  bottom: 1.5rem;
}
.bottom-\[10px\]{
  bottom: 10px;
}
.left-0{
  left: 0px;
}
.left-0\.5{
  left: 0.125rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.left-6{
  left: 1.5rem;
}
.right-0{
  right: 0px;
}
.right-2{
  right: 0.5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-6{
  right: 1.5rem;
}
.right-\[10px\]{
  right: 10px;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-2{
  top: 0.5rem;
}
.top-3{
  top: 0.75rem;
}
.top-5{
  top: 1.25rem;
}
.top-6{
  top: 1.5rem;
}
.top-full{
  top: 100%;
}
.isolate{
  isolation: isolate;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[9999\]{
  z-index: 9999;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.m-2{
  margin: 0.5rem;
}
.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-12{
  margin-bottom: 3rem;
}
.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;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-48{
  margin-top: 12rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.\!block{
  display: block !important;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.\!inline{
  display: inline !important;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.h-0\.5{
  height: 0.125rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-14{
  height: 3.5rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-4{
  height: 1rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[6px\]{
  height: 6px;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.max-h-\[60vh\]{
  max-height: 60vh;
}
.min-h-0{
  min-height: 0px;
}
.min-h-10{
  min-height: 2.5rem;
}
.min-h-6{
  min-height: 1.5rem;
}
.min-h-8{
  min-height: 2rem;
}
.min-h-\[26px\]{
  min-height: 26px;
}
.min-h-screen{
  min-height: 100vh;
}
.w-0{
  width: 0px;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-3\/4{
  width: 75%;
}
.w-4{
  width: 1rem;
}
.w-4\/6{
  width: 66.666667%;
}
.w-5\/6{
  width: 83.333333%;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[6px\]{
  width: 6px;
}
.w-\[calc\(100vw_-_64px\)\]{
  width: calc(100vw - 64px);
}
.w-full{
  width: 100%;
}
.min-w-0{
  min-width: 0px;
}
.min-w-10{
  min-width: 2.5rem;
}
.min-w-6{
  min-width: 1.5rem;
}
.min-w-8{
  min-width: 2rem;
}
.min-w-full{
  min-width: 100%;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-\[1440px\]{
  max-width: 1440px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-\[2\]{
  flex: 2;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.grow{
  flex-grow: 1;
}
.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 fadeIn{

  0%{
    opacity: 0;
    transform: translateY(4px);
  }

  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeIn{
  animation: fadeIn 0.3s ease-out forwards;
}
@keyframes pulse{

  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-ew-resize{
  cursor: ew-resize;
}
.cursor-ns-resize{
  cursor: ns-resize;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-text{
  cursor: text;
}
.cursor-zoom-in{
  cursor: zoom-in;
}
.touch-manipulation{
  touch-action: manipulation;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize{
  resize: both;
}
.scroll-mt-20{
  scroll-margin-top: 5rem;
}
.scroll-mt-24{
  scroll-margin-top: 6rem;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
.content-center{
  align-content: center;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-300 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity, 1));
}
.divide-zinc-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));
}
.self-start{
  align-self: flex-start;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-\[10px\]{
  border-radius: 10px;
}
.rounded-\[2px\]{
  border-radius: 2px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r{
  border-right-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-\[\#0A0A0A\]{
  --tw-border-opacity: 1;
  border-color: rgb(10 10 10 / var(--tw-border-opacity, 1));
}
.border-\[\#B8D4F8\]{
  --tw-border-opacity: 1;
  border-color: rgb(184 212 248 / var(--tw-border-opacity, 1));
}
.border-\[\#ECECEC\]{
  --tw-border-opacity: 1;
  border-color: rgb(236 236 236 / var(--tw-border-opacity, 1));
}
.border-\[\#e5e5e5\]{
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-\[color\:var\(--color-outline-variant\)\]{
  border-color: var(--color-outline-variant);
}
.border-\[rgba\(9\2c 9\2c 11\2c 0\.08\)\]{
  border-color: rgba(9,9,11,0.08);
}
.border-\[var\(--brand-primary\)\]{
  border-color: var(--brand-primary);
}
.border-black\/10{
  border-color: rgb(0 0 0 / 0.1);
}
.border-black\/20{
  border-color: rgb(0 0 0 / 0.2);
}
.border-black\/5{
  border-color: rgb(0 0 0 / 0.05);
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-outline{
  border-color: var(--color-outline);
}
.border-outline-variant{
  border-color: var(--color-outline-variant);
}
.border-transparent{
  border-color: transparent;
}
.border-white\/40{
  border-color: rgb(255 255 255 / 0.4);
}
.border-zinc-200{
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-zinc-300{
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-zinc-500{
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}
.border-t-\[rgba\(9\2c 9\2c 11\2c 0\.08\)\]{
  border-top-color: rgba(9,9,11,0.08);
}
.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-\[\#09090B\]{
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E7E8E8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(231 232 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EDF4FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(237 244 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F5F5F5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-\[color\:var\(--color-surface\)\]{
  background-color: var(--color-surface);
}
.bg-\[rgba\(0\2c 128\2c 255\2c 0\.15\)\]{
  background-color: rgba(0,128,255,0.15);
}
.bg-\[rgba\(9\2c 9\2c 11\2c 0\.02\)\]{
  background-color: rgba(9,9,11,0.02);
}
.bg-\[var\(--brand-primary\)\]{
  background-color: var(--brand-primary);
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/10{
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/5{
  background-color: rgb(0 0 0 / 0.05);
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-surface{
  background-color: var(--color-surface);
}
.bg-surface-raised{
  background-color: var(--color-surface-raised);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}
.bg-zinc-100{
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200{
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-zinc-100{
  --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-zinc-200{
  --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position);
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[6px\]{
  padding-left: 6px;
  padding-right: 6px;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-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-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[1px\]{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pb-\[6px\]{
  padding-bottom: 6px;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-9{
  padding-left: 2.25rem;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-16{
  padding-right: 4rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-9{
  padding-right: 2.25rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-12{
  padding-top: 3rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.pt-\[2px\]{
  padding-top: 2px;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-middle{
  vertical-align: middle;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.85em\]{
  font-size: 0.85em;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-extralight{
  font-weight: 200;
}
.font-light{
  font-weight: 300;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.font-thin{
  font-weight: 100;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.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-6{
  line-height: 1.5rem;
}
.leading-\[1\.4\]{
  line-height: 1.4;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[\#0080FF\]{
  --tw-text-opacity: 1;
  color: rgb(0 128 255 / var(--tw-text-opacity, 1));
}
.text-\[\#09090B\]{
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.text-\[\#0A0A0A\]{
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-\[\#1A1A1A\]{
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}
.text-\[\#1a1a1a\]{
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}
.text-\[\#3B8BFF\]{
  --tw-text-opacity: 1;
  color: rgb(59 139 255 / var(--tw-text-opacity, 1));
}
.text-\[\#71717A\]{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-\[rgba\(9\2c 9\2c 11\2c 0\.45\)\]{
  color: rgba(9,9,11,0.45);
}
.text-\[rgba\(9\2c 9\2c 11\2c 0\.6\)\]{
  color: rgba(9,9,11,0.6);
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-black\/15{
  color: rgb(0 0 0 / 0.15);
}
.text-black\/20{
  color: rgb(0 0 0 / 0.2);
}
.text-black\/25{
  color: rgb(0 0 0 / 0.25);
}
.text-black\/30{
  color: rgb(0 0 0 / 0.3);
}
.text-black\/35{
  color: rgb(0 0 0 / 0.35);
}
.text-black\/40{
  color: rgb(0 0 0 / 0.4);
}
.text-black\/50{
  color: rgb(0 0 0 / 0.5);
}
.text-black\/55{
  color: rgb(0 0 0 / 0.55);
}
.text-black\/60{
  color: rgb(0 0 0 / 0.6);
}
.text-black\/65{
  color: rgb(0 0 0 / 0.65);
}
.text-black\/70{
  color: rgb(0 0 0 / 0.7);
}
.text-black\/80{
  color: rgb(0 0 0 / 0.8);
}
.text-black\/90{
  color: rgb(0 0 0 / 0.9);
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-brand{
  color: var(--brand-primary);
}
.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-sky-700{
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-text-primary{
  color: var(--color-text-primary);
}
.text-text-secondary{
  color: var(--color-text-secondary);
}
.text-violet-700{
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-zinc-400{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-800{
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-zinc-900{
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.decoration-\[\#0A0A0A\]\/30{
  text-decoration-color: rgb(10 10 10 / 0.3);
}
.decoration-\[\#71717A\]\/40{
  text-decoration-color: rgb(113 113 122 / 0.4);
}
.decoration-black\/20{
  text-decoration-color: rgb(0 0 0 / 0.2);
}
.decoration-black\/30{
  text-decoration-color: rgb(0 0 0 / 0.3);
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-text-secondary::-moz-placeholder{
  color: var(--color-text-secondary);
}
.placeholder-text-secondary::placeholder{
  color: var(--color-text-secondary);
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.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-\[0_1px_3px_rgba\(41\2c 41\2c 41\2c 0\.06\)\]{
  --tw-shadow: 0 1px 3px rgba(41,41,41,0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.outline-\[2\.5px\]{
  outline-width: 2.5px;
}
.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);
}
.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);
}
.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-md{
  --tw-backdrop-blur: blur(12px);
  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-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-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-300{
  transition-duration: 300ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* The fixed-bottom cookie banner (CookieBanner.jsx) publishes its own rendered
 * height as --cookie-banner-h on :root (0px whenever it is not on screen —
 * decided, faded out, or held back on an editor). Reserve that height so the
 * page's bottom controls (the footer, a section CTA) are never covered by the
 * banner. The published height is the banner's RENDERED height, so its
 * env(safe-area-inset-bottom) padding is composed into the reserve for free. */
body {
  padding-bottom: var(--cookie-banner-h, 0px);
}
html {
  scroll-padding-bottom: var(--cookie-banner-h, 0px);
}

/* ───────────────────────────────────────────────────────────────────
 * Design tokens now live in src/generated/tokens.css (imported above),
 * resolved from Brilliant's design system (default.ds). Consume via the
 * Tailwind color aliases (bg-surface, text-text-primary, …) registered in
 * tailwind.config.js, or inline as var(--color-...).
 *
 * Dark mode is class-based (.dark on <html>, per tailwind darkMode:
 * "class"). It is EXPLICIT-TOGGLE driven and DARK-ELIGIBLE-ONLY — platform
 * surfaces, the marketing home, and docs/pricing/legal: the platform nav (and,
 * over the dark-eligible marketing routes, the marketing nav) carries a
 * sun/moon toggle (src/lib/theme.js is the one home — get/set/subscribe +
 * localStorage "bn.theme", light default). App.jsx (isDarkEligiblePath) gates
 * the .dark class to those surfaces so the rest of marketing (manifesto, blog,
 * demo, contact, team) stays light; a pre-paint script in
 * src/index.html applies .dark before first paint on a hard-loaded
 * dark-eligible route to avoid a flash. There is NO prefers-color-scheme
 * auto-switch (documented ruling below). The generated .dark values are the
 * DS-faithful mirror.
 *
 * The :root below is only the small set of WEB-LOCAL exceptions that have no
 * design-system role and are intentionally hand-authored here.
 * ─────────────────────────────────────────────────────────────────── */
:root {
  /* No DS role: a pure-white raised surface (cards). Founder ruling
     2026-07-29 — kept as a web exception pending a DS-level surface.raised
     decision; deliberately NOT emitted by the token generator. */
  --color-surface-raised: #ffffff;

  /* Destructive / validation TEXT ink. No DS role of its own: color.error
     (#FB2C36) is a full-saturation alert red made for solid fills, too hot as
     body-copy ink, and color.error.container is a surface tint, not an ink. So
     the error ink lives here as a web-local exception in the same class as
     --color-surface-raised — hand-authored, not generated. Light value is the
     site's historical #B91C1C, byte-identical. Dark value in the .dark block
     below. Founder-approved 2026-07-29. */
  --error-ink: #B91C1C;
  /* Solid danger-button FILL: mode-invariant, like color.shadow — a danger
     button stays dark red in both themes (GitHub-dark idiom). Pairs with
     --on-error-fill at 6.3:1 (AA); the DS error/on-error pair is only 3.5:1,
     which regressed the light delete button. Ink-on-text stays --error-ink. */
  --error-fill: #B91C1C;
  --on-error-fill: #FFFFFF;

  /* Segmented-control ACTIVE pill (annual/monthly toggles). In light the pill
     is the raised white card on the #F0F0F0 container track. In dark, raised
     and container resolve to the SAME stop (#373737), so the pill would vanish
     into its own track — the active fill takes a deeper derived stop in the
     .dark block below, same family as --color-surface-pressed-deep. */
  --segmented-active-fill: #FFFFFF;
  --segmented-active-shadow: 0 1px 2px rgba(41, 41, 41, 0.1);

  /* Hairline grid lines: neutral.intense @ visibility.faint (0.10). A
     color+alpha composite, so kept as a derived web-local literal. */
  --color-grid-line: rgba(41, 41, 41, 0.1);

  /* FeatureMarquee yellow-pill ink. The brand pills are mode-invariant (a pill
     stays blue/pink/orange/yellow in both themes), so their ink must be too —
     the blue/pink/orange pills use the DS on-color roles (on-primary/secondary/
     tertiary = #F8F8F8, mode-invariant); the yellow pill can't carry white, so
     it needs a dark ink. Light is text.secondary (#575757), the founder's
     authored shade — kept byte-identical here; the .dark block swaps it for the
     DS on-quaternary (#292929) so the label stays legible on the invariant
     yellow instead of flipping to a light gray. */
  --pill-ink-quaternary: var(--color-text-secondary);

  /* IntegratesSection logo-tile fill. The integrations wall carries many
     brand marks that are BLACK (GitHub, OpenAI, Cursor, Vercel, Notion,
     JetBrains, Ghostty …). A theme-following surface would flip the tile to a
     dark ground in dark mode, where those marks vanish. So the tile stays a
     LIGHT card in both themes (a light logo wall on the dark page) — light is
     surface.container (#F0F0F0, byte-identical); the .dark value is a soft
     light tile so every mark reads exactly as it does in light. Founder art
     call (see the dark-home taste-flags): the value/idiom (light tiles vs.
     white-logo variants) is theirs to tune. */
  --logo-chip-bg: var(--color-surface-container);

  /* Contribution-graph intensity ramp (ActivityGraph, via profileShared
     C.activity). A designed 5-step data-viz gradient neutral→primary — NOT a
     DS role (step 2 has no token), so it lives here as a web-local exception
     like the two above. Consumed only as CSS `background`, so it flips for
     free with .dark. Light values are the founder ramp verbatim. */
  --activity-0: #F0F0F0;
  --activity-1: #C0D6F4;
  --activity-2: #98C0F5;
  --activity-3: #0080FF;
  --activity-4: #005FC0;

  /* 404-page display ink (NotFoundPage's big vector glyph). A one-off display
     fill, not a DS text role: near-black on light, near-white on dark, both a
     touch translucent so the interactive background reads through. */
  --nf-404-ink: rgba(0, 0, 0, 0.9);

  /* DROP-WALL FAMILY TINTS. dropTaxonomy.js owns the vocabulary (which family,
     which glyph, which tag maps where); THIS is the one home for its colours,
     and they are THEME-AWARE. They have to be: a phone has no WebGPU, so on
     mobile every tile settles on `subtle`, and hardcoded light pastels made
     dark-mode mobile a wall of glare (founder, 2026-08-03). Web-local like
     --activity-* above — six decorative families are not a DS role — with the
     .dark block below as the boldness mirror.

       hint    the LIVE band, the field the engine contains a design inside:
               one notch off the page ground, barely tinted.
       subtle  the PLACEHOLDER / EMPTY band, where the ground IS the tile.
       soft    the family glyph's ink, always ON `subtle`. >= 3:1 against it in
               BOTH themes, computed per family — the old light inks sat at
               ~1.2:1, which is a glyph nobody can actually see.

     Hue is the founder's own six, HELD CONSTANT across both themes (his light
     ramp's OKLCH hue angles: blue -100.5°, emerald 160.5°, violet -65.9°,
     rose 16.4°, amber 65.3°, cyan -140.8°); only lightness and chroma mirror,
     so the families stay six distinguishable hues in dark rather than
     collapsing toward one gray. Light hint/subtle are byte-identical to the
     founder's originals. */
  --fam-blue-hint: #F2F5FA;
  --fam-blue-subtle: #C2D5F4;
  --fam-blue-soft: #4675C2;
  --fam-emerald-hint: #F2F6F4;
  --fam-emerald-subtle: #C9E3D4;
  --fam-emerald-soft: #0F8E5F;
  --fam-violet-hint: #F5F4FA;
  --fam-violet-subtle: #D4CCF5;
  --fam-violet-soft: #7D66BC;
  --fam-rose-hint: #FBF3F3;
  --fam-rose-subtle: #F9C9CA;
  --fam-rose-soft: #BB5760;
  --fam-amber-hint: #F9F4EF;
  --fam-amber-subtle: #F4DEC9;
  --fam-amber-soft: #B66F14;
  --fam-cyan-hint: #F1F6F7;
  --fam-cyan-subtle: #CAE3EA;
  --fam-cyan-soft: #0489A6;

  /* Hero "The power of 30" selection cursor width (see Hero.jsx). Shrunk on
     md and below (under the lg 1024px breakpoint) so it doesn't overwhelm the
     smaller headline. */
  --hero-cursor-w: clamp(39px, 4.5vw, 57px);
}

@media (max-width: 1023px) {
  :root {
    --hero-cursor-w: clamp(26px, 6vw, 39px);
  }
}

/* Hero "drag-out" selection animation around "The power of 30" (see Hero.jsx).
   The marquee box is always rendered at full size and anchored top-left; the
   drag is a transform: scale() from 0 (GPU-accelerated, interpolates cleanly —
   percentage width/height and calc() in @keyframes do not animate reliably).
   The cursor tracks the growing bottom-right corner via plain left/top 0%->100%
   with the SAME easing/duration, so it stays glued to that corner. The base
   rules below are the FINAL / frozen state; each carries its own animation with
   `both` fill, so before/after it the box reads as fully selected. The drag
   plays once on load for everyone — it intentionally ignores prefers-reduced-
   motion (it's a short, one-shot brand moment, not looping motion). */
.hero-marquee {
  width: 100%;
  height: 100%;
  transform-origin: top left;
  background-color: transparent;
  /* 0.6s (was 1.2s) — founder call 2026-07-30: half the drag, same easing. */
  animation: hero-marquee-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-select-cursor {
  left: 100%;
  top: 100%;
  animation: hero-cursor-drag 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Handles pop in once the drag has all but finished. */
.hero-handle {
  opacity: 1;
  animation: hero-handle-in 0.25s ease 0.55s both;
}


@keyframes hero-marquee-grow {
  from {
    transform: scale(0);
    background-color: rgba(0, 128, 255, 0.1);
  }
  85% {
    background-color: rgba(0, 128, 255, 0.1);
  }
  to {
    transform: scale(1);
    background-color: rgba(0, 128, 255, 0);
  }
}

@keyframes hero-cursor-drag {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100%;
    top: 100%;
  }
}

@keyframes hero-handle-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* David testimonial — the same drag-out selection as the hero, but triggered
   when the frame scrolls into view: an IntersectionObserver in Testimonial.jsx
   toggles `.is-visible`. Reuses the hero keyframes. Before it's visible
   everything sits at the pre-drag state (marquee collapsed; cursor, handles and
   the "David" name tag hidden); on intersect the cursor drags the frame out and
   it freezes. */
.tst-marquee {
  transform-origin: top left;
  transform: scale(0);
  background-color: transparent;
}
.tst-cursor,
.tst-handle,
.tst-tag {
  opacity: 0;
}

.tst-frame.is-visible .tst-marquee {
  animation: hero-marquee-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tst-frame.is-visible .tst-cursor {
  opacity: 1;
  animation: hero-cursor-drag 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Handles + the "David" name tag pop in once the drag has all but finished. */
.tst-frame.is-visible .tst-handle,
.tst-frame.is-visible .tst-tag {
  animation: hero-handle-in 0.25s ease 1.1s both;
}

/* Pricing "Setting design free." — the same drag-out selection as the hero,
   in the tertiary orange. The title is above the fold, so it plays once on
   load like the hero (not on scroll like the testimonial). Reuses the
   color-agnostic cursor/handle keyframes; its own grow keyframe carries the
   orange fill. Like the hero it's a short one-shot brand moment, so it
   intentionally ignores prefers-reduced-motion. */
.pricing-marquee {
  width: 100%;
  height: 100%;
  transform-origin: top left;
  background-color: transparent;
  animation: pricing-marquee-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pricing-select-cursor {
  left: 100%;
  top: 100%;
  animation: hero-cursor-drag 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Handles pop in once the drag has all but finished. */
.pricing-handle {
  opacity: 1;
  animation: hero-handle-in 0.25s ease 1.1s both;
}

@keyframes pricing-marquee-grow {
  from {
    transform: scale(0);
    background-color: rgba(255, 153, 0, 0.1);
  }
  85% {
    background-color: rgba(255, 153, 0, 0.1);
  }
  to {
    transform: scale(1);
    background-color: rgba(255, 153, 0, 0);
  }
}

/* Web-local exception overrides for dark mode (see the :root above). The DS
 * token .dark values are generated in src/generated/tokens.css. */
.dark {
  --color-surface-raised: #373737;

  /* One ramp stop below --color-surface-pressed, for the dark interaction
     layer's PRESSED feedback on ghost/outlined controls (see the INTERACTION
     LAYER's .dark hover/pressed rules below). In dark, menu panels sit on
     surface-raised (#373737 = neutral.faint) — the SAME stop --color-surface-
     hover resolves to — so per the DS's own guidance ("items on a deeper
     container step one boldness role darker", seed_template color.surface.hover)
     the dark interaction feedback steps one stop deeper: hover takes
     surface-pressed (neutral.subtle #454545), pressed takes THIS —
     neutral.soft (#575757), the generated ramp's next stop. No surface role
     emits it, so it lives here as a derived web-local exception like
     --color-surface-raised above. */
  --color-surface-pressed-deep: #575757;

  /* Segmented ACTIVE pill: neutral.soft (#575757), the same derived stop as
     --color-surface-pressed-deep — two ramp stops above the #373737 track so
     the selected segment reads as raised instead of collapsing into it. */
  --segmented-active-fill: #575757;
  --segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Dark error ink: DS red-ramp red.300 (the "soft"/bright band). The light
   * ink #B91C1C sits in the ramp's firm/bold dark band (≈ red.600 #C2001C);
   * the boldness-mirror program's partner on the bright side is the soft band,
   * and red.300 is the bright-but-unmistakably-red stop that stays legible
   * (≥5:1, AA on normal text) over EVERY dark surface it lands on: the #292929
   * ground, the #373737 raised card, and the #980014 error-container banner it
   * sits inside. A resolved DS red primitive (mode-independent ramp step), NOT
   * an invented hex — ds.resolveColor('red.300') through the real DSL pipeline
   * (seed red = oklch(63.7%,0.237,25.331); red.500 = #FB2C36 = color.error). */
  --error-ink: #F9A8A0;

  /* In dark mode neutral.intense is near-white, so the faint grid line
   * is a light hairline at 10%. */
  --color-grid-line: rgba(240, 240, 240, 0.1);

  /* Yellow-pill ink in dark: the DS on-quaternary (#292929) — a dark ink on
   * the mode-invariant yellow pill. (In light this var is text.secondary;
   * see :root above. Both are dark inks; this keeps the label legible.) */
  --pill-ink-quaternary: var(--color-on-quaternary);

  /* Logo tile stays a light card in dark so the black brand marks read. A
   * soft light gray (surface.container.high's LIGHT value) rather than pure
   * white, so the logo wall doesn't glare on the #292929 ground. Founder art
   * call — see the dark-home taste-flags. */
  --logo-chip-bg: #E1E1E1;

  /* Dark activity ramp: DS-dark neutral→bright-blue, monotonic in brightness
     so "more" still reads brighter on the dark ground. Steps 0/1/3 mirror the
     DS dark tokens (surface.container, primary.container, primary); 4 is the
     dark text.display; 2 is one documented invented midpoint. */
  --activity-0: #373737;
  --activity-1: #004998;
  --activity-2: #0062C3;
  --activity-3: #0080FF;
  --activity-4: #98C0F5;

  /* 404 display ink, mirrored (see :root). */
  --nf-404-ink: rgba(248, 248, 248, 0.92);

  /* Drop-wall family tints, mirrored (see the :root block for the roles). Each
     family keeps its light hue angle exactly; the three roles invert around the
     #292929 ground the way the DS ramps do:

       hint    OKLCH L .318 / C .018 — between surface (.281) and
               surface.container (.337), so the live band reads as a band, the
               same one-notch-off-the-ground job the light hint does.
       subtle  OKLCH L .408 / C .052 — a quiet TINTED dark tile, ~1.6:1 against
               the page, deliberately not the DS's alert-loud container reds and
               blues: 24 of these are a wall, not a warning.
       soft    the glyph ink, walked up in L until it clears 3:1 on `subtle`.

     Contrast (glyph on its ground), computed both ways:
       blue 3.05  emerald 3.06  violet 3.05  rose 3.07  amber 3.08  cyan 3.05 */
  --fam-blue-hint: #2D333C;
  --fam-blue-subtle: #394A66;
  --fam-blue-soft: #7698CF;
  --fam-emerald-hint: #2B352F;
  --fam-emerald-subtle: #2F5340;
  --fam-emerald-soft: #61A884;
  --fam-violet-hint: #33313B;
  --fam-violet-subtle: #4B4463;
  --fam-violet-soft: #9A8DCA;
  --fam-rose-hint: #3B2F2F;
  --fam-rose-subtle: #633E40;
  --fam-rose-soft: #CA8285;
  --fam-amber-hint: #393129;
  --fam-amber-subtle: #5D442B;
  --fam-amber-soft: #BF8D5B;
  --fam-cyan-hint: #283539;
  --fam-cyan-subtle: #25515D;
  --fam-cyan-soft: #4EA4BD;
}

/* NOTE: there is deliberately NO prefers-color-scheme auto dark-mode block —
 * dark is EXPLICIT-toggle only (founder ruling; the platform nav toggle).
 * The light :root values above always win regardless of OS appearance; dark
 * engages solely when the theme module (src/lib/theme.js) puts `.dark` on
 * <html> on a dark-eligible route — platform, the marketing home, and
 * docs/pricing/legal (App.jsx gates it; the rest of marketing stays light). */

/* ScrollRevealSection CTA — muted by default, brightens on hover. */
.scroll-reveal-cta {
  opacity: 0.25;
  transition: opacity 180ms ease-out;
}
.scroll-reveal-cta:hover {
  opacity: 0.5;
}

/* Hero "Download for macOS" button — solid dark base. On hover a
 * brand-color shimmer washes diagonally across the face (top-left to
 * bottom-right) and the button settles on solid brand blue. Two layers:
 * ::before is the static blue fill that fades in; ::after is the
 * multi-color band that sweeps across and exits off the bottom-right. */
.hero-download-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #09090B;
  transition: background-color 0.7s ease;
}
.hero-download-btn:hover {
  background-color: #0080FF;
}
.hero-download-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 35%,
    #FFDD00 45%,
    #FF9900 50%,
    #FF3377 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 400% 400%;
  background-position: 100% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background-position 2s ease;
  z-index: 0;
}
.hero-download-btn:hover::after {
  opacity: 1;
  background-position: 0% 0%;
}
.hero-download-btn__label,
.hero-download-btn__icon {
  position: relative;
  z-index: 1;
}

/* ───────────────────────────────────────────────────────────────────
 * Legal / prose pages (Privacy, Terms, DPA, Subprocessors, Cookie
 * preferences) JOIN the dark-eligible set. Unlike the docs (which render
 * DS-tokenized MDX prose), these pages were hand-authored against pure-black
 * Tailwind inks (text-black/NN, decoration-black/NN, border-black/NN) over a
 * translucent backdrop-blur card. Rather than rewrite ~350 literals (and risk
 * light drift), each page root carries a `legal-doc` class and we remap the
 * black inks to the DS-dark text.primary (#E1E1E1 = rgb(225 225 225)) at the
 * SAME opacity, so the light→dark hierarchy is preserved.
 *
 * Scoped to `.dark .legal-doc` (3 classes) so it (a) never touches light —
 * byte-identical there — and (b) out-specifies the Tailwind utilities it
 * overrides (1 class), winning regardless of layer order. Unlayered on
 * purpose (plain CSS beats @layer utilities). The same idiom as the
 * `.dark .white-shadow` overrides above. */
.dark .legal-doc .text-black { color: rgb(225 225 225); }
.dark .legal-doc .text-black\/90 { color: rgb(225 225 225 / 0.9); }
.dark .legal-doc .text-black\/80 { color: rgb(225 225 225 / 0.8); }
.dark .legal-doc .text-black\/70 { color: rgb(225 225 225 / 0.7); }
.dark .legal-doc .text-black\/60 { color: rgb(225 225 225 / 0.6); }
.dark .legal-doc .text-black\/50 { color: rgb(225 225 225 / 0.5); }
.dark .legal-doc .text-black\/40 { color: rgb(225 225 225 / 0.4); }
.dark .legal-doc .hover\:text-black:hover { color: rgb(225 225 225); }
.dark .legal-doc .hover\:text-black\/70:hover { color: rgb(225 225 225 / 0.7); }
.dark .legal-doc .decoration-black\/60 { text-decoration-color: rgb(225 225 225 / 0.6); }
.dark .legal-doc .decoration-black\/20 { text-decoration-color: rgb(225 225 225 / 0.2); }
.dark .legal-doc .hover\:decoration-black\/60:hover { text-decoration-color: rgb(225 225 225 / 0.6); }
.dark .legal-doc .border-black\/5 { border-color: rgb(225 225 225 / 0.05); }
.dark .legal-doc .border-black\/10 { border-color: rgb(225 225 225 / 0.1); }
.dark .legal-doc .border-black\/20 { border-color: rgb(225 225 225 / 0.2); }
.dark .legal-doc .bg-black\/5 { background-color: rgb(225 225 225 / 0.05); }
.dark .legal-doc .hover\:bg-black:hover { background-color: var(--color-surface-pressed); }

/* Cookie-preferences bespoke controls (the near-black #0A0A0A save/accept
 * buttons + #F5F5F5 hover). Same scoped-override idiom; the buttons' bg-white
 * was swapped to bg-surface-raised inline (byte-identical light). */
.dark .legal-doc .text-\[\#0A0A0A\] { color: var(--color-text-primary); }
.dark .legal-doc .border-\[\#0A0A0A\] { border-color: var(--color-outline); }
.dark .legal-doc .bg-\[\#0A0A0A\] { background-color: var(--color-surface-container-high); }
.dark .legal-doc .hover\:bg-\[\#F5F5F5\]:hover { background-color: var(--color-surface-hover); }

/* ───────────────────────────────────────────────────────────────────
 * Blog (index + post) JOIN the dark-eligible set (marketing-dark leg). Like the
 * legal pages, BlogPage/BlogPostPage were hand-authored against a crisp
 * near-black zinc editorial ink ramp (#09090B and its alphas, plus the
 * zinc-900/600/500/400 muted steps) — but applied as INLINE styles, which the
 * legal-doc utility-class remap can't reach (inline styles out-specify any
 * selector). So the same scoped-remap spirit, expressed as CSS VARIABLES: each
 * page root carries `blog-doc`, the LIGHT values ARE the original literals
 * (byte-identical light), and `.dark .blog-doc` remaps them to the DS-dark
 * neutrals. --blog-ink is the primary ink as an rgb TRIPLET so the page's alpha
 * ramp (rgb(var(--blog-ink) / α)) carries over unchanged; in dark it is
 * 225 225 225 = DS text.primary #E1E1E1, the same target the legal-doc black-ink
 * remap uses. The prose BODY of a post is untouched — MDXContent already ships
 * its own dark: variants (the docs-dark treatment). The decorative cover /
 * blueprint miniatures keep their own white-card literals in both modes (a
 * documented content pass, matching the house screenshot precedent). */
.blog-doc {
  --blog-ink: 9 9 11;           /* #09090B zinc-950 — primary ink (opaque + alphas) */
  --blog-ink-strong: #18181B;   /* zinc-900 — card heading */
  --blog-ink-muted: #52525B;    /* zinc-600 — excerpt / muted body */
  --blog-ink-faint: #71717A;    /* zinc-500 — byline / meta */
  --blog-ink-fainter: #A1A1AA;  /* zinc-400 — separators */
}
.dark .blog-doc {
  --blog-ink: 225 225 225;                         /* = DS text.primary #E1E1E1 as a triplet */
  --blog-ink-strong: var(--color-text-primary);    /* #E1E1E1 */
  --blog-ink-muted: var(--color-text-secondary);   /* #C6C6C6 */
  --blog-ink-faint: var(--color-text-secondary);   /* #C6C6C6 — size/weight carry the tier */
  --blog-ink-fainter: var(--color-text-disabled);  /* #575757 — faint separators */
}

/* Cookie consent analytics toggle. Was an inline backgroundColor (#0080FF on /
 * #E5E7EB off); moved to a class + data-on attribute so the OFF track can flip
 * to a dark surface in dark while the LIGHT values stay byte-identical. ON
 * stays brand blue in both modes; the knob (bg-white) stays white. */
.cookie-toggle { background-color: #E5E7EB; }
.cookie-toggle[data-on="true"] { background-color: #0080FF; }
.dark .cookie-toggle { background-color: var(--color-surface-container-high); }
.dark .cookie-toggle[data-on="true"] { background-color: var(--brand-primary); }
/* Hover indication (the site-wide hover law): the switch had none in either
 * mode. A filter step works on all four track fills above without re-deriving
 * any of them: darken in light, lighten in dark. */
.cookie-toggle:hover { filter: brightness(0.94); }
.dark .cookie-toggle:hover { filter: brightness(1.25); }

/* Cookie consent banner (CookieBanner.jsx) — the fixed-bottom GDPR banner is
 * hand-authored against pure-white + near-black (#0A0A0A) Tailwind literals,
 * the SAME idiom as the legal pages. It shows on every dark-eligible route now
 * that the home joins dark (held back only while an editor surface is on
 * screen — that holdback is unchanged). Its `bg-white` roots were swapped to
 * `bg-surface-raised` inline (byte-identical light); the remaining literals are
 * remapped to the DS-dark inks here, scoped to `.dark .cookie-banner` so light
 * stays byte-identical and these out-specify the Tailwind utilities they
 * override. Mirrors the `.dark .legal-doc` block above. */
.dark .cookie-banner { border-color: var(--color-outline-variant); }
.dark .cookie-banner .text-\[\#0A0A0A\] { color: var(--color-text-primary); }
.dark .cookie-banner .hover\:text-\[\#0A0A0A\]:hover { color: var(--color-text-primary); }
.dark .cookie-banner .border-\[\#0A0A0A\] { border-color: var(--color-outline); }
.dark .cookie-banner .hover\:bg-\[\#F5F5F5\]:hover { background-color: var(--color-surface-hover); }
.dark .cookie-banner .text-\[\#71717A\] { color: var(--color-text-secondary); }
.dark .cookie-banner .decoration-\[\#0A0A0A\]\/30 { text-decoration-color: rgb(225 225 225 / 0.3); }
.dark .cookie-banner .hover\:decoration-\[\#0A0A0A\]\/70:hover { text-decoration-color: rgb(225 225 225 / 0.7); }
.dark .cookie-banner .decoration-\[\#71717A\]\/40 { text-decoration-color: rgb(198 198 198 / 0.4); }

/* --- HeroExperience chunk reveal animations ---
 *
 * Based on the "creating element" shimmer in the Brilliant client's overlay
 * painter (views/hightlights_overlay_painter.dart): a 1px stroke outline
 * swept by a horizontal gradient with opacity fading in and out, plus a
 * subtle blurred glow behind it. Default color: Violet #8B5CF6, matching
 * the first entry in the per-agent palette.
 */
@keyframes chunk-fade-in {
  0%   { opacity: 0; transform: translateY(4px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes chunk-border-sweep {
  0%   { background-position: 100% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}

@keyframes chunk-glow {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
  20%  { box-shadow: 0 0 8px 1px rgba(139, 92, 246, 0.35); }
  55%  { box-shadow: 0 0 12px 2px rgba(139, 92, 246, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

@keyframes cursor-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.chunk-reveal {
  animation:
    chunk-fade-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both,
    chunk-glow 2s ease-out both;
  position: relative;
  /* Intentionally NO CSS transition on color/bg/stroke/fill. Pass-1's
   * theme cascade fires 60+ state updates at ~130ms apart; any transition
   * here gets interrupted and reversed by subsequent React re-renders,
   * producing visible dark↔light oscillation. Each element snaps instantly
   * to its new state; the `::before` shimmer sweep on .chunk-shimmer-active
   * is the only animation that marks the change. */
}

/* 1px gradient-swept border, masked to just the outline ring via
 * mask-composite exclude. Matches the Flutter stroke-outline sweep.
 *
 * chunk-reveal::after fires ONCE on mount (initial creation shimmer).
 * chunk-shimmer-active::before fires each time the class is (re-)added
 * (modification shimmer), and is cleared from state after the animation
 * duration so it can re-trigger on the next modify. */
.chunk-reveal::after,
.chunk-shimmer-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0) 0%,
    rgba(139, 92, 246, 0.15) 25%,
    rgba(139, 92, 246, 0.7) 50%,
    rgba(139, 92, 246, 0.15) 75%,
    rgba(139, 92, 246, 0) 100%
  );
  background-size: 260% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: chunk-border-sweep 0.8s ease-out both;
}

/* Modification shimmer — the ::before border sweep rule above handles the
 * visual; we intentionally DO NOT set `animation` on the element itself.
 * Setting a shorthand here would replace .chunk-reveal's animation list,
 * and removing this class later would cause chunk-fade-in to re-run from
 * 0% (translateY(4px) scale(0.99)) — making every shimmered element pop
 * down and back mid-sequence. Leaving the element's animation untouched
 * keeps the chunk stable while the ::before pseudo plays the sweep. */

.hero-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: #3B8BFF;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: cursor-blink 1.1s step-end infinite;
}

/* SVG-friendly fade-in (no ::after shimmer, since pseudo-elements don't
 * work on SVG children). Used on <g> elements that conditionally mount. */
@keyframes svg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.svg-reveal {
  animation: svg-fade-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }


/* Feature marquee — pills scroll left continuously. Two identical
 * tracks sit back-to-back; translating the row by -50% lands the second
 * copy exactly where the first began, so the loop is seamless. The
 * edge mask fades pills into the background at both ends. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  /* Duration is set inline by FeatureMarquee.jsx from the measured row width
   * (constant px/sec on every device); this 45s is only the pre-measure /
   * no-JS fallback. */
  animation: marquee-scroll 45s linear infinite;
}
.marquee-track--reverse {
  animation-name: marquee-scroll-reverse;
}
/* Edge fade. On mobile the fade is small (24px) so the pills aren't
 * swallowed; on large screens it widens to 90px for a softer falloff. */
/* Edge fade. Small (24px) on mobile so the pills aren't swallowed; wider
 * (90px) on large screens for a softer falloff. Side margins are set
 * inline to the clamped guide insets so the marquee tracks the guides. */
.marquee-mask {
  --fade: 24px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}
@media (min-width: 1024px) {
  .marquee-mask {
    --fade: 90px;
  }
}
/* The marquee is a core brand element of the hero, so it keeps scrolling
 * even under reduced-motion — just slower and gentler. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 90s; }
}

/* Vertical logo rails (integrations section). Two stacked copies; -50%
 * lands the second copy where the first began for a seamless loop. */
@keyframes marquee-vert-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes marquee-vert-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.marquee-vtrack {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: -moz-max-content;
  height: max-content;
  will-change: transform;
  animation: marquee-vert-up 36s linear infinite;
}
.marquee-vtrack--down {
  animation-name: marquee-vert-down;
}
.marquee-vmask {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-vtrack { animation-duration: 80s; }
}
/* Integrations logo rails — chip + rail width halve on mobile. */
.integrates-tools {
  --chip: 55.79px;
  --rail-w: 88px;
}
@media (max-width: 767px) {
  .integrates-tools {
    --chip: 27.9px;
    --rail-w: 44px;
  }
}

/* ───────────────────────────────────────────────────────────────────
 * Mobile / input-adaptive utilities (the 2026-07 mobile program).
 * Every rule here is inert on a desktop browser: .scrollbar-none only
 * matters once a strip actually overflows (desktop strips fit), and the
 * pointer-gated blocks never match a fine-pointer device.
 * ─────────────────────────────────────────────────────────────────── */

/* Hidden-chrome horizontal scroller (the shell tab strip): content scrolls,
   no scrollbar is drawn on any engine. */
.scrollbar-none {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (pointer: coarse) {
  /* Chrome that only makes sense with a keyboard (the nav's ⌘K badge). */
  .coarse-hidden {
    display: none !important;
  }

  /* Touch-target floor: extends the TAPPABLE area of a small control to at
     least 40x40 without changing its rendered size or its layout (the
     pseudo-element is positioned, paints nothing, and is part of its
     element for hit-testing). Interactive CHILDREN of a .tap-40 element
     still win hit-testing (they paint above the ::after). */
  .tap-40 {
    position: relative;
  }
  .tap-40::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 40px);
    height: max(100%, 40px);
    transform: translate(-50%, -50%);
  }
}

@media (pointer: fine) {
  /* Backdrop modals drag by their header (fine pointers only — on touch,
     dragging fights scroll and the modals are near-fullscreen anyway). */
  [data-modal-drag-handle] {
    cursor: grab;
  }
  [data-modal-drag-handle]:active {
    cursor: grabbing;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * INTERACTION LAYER: the SITE-WIDE shared button / row / focus grammar
 * (SPEC_PLATFORM_POLISH decisions 3, 4, 5; born on the platform, ruled
 * site-wide by the founder 2026-08-11: the marketing home, pricing, docs,
 * blog and legal chrome enroll in the SAME primitives).
 *
 * ONE HOME: this lives here, not in a separate platform.css, because
 * index.css is already the site's single global stylesheet — it is
 * imported exactly once (src/index.js: `import "./index.css"`), it owns
 * the generated design tokens (`@import "./generated/tokens.css"` above),
 * the Tailwind layers, and every other cross-cutting web-local rule. There
 * is no distinct "platform entry" to hang a second CSS file off, so a new
 * platform.css would only need re-importing from here anyway (and a bare
 * `@import` after `@tailwind` is invalid ordering). Interaction primitives
 * belong beside the tokens they consume. Placed AFTER `@tailwind utilities`
 * so these classes win ties over utilities without `!important`.
 *
 * Everything below is expressed against the generated DS vars (never hex,
 * never a baked rgba() literal), so the whole layer flips correctly the day
 * `.dark` lands. Colour/hover feedback transitions only — NO enter/exit or
 * position motion anywhere (decision 4: instant pop is the personality).
 * The focus ring is the DS primary at 20% (profileShared FOCUS_RING's ring
 * layer). Its
 * field inner-shadow layer is deliberately dropped here — that inset is a
 * field's RESTING chrome, not a focus affordance, and would be an artefact
 * on a button / tab / link-span.
 * ─────────────────────────────────────────────────────────────────── */

/* Base: every .pf-btn is a pointer target with instant colour feedback and a
   visible keyboard focus ring. Disabled halves opacity, drops the pointer,
   and suppresses all hover/active response (guards below). box-shadow is NOT
   transitioned — the focus ring must pop, not fade (decision 4). */
.pf-btn {
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease, filter 120ms ease;
}
.pf-btn:disabled,
.pf-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/* Shared keyboard focus ring — buttons and standalone focusables (.pf-focus
   for tabs, sliders, role=link spans). :focus-visible only, so a mouse press
   never lights it. */
.pf-btn:focus-visible,
.pf-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Solid button = THE primary CTA (Save, Create, Upgrade, Follow, Sign in,
   Send, Retry, checkout…). Brilliant blue fill + white ink, in BOTH themes:
   brand is absolute per the DS (--brand-primary is #0080FF in light AND dark,
   never re-mapped under .dark), so blue fill + white ink stands. This
   deliberately SUPERSEDES the old solid-flips-to-light dark behavior for
   primaries — a primary is blue everywhere, never a neutral chip that inverts.
   Hover/active darken the blue via filter (the CTA_BLUE brightness grammar).
   Founder-directed, Lior 2026-07-30.
   NOTE: an inline background on a consumer still wins the cascade over this
   class, so a NON-primary (danger, deliberately-dark chip, Following state)
   must NOT wear .pf-btn--solid — it uses --danger/--outlined/--ghost or its
   own literal fill. Every primary consumer drops its inline neutral fill+ink
   and lets this class carry blue+white. */
.pf-btn--solid {
  background-color: var(--brand-primary);
  color: #ffffff;
}
.pf-btn--solid:not(:disabled):not([aria-disabled="true"]):hover {
  filter: brightness(0.92);
}
.pf-btn--solid:not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(0.88);
}

/* Outlined / ghost: neutral surface hover then pressed. (One rule for both —
   the border vs. no-border difference is the consumer's base style.)
   `!important` on the hover/active fill is DELIBERATE and load-bearing: a
   consumer that pins an inline `background` (even "transparent", or a resting
   `C.surface` / `C.white` fill) would otherwise WIN the cascade over this
   pseudo-class rule (inline beats a selector), so the hover would never paint,
   and the platform-wide hover-indication law would silently fail on every
   inline-bg consumer. Author `!important` outranks a normal inline declaration,
   so the transient hover/pressed feedback always shows while the consumer's
   resting fill stays untouched. */
.pf-btn--outlined:not(:disabled):not([aria-disabled="true"]):hover,
.pf-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--color-surface-hover) !important;
}
.pf-btn--outlined:not(:disabled):not([aria-disabled="true"]):active,
.pf-btn--ghost:not(:disabled):not([aria-disabled="true"]):active {
  background-color: var(--color-surface-pressed) !important;
}

/* Danger: the outlined/ghost grammar on the error role. No error-pressed
   token exists, so the pressed step deepens the container toward the error
   ink. */
.pf-btn--danger:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--color-error-container) !important;
}
.pf-btn--danger:not(:disabled):not([aria-disabled="true"]):active {
  background-color: color-mix(
    in srgb,
    var(--color-error-container) 82%,
    var(--color-error)
  ) !important;
}

/* Row / menu-item hover grammar — so JS-hover rows can migrate to CSS in the
   sweep leg (I2) without re-deriving the colour. `!important` for the same
   cascade reason as the buttons above: a row that pins an inline resting fill
   (a selected/unread state tint) would otherwise smother the hover. */
.pf-row {
  transition: background-color 120ms ease;
}
.pf-row:hover {
  background-color: var(--color-surface-hover) !important;
}

/* Dark: the ghost/outlined/row hover would be INVISIBLE on a raised ground —
   menu panels sit on --color-surface-raised (#373737), the same stop
   --color-surface-hover resolves to in dark, so a hover painting surface-hover
   reads as no change. Per the DS's own guidance (a deeper container steps one
   boldness role darker), step the whole feedback one ramp stop deeper under
   .dark: hover → surface-pressed (#454545), pressed → surface-pressed-deep
   (#575757, the exceptions block in .dark above). Visibly distinct on BOTH the
   #292929 page and the #373737 panel. Light mode is untouched (these rules only
   match under .dark, and their extra .dark class wins over the base rules). */
.dark .pf-btn--outlined:not(:disabled):not([aria-disabled="true"]):hover,
.dark .pf-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover,
.dark .pf-row:hover {
  background-color: var(--color-surface-pressed) !important;
}
.dark .pf-btn--outlined:not(:disabled):not([aria-disabled="true"]):active,
.dark .pf-btn--ghost:not(:disabled):not([aria-disabled="true"]):active {
  background-color: var(--color-surface-pressed-deep) !important;
}

/* Inline text link: the ONE home for a hoverable TEXT link (footer legal
   links, "Compare plans", forked-from, invoice links). No surface fill: a bg
   block behind inline text reads wrong, so unlike the buttons above the hover
   cue is an underline rather than a painted ground, which works on any ground.
   Colour stays the consumer's; the underline is the affordance. */
.pf-link {
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.pf-link:not([aria-disabled="true"]):hover {
  /* `!important` for the same cascade reason as the buttons above: a link
     consumer typically pins an inline `text-decoration: none` at rest, which
     would out-rank a normal :hover rule and eat the underline. So a consumer
     wires the hover with just `className="pf-link"`, no style change. */
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.pf-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Marketing NAV hover cue (founder ruling 2026-08-11: "I dislike the underline
   for hover indicator in the home page, replace it with a surface token like
   the theme toggle"). A rounded SURFACE chip on hover, matching the theme
   toggle's ghost-button treatment (surface-hover in light, surface-pressed in
   dark), NOT an underline. Painted by a ::before so the link's LAYOUT BOX is
   unchanged (the pill overflows into the strip's gap via a negative inset), and
   the text always stays on top (z-index:0 makes the link its own stacking
   context, so the -1 pill sits behind its text without leaking behind the nav).
   Colour stays the consumer's. */
.v4-navlink {
  position: relative;
  z-index: 0;
}
.v4-navlink::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 120ms ease;
  z-index: -1;
  pointer-events: none;
}
.v4-navlink:not([aria-disabled="true"]):hover::before {
  background-color: var(--color-surface-hover);
}
.dark .v4-navlink:not([aria-disabled="true"]):hover::before {
  background-color: var(--color-surface-pressed);
}

/* Horizontal tab scroller (touch devices): the FoldingTabBar's coarse-pointer
   branch. Scrollbar hidden on every engine; momentum scrolling on iOS. */
.pf-scroll-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pf-scroll-tabs::-webkit-scrollbar {
  display: none;
}

/* Form fields inherit NO text color from the theme by default, so any input
   without an explicit color renders UA-black — invisible in dark mode (the
   founder hit it on the sign-in email field; the same class of bug existed on
   every unstyled field). One low-specificity base rule kills the class; any
   component's own class/inline color still wins. */
input, textarea, select {
  color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
}

/* Placeholders must read as hints, not values. An inline
   -webkit-text-fill-color on the input (the dark-mode value fix above) paints
   the PLACEHOLDER in full primary ink too — the founder-reported "Brilliant
   hint doesn't look like a hint". ::placeholder + text-fill-color outranks the
   element-level fill, restoring the dimmed treatment in both themes. */
input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--color-text-disabled);
  -webkit-text-fill-color: var(--color-text-disabled);
  opacity: 1;
}
input::placeholder, textarea::placeholder {
  color: var(--color-text-disabled);
  -webkit-text-fill-color: var(--color-text-disabled);
  opacity: 1;
}

/* Autofilled inputs: the UA forces its own text color (black) which ignores
   inline `color`; pin the themed fill and hold the UA background off long
   enough to never flash (founder-reported dark-mode bug, 2026-08-06). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-transition: background-color 999999s ease-in-out 0s;
  transition: background-color 999999s ease-in-out 0s;
  caret-color: var(--color-text-primary);
}
.dark\:prose-invert:is(.dark *){
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.dark .dark\:hover:is(.dark *) .white-shadow-lg {
    box-shadow: 0 0 100px 0px rgba(255, 255, 255, 0.28); /* Dark mode: yellow-400 with 20% opacity */
  }
.hover\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[rgba\(0\2c 128\2c 255\2c 0\.35\)\]:hover{
  border-color: rgba(0,128,255,0.35);
}
.hover\:border-outline-variant:hover{
  border-color: var(--color-outline-variant);
}
.hover\:bg-\[\#F5F5F5\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[rgba\(0\2c 128\2c 255\2c 0\.04\)\]:hover{
  background-color: rgba(0,128,255,0.04);
}
.hover\:bg-black\/5:hover{
  background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-surface-raised:hover{
  background-color: var(--color-surface-raised);
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:from-zinc-200:hover{
  --tw-gradient-from: #e4e4e7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-zinc-300:hover{
  --tw-gradient-to: #d4d4d8 var(--tw-gradient-to-position);
}
.hover\:text-\[\#0A0A0A\]:hover{
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-black\/60:hover{
  color: rgb(0 0 0 / 0.6);
}
.hover\:text-black\/70:hover{
  color: rgb(0 0 0 / 0.7);
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-on-surface:hover{
  color: var(--color-on-surface);
}
.hover\:text-text-primary:hover{
  color: var(--color-text-primary);
}
.hover\:text-zinc-900:hover{
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:decoration-\[\#0A0A0A\]\/70:hover{
  text-decoration-color: rgb(10 10 10 / 0.7);
}
.hover\:decoration-black:hover{
  text-decoration-color: #000;
}
.hover\:decoration-black\/60:hover{
  text-decoration-color: rgb(0 0 0 / 0.6);
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-\[0_1px_3px_rgba\(41\2c 41\2c 41\2c 0\.06\)\]:hover{
  --tw-shadow: 0 1px 3px rgba(41,41,41,0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-95:hover{
  --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);
}
.focus\:not-sr-only:focus{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:absolute:focus{
  position: absolute;
}
.focus\:left-4:focus{
  left: 1rem;
}
.focus\:top-4:focus{
  top: 1rem;
}
.focus\:z-\[100\]:focus{
  z-index: 100;
}
.focus\:rounded-lg:focus{
  border-radius: 0.5rem;
}
.focus\:border-neutral-intense:focus{
  border-color: var(--neutral-intense);
}
.focus\:border-outline:focus{
  border-color: var(--color-outline);
}
.focus\:bg-black:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.focus\:px-4:focus{
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus\:py-2:focus{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus\:text-white:focus{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group:hover .group-hover\:w-\[calc\(100\%-24px\)\]{
  width: calc(100% - 24px);
}
.group:hover .group-hover\:w-full{
  width: 100%;
}
.group:hover .group-hover\:-translate-x-1{
  --tw-translate-x: -0.25rem;
  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-on-surface{
  color: var(--color-on-surface);
}
.dark\:divide-\[var\(--color-outline-variant\)\]:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: var(--color-outline-variant);
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-outline:is(.dark *){
  border-color: var(--color-outline);
}
.dark\:border-outline-variant:is(.dark *){
  border-color: var(--color-outline-variant);
}
.dark\:border-zinc-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.dark\:border-t-outline-variant:is(.dark *){
  border-top-color: var(--color-outline-variant);
}
.dark\:bg-\[var\(--color-surface-container-high\)\]:is(.dark *){
  background-color: var(--color-surface-container-high);
}
.dark\:bg-red-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.dark\:bg-surface:is(.dark *){
  background-color: var(--color-surface);
}
.dark\:bg-surface-container:is(.dark *){
  background-color: var(--color-surface-container);
}
.dark\:bg-zinc-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.dark\:from-zinc-900:is(.dark *){
  --tw-gradient-from: #18181b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:to-black:is(.dark *){
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.dark\:text-\[var\(--color-text-display\)\]:is(.dark *){
  color: var(--color-text-display);
}
.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.dark\:text-text-primary:is(.dark *){
  color: var(--color-text-primary);
}
.dark\:text-text-secondary:is(.dark *){
  color: var(--color-text-secondary);
}
.dark\:text-violet-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-white\/60:is(.dark *){
  color: rgb(255 255 255 / 0.6);
}
.dark\:text-zinc-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.dark\:shadow-gray-800\/50:is(.dark *){
  --tw-shadow-color: rgb(31 41 55 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.dark\:hover\:border-\[rgba\(0\2c 128\2c 255\2c 0\.35\)\]:hover:is(.dark *){
  border-color: rgba(0,128,255,0.35);
}
.dark\:hover\:bg-\[rgba\(0\2c 128\2c 255\2c 0\.04\)\]:hover:is(.dark *){
  background-color: rgba(0,128,255,0.04);
}
.dark\:hover\:bg-\[var\(--color-surface-container-high\)\]:hover:is(.dark *){
  background-color: var(--color-surface-container-high);
}
.dark\:hover\:bg-surface-container:hover:is(.dark *){
  background-color: var(--color-surface-container);
}
.hover\:dark\:from-zinc-800:is(.dark *):hover{
  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:dark\:to-zinc-700:is(.dark *):hover{
  --tw-gradient-to: #3f3f46 var(--tw-gradient-to-position);
}
.dark\:hover\:text-\[var\(--neutral-intense\)\]:hover:is(.dark *){
  color: var(--neutral-intense);
}
.dark\:hover\:text-blue-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-text-primary:hover:is(.dark *){
  color: var(--color-text-primary);
}
.dark\:hover\:text-white:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media not all and (min-width: 640px){

  .max-sm\:hidden{
    display: none;
  }
}
@media (min-width: 480px){

  .min-\[480px\]\:block{
    display: block;
  }
}
@media (min-width: 640px){

  .sm\:-bottom-\[7px\]{
    bottom: -7px;
  }

  .sm\:-left-\[7px\]{
    left: -7px;
  }

  .sm\:-right-\[7px\]{
    right: -7px;
  }

  .sm\:-top-\[7px\]{
    top: -7px;
  }

  .sm\:mb-16{
    margin-bottom: 4rem;
  }

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

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

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

  .sm\:hidden{
    display: none;
  }

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

  .sm\:w-3{
    width: 0.75rem;
  }

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

  .sm\:flex-initial{
    flex: 0 1 auto;
  }

  .sm\:flex-none{
    flex: none;
  }

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

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

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

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

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

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

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

  .sm\:p-10{
    padding: 2.5rem;
  }

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

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

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

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

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

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

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

  .sm\:pb-20{
    padding-bottom: 5rem;
  }

  .sm\:pt-16{
    padding-top: 4rem;
  }

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

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

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

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

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

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

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

  .sm\:outline-4{
    outline-width: 4px;
  }
}
@media (min-width: 768px){

  .md\:left-\[292px\]{
    left: 292px;
  }

  .md\:right-\[292px\]{
    right: 292px;
  }

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

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:w-56{
    width: 14rem;
  }

  .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\:flex-row{
    flex-direction: row;
  }

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

  .md\:gap-6{
    gap: 1.5rem;
  }

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

  .md\:border-t-0{
    border-top-width: 0px;
  }

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

  .md\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }
}
@media (min-width: 1024px){

  .lg\:right-\[292px\]{
    right: 292px;
  }

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

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

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

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

  .lg\:grid-cols-\[2fr_1fr_1fr_1fr_1fr\]{
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }

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

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

  .lg\:border-t-0{
    border-top-width: 0px;
  }

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

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
@media (min-width: 1280px){

  .xl\:right-\[292px\]{
    right: 292px;
  }

  .xl\:block{
    display: block;
  }

  .xl\:inline{
    display: inline;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:hidden{
    display: none;
  }

  .xl\:h-11{
    height: 2.75rem;
  }

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

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

  .xl\:px-32{
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xl\:py-48{
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

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

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

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

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

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

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

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

  .xl\:leading-relaxed{
    line-height: 1.625;
  }
}
.\[\&\>\*\]\:min-w-0>*{
  min-width: 0px;
}
.\[\&\>\*\]\:flex-1>*{
  flex: 1 1 0%;
}
.\[\&_code\]\:before\:content-none code::before{
  --tw-content: none;
  content: var(--tw-content);
}
.\[\&_code\]\:after\:content-none code::after{
  --tw-content: none;
  content: var(--tw-content);
}
.\[\&_img\]\:my-0 img{
  margin-top: 0px;
  margin-bottom: 0px;
}
.\[\&_img\]\:w-full img{
  width: 100%;
}