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

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

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

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

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

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --radius: 0.5rem;

    --background: 0.05 0 0;
    --foreground: 0.95 0 0;
    --card: 0.08 0 0;
    --card-foreground: 0.95 0 0;
    --popover: 0.1 0 0;
    --popover-foreground: 0.95 0 0;

    --primary: 0.95 0 0;
    --primary-foreground: 0.05 0 0;

    --secondary: 0.12 0 0;
    --secondary-foreground: 0.85 0 0;
    --muted: 0.12 0 0;
    --muted-foreground: 0.55 0 0;

    --accent: 0.15 0 0;
    --accent-foreground: 0.95 0 0;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.98 0 0;

    --border: 0.18 0 0;
    --input: 0.18 0 0;
    --ring: 0.7 0 0;

    --chart-1: 0.65 0.22 40;
    --chart-2: 0.6 0.12 185;
    --chart-3: 0.4 0.07 227;
    --chart-4: 0.83 0.19 84;
    --chart-5: 0.77 0.19 70;

    --sidebar: 0.08 0 0;
    --sidebar-foreground: 0.95 0 0;
    --sidebar-primary: 0.95 0 0;
    --sidebar-primary-foreground: 0.05 0 0;
    --sidebar-accent: 0.12 0 0;
    --sidebar-accent-foreground: 0.85 0 0;
    --sidebar-border: 0.18 0 0;
    --sidebar-ring: 0.7 0 0;
  }

  .dark {
    --background: 0.05 0 0;
    --foreground: 0.95 0 0;
    --card: 0.08 0 0;
    --card-foreground: 0.95 0 0;
    --popover: 0.1 0 0;
    --popover-foreground: 0.95 0 0;

    --primary: 0.95 0 0;
    --primary-foreground: 0.05 0 0;

    --secondary: 0.12 0 0;
    --secondary-foreground: 0.85 0 0;
    --muted: 0.12 0 0;
    --muted-foreground: 0.55 0 0;

    --accent: 0.15 0 0;
    --accent-foreground: 0.95 0 0;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.98 0 0;

    --border: 0.18 0 0;
    --input: 0.18 0 0;
    --ring: 0.7 0 0;

    --chart-1: 0.65 0.22 40;
    --chart-2: 0.6 0.12 185;
    --chart-3: 0.4 0.07 227;
    --chart-4: 0.83 0.19 84;
    --chart-5: 0.77 0.19 70;

    --sidebar: 0.08 0 0;
    --sidebar-foreground: 0.95 0 0;
    --sidebar-primary: 0.95 0 0;
    --sidebar-primary-foreground: 0.05 0 0;
    --sidebar-accent: 0.12 0 0;
    --sidebar-accent-foreground: 0.85 0 0;
    --sidebar-border: 0.18 0 0;
    --sidebar-ring: 0.7 0 0;
  }

  * {
  border-color: oklch(var(--border));
}

  .v2-copper * {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}

  html {
    color-scheme: dark;
  }

  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  ::-moz-selection {
    background: oklch(var(--foreground));
    color: oklch(var(--background));
  }

  ::selection {
    background: oklch(var(--foreground));
    color: oklch(var(--background));
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.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-left: 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-left: 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-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 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(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 rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 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-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 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;
  text-align: left;
  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-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 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(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: 17 24 39;
  --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: 255 255 255;
  --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(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.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-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 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 > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *: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-left: 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-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 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;
}
/* ---------- scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s
      cubic-bezier(0.16, 0.84, 0.44, 1);
  }
.reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
.stagger > .reveal:nth-child(1) {
    transition-delay: 0s;
  }
.stagger > .reveal:nth-child(2) {
    transition-delay: 0.08s;
  }
.stagger > .reveal:nth-child(3) {
    transition-delay: 0.16s;
  }
.stagger > .reveal:nth-child(4) {
    transition-delay: 0.24s;
  }
.stagger > .reveal:nth-child(5) {
    transition-delay: 0.32s;
  }
.stagger > .reveal:nth-child(6) {
    transition-delay: 0.4s;
  }
/* ---------- layout ---------- */
.v2-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1180px;
  padding-left: 2rem;
  padding-right: 2rem;
}
.v2-section {
  position: relative;
  border-bottom-width: 1px;
  border-color: oklch(var(--border));
  padding-top: 110px;
  padding-bottom: 110px;
}

.v2-copper .v2-section {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-copper .v2-section {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
@media (min-width: 1024px) {

  .v2-section {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
/* ---------- panels & grids ---------- */
.v2-panel {
  border-radius: 1rem;
  border-width: 1px;
  border-color: oklch(var(--border));
  padding: 2rem;
  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;
}
.v2-copper .v2-panel {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-panel {
    background: linear-gradient(
      180deg,
      oklch(var(--card)),
      oklch(var(--background))
    );
  }
.v2-panel:hover {
    border-color: oklch(var(--stsh-accent-dim));
  }
.v2-grid-cells {
  margin-top: 3.5rem;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  border-color: oklch(var(--border));
}
.v2-copper .v2-grid-cells {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
@media (max-width: 767.98px) {
  .v2-section > .v2-wrap.v2-grid-cells {
    gap: 24px;
  }
}
.v2-grid-cells {
    background: oklch(var(--border));
  }
.v2-grid-cells > .cell {
    background: oklch(var(--background));
    padding: 1.75rem;
  }
/* ---------- CTA tile (Technical / Architecture, 6th cell) ---------- */
.v2-cta-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  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;
}
.v2-cta-tile:hover {
    background: oklch(var(--card));
  }
.v2-cta-tile:hover .v2-cta-tile-label {
    color: oklch(var(--stsh-accent));
  }
/* ---------- roadmap timeline ---------- */
.v2-timeline {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.5rem;
  max-width: 760px;
}
.v2-timeline::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 1.25rem;
    top: 0px;
    width: 1px;
    background: oklch(var(--border));
  }
.v2-tl-dot {
  position: absolute;
  left: 0px;
  top: 0.125rem;
  display: flex;
  height: 41px;
  width: 41px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: oklch(var(--border));
}
.v2-copper .v2-tl-dot {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-tl-dot {
    background: oklch(var(--background));
  }
.v2-tl-dot.done {
    border-color: oklch(var(--stsh-accent));
    color: oklch(var(--stsh-accent));
  }
/* ---------- buttons ---------- */
.v2-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  border-width: 1px;
  border-color: transparent;
  padding-left: 26px;
  padding-right: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.v2-btn-primary {
    background: oklch(var(--foreground));
    color: oklch(var(--background));
  }
.v2-btn-primary:hover {
    background: oklch(var(--stsh-accent));
  }
.v2-btn-outline {
  border-color: oklch(var(--border));
  color: oklch(var(--foreground));
}
.v2-copper .v2-btn-outline {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-btn-outline:hover {
    border-color: oklch(var(--stsh-accent));
    color: oklch(var(--stsh-accent));
  }
/* ---------- misc accents ---------- */
.v2-accent {
    color: oklch(var(--stsh-accent));
  }
.v2-status-tag::before,
  .v2-status-strip span::before {
    content: "";
    display: inline-block;
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background: oklch(var(--stsh-accent));
  }
/* labelled node used inside authority/data-flow diagrams */
.v2-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: oklch(var(--border));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}
.v2-copper .v2-node {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-node {
    background: linear-gradient(
      180deg,
      oklch(var(--card)),
      oklch(var(--background))
    );
  }
.v2-node-label {
  font-family: var(--font-mono), monospace;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: oklch(var(--foreground));
}
.v2-node-sub {
  margin-top: 0.25rem;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.v2-copper .v2-node-sub {
  color: oklch(var(--stsh-on-accent) / 0.75);
}
/* disclosure panel — shares the FAQ "+" affordance, used for
     limitations and optional deeper cryptographic detail */
.v2-disclosure {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: oklch(var(--border));
  background-color: oklch(var(--card));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.v2-copper .v2-disclosure {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
.v2-disclosure summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-family: var(--font-display), serif;
  font-size: 1.05rem;
    list-style: none;
}
.v2-disclosure summary::-webkit-details-marker {
    display: none;
  }
.v2-disclosure summary::after {
    content: "+";
    color: oklch(var(--muted-foreground));
    font-size: 1.3rem;
    transition: transform 0.25s ease;
  }
.v2-disclosure[open] summary::after {
    transform: rotate(45deg);
    color: oklch(var(--stsh-accent));
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-8 {
  bottom: 2rem;
}
.bottom-9 {
  bottom: 2.25rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-11 {
  left: 2.75rem;
}
.left-2 {
  left: 0.5rem;
}
.left-5 {
  left: 1.25rem;
}
.left-8 {
  left: 2rem;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[6\%\] {
  left: 6%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-11 {
  right: 2.75rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-8 {
  right: 2rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-24 {
  top: 6rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[100px\] {
  top: 100px;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[40\%\] {
  top: 40%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[5\] {
  z-index: 5;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[6\] {
  z-index: 6;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.\!mb-0 {
  margin-bottom: 0px !important;
}
.\!mb-2 {
  margin-bottom: 0.5rem !important;
}
.\!mt-10 {
  margin-top: 2.5rem !important;
}
.-ml-4 {
  margin-left: -1rem;
}
.-ml-px {
  margin-left: -1px;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[18px\] {
  margin-bottom: 18px;
}
.mb-\[22px\] {
  margin-bottom: 22px;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-11 {
  margin-top: 2.75rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[0\.62em\] {
  margin-top: 0.62em;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[21\/9\] {
  aspect-ratio: 21/9;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[41px\] {
  height: 41px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.h-svh {
  height: 100svh;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-20 {
  min-height: 5rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[0\.6em\] {
  min-height: 0.6em;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[110vw\] {
  width: 110vw;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[41px\] {
  width: 41px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[1180px\] {
  max-width: 1180px;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[34ch\] {
  max-width: 34ch;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[600px\] {
  max-width: 600px;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[70ch\] {
  max-width: 70ch;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2\.5 {
  --tw-translate-y: 0.625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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 pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.justify-self-start {
  justify-self: start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.\!border-b-0 {
  border-bottom-width: 0px !important;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[oklch\(var\(--stsh-accent\)\)\] {
  border-color: oklch(var(--stsh-accent));
}
.border-\[oklch\(var\(--stsh-accent-dim\)\)\] {
  border-color: oklch(var(--stsh-accent-dim));
}
.border-border {
  border-color: oklch(var(--border));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[oklch\(var\(--border\)\)\] {
  background-color: oklch(var(--border));
}
.bg-\[oklch\(var\(--stsh-accent\)\)\] {
  background-color: oklch(var(--stsh-accent));
}
.bg-\[oklch\(var\(--stsh-accent-dim\)\)\] {
  background-color: oklch(var(--stsh-accent-dim));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.\!p-8 {
  padding: 2rem !important;
}
.\!p-\[30px\] {
  padding: 30px !important;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.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-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[26px\] {
  padding-left: 26px;
  padding-right: 26px;
}
.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-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-\[110px\] {
  padding-top: 110px;
  padding-bottom: 110px;
}
.py-\[13px\] {
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-\[22px\] {
  padding-top: 22px;
  padding-bottom: 22px;
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-\[110px\] {
  padding-bottom: 110px;
}
.pb-\[22px\] {
  padding-bottom: 22px;
}
.pb-\[72px\] {
  padding-bottom: 72px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-\[60px\] {
  padding-left: 60px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-\[110px\] {
  padding-top: 110px;
}
.pt-\[72px\] {
  padding-top: 72px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.\!text-\[1\.05rem\] {
  font-size: 1.05rem !important;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.5em\] {
  font-size: 0.5em;
}
.text-\[0\.85rem\] {
  font-size: 0.85rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[0\.92rem\] {
  font-size: 0.92rem;
}
.text-\[0\.95rem\] {
  font-size: 0.95rem;
}
.text-\[0\.98rem\] {
  font-size: 0.98rem;
}
.text-\[0\.9rem\] {
  font-size: 0.9rem;
}
.text-\[1\.02rem\] {
  font-size: 1.02rem;
}
.text-\[1\.05rem\] {
  font-size: 1.05rem;
}
.text-\[1\.15rem\] {
  font-size: 1.15rem;
}
.text-\[1\.1rem\] {
  font-size: 1.1rem;
}
.text-\[1\.25rem\] {
  font-size: 1.25rem;
}
.text-\[1\.2rem\] {
  font-size: 1.2rem;
}
.text-\[1\.35rem\] {
  font-size: 1.35rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[1rem\] {
  font-size: 1rem;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[clamp\(\.95rem\2c 1\.2vw\2c 1\.1rem\)\] {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
}
.text-\[clamp\(1\.05rem\2c 1\.5vw\2c 1\.4rem\)\] {
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
}
.text-\[clamp\(1\.35rem\2c 2\.4vw\2c 1\.9rem\)\] {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.text-\[clamp\(1\.4rem\2c 2\.6vw\2c 2rem\)\] {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.text-\[clamp\(1\.5rem\2c 2\.6vw\2c 2rem\)\] {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.4rem\)\] {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.text-\[clamp\(1rem\2c 1\.3vw\2c 1\.2rem\)\] {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.text-\[clamp\(2\.2rem\2c 5vw\2c 4\.2rem\)\] {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.text-\[clamp\(2\.4rem\2c 4\.4vw\2c 4rem\)\] {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.normal-case {
  text-transform: none;
}
.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-\[0\.98\] {
  line-height: 0.98;
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-\[1\.6\] {
  line-height: 1.6;
}
.leading-\[1\.75\] {
  line-height: 1.75;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[-0\.035em\] {
  letter-spacing: -0.035em;
}
.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(var\(--stsh-accent\)\)\] {
  color: oklch(var(--stsh-accent));
}
.text-\[oklch\(var\(--stsh-on-accent\)\)\] {
  color: oklch(var(--stsh-on-accent));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.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_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-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-filter {
  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-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-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-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.text-balance {
    text-wrap: balance;
  }
.section-space {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 640px) {

  .section-space {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.eyebrow {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.v2-copper .eyebrow {
  color: oklch(var(--stsh-on-accent) / 0.75);
}
.section-title {
  font-family: var(--font-display), serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
    text-wrap: balance;
}
@media (min-width: 640px) {

  .section-title {
    font-size: 3rem;
    line-height: 1;
  }
}
.scanline-glow {
    position: relative;
  }
.scanline-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 100%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.5;
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[animation-delay\:120ms\] {
  animation-delay: 120ms;
}
.\[animation-delay\:150ms\] {
  animation-delay: 150ms;
}
.\[animation-delay\:180ms\] {
  animation-delay: 180ms;
}
.\[animation-delay\:60ms\] {
  animation-delay: 60ms;
}
.\[transition-duration\:250ms\] {
  transition-duration: 250ms;
}
.\[transition-duration\:400ms\] {
  transition-duration: 400ms;
}
.\[transition-duration\:600ms\] {
  transition-duration: 600ms;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

.hero-grid {
  background-image: linear-gradient(
      oklch(var(--border) / 0.28) 1px,
      transparent 1px
    ), linear-gradient(90deg, oklch(var(--border) / 0.28) 1px, transparent 1px),
    radial-gradient(
      circle at 70% 35%,
      oklch(var(--foreground) / 0.07),
      transparent 34%
    );
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

.text-gradient-hero {
  background: linear-gradient(
    180deg,
    oklch(var(--foreground)) 0%,
    oklch(var(--foreground) / 0.85) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.panel-subtle {
  background: oklch(var(--card) / 0.6);
  border: 1px solid oklch(var(--border));
  backdrop-filter: blur(8px);
}

.dot-mesh-animated {
  animation: mesh-float 20s ease-in-out infinite;
}

/* ============================================================
   Design V2 — shared system ported from design V2/clean/*.html
   Tokens re-expressed against the existing oklch vars above.
   See design V2/CLAUDE_CODE_DISPATCH.md for the reference set.
   ============================================================ */

:root {
  /* Amber accent from the signed-off prototypes (#e8a05c).
     NOTE: this is warmer/softer than --chart-1 (oklch(0.65 0.22 40)),
     which reads closer to #e05a2b. The prototypes are authoritative
     for the redesigned pages, so they get their own token rather than
     silently shifting --chart-1 for the whole app. */
  --stsh-accent: 0.75 0.098 65;
  --stsh-accent-dim: 0.75 0.098 65 / 0.33;

  /* ---------- motion tokens ----------
     A small shared scale so component motion is consistent rather than each
     transition inventing its own duration. Durations are grouped by the size
     of the thing moving, not by where it lives.

     Opening establishes a relationship and may take its time; closing should
     feel decisive and get out of the way. Hence the separate enter/exit
     easings rather than one curve used in both directions. */
  --motion-instant: 90ms;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* page header wash for the three companion pages */
.v2-page-header {
  background-image: linear-gradient(
      oklch(var(--border) / 0.28) 1px,
      transparent 1px
    ), linear-gradient(90deg, oklch(var(--border) / 0.28) 1px, transparent 1px),
    radial-gradient(
      circle at 78% 25%,
      oklch(var(--stsh-accent) / 0.08),
      transparent 38%
    );
  background-size: 48px 48px, 48px 48px, 100% 100%;
  animation: v2-header-in 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.05s forwards;
  opacity: 0;
  transform: translateY(14px);
}
@keyframes v2-header-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* staged hero title reveal — "Privacy" lands at 1.5s, line 2 completes at 3s */
@keyframes v2-line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.v2-hero-line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  animation-name: v2-line-in;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
  animation-duration: 1.5s;
}
.v2-hero-line-1 {
  animation-delay: 0s;
}
.v2-hero-line-2 {
  animation-delay: 1.5s;
}

@keyframes v2-scroll-cue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.v2-scroll-cue-line {
  animation: v2-scroll-cue 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .v2-hero-line,
  .v2-page-header,
  .v2-scroll-cue-line {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* FAQ disclosure — "+" marker rotating to "×" on open (design V2 homepage) */
.v2-faq-item summary {
  list-style: none;
}
.v2-faq-item summary::-webkit-details-marker {
  display: none;
}
.v2-faq-item summary::after {
  content: "+";
  color: oklch(var(--muted-foreground));
  font-size: 1.3rem;
  transition: transform 0.25s ease;
}
.v2-faq-item[open] summary::after {
  transform: rotate(45deg);
  color: oklch(var(--stsh-accent));
}

/* ============================================================
   Design V2 — Technical page: architecture flow diagrams,
   big-metric statements, disclosure panels. Extends the shared
   system above; no new visual language.
   ============================================================ */

/* copper connector glyph between flow nodes */
.v2-arrow {
  color: oklch(var(--stsh-accent));
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* dotted orbital detail — a faint dashed rule echoing the hero */
.v2-dotted-rule {
  height: 1px;
  background-image: linear-gradient(
    90deg,
    oklch(var(--border)) 0 4px,
    transparent 4px 10px
  );
  background-size: 10px 1px;
}

/* ============================================================
   Art direction layer — copper claim blocks + image headers.
   Imagery is the team's own artwork (see public/assets/images/art).
   ============================================================ */

:root {
  /* Text colour for use ON the copper block. Paired deliberately so the
     inverted section's contrast is enforced by a token, not eyeballed:
     #0c0c0d on #e8a05c ≈ 9:1, comfortably past WCAG AA. */
  --stsh-on-accent: 0.14 0 0;
}

/* A copper claim block. House rule: at most one per page (two absolute
   maximum). Reserved for CLAIMS — never CTAs, never routine facts — and used
   to break the run of dark sections. Deliberately the only place the accent
   is used as a ground rather than an accent. */
.v2-copper {
  background: oklch(var(--stsh-accent));
  color: oklch(var(--stsh-on-accent));
}
.v2-copper .eyebrow,
.v2-copper .v2-copper-sub {
  color: oklch(var(--stsh-on-accent) / 0.72);
}
.v2-copper .section-title {
  color: oklch(var(--stsh-on-accent));
}
/* Links inside the block keep an accessible affordance without colour alone. */
.v2-copper a {
  color: oklch(var(--stsh-on-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v2-copper a:focus-visible {
  outline: 2px solid oklch(var(--stsh-on-accent));
  outline-offset: 3px;
}

/* ---------- controls on a copper ground ----------
   The default button variants assume a dark ground: v2-btn-outline is white
   text on transparent, which lands at roughly 2:1 on copper and fails
   outright. Buttons inside a copper block therefore invert — dark ink on
   copper — rather than inheriting. Buttons keep their underline suppressed
   because the button shape is already the affordance. */

.v2-copper .v2-btn {
  text-decoration: none;
}
/* Primary: solid near-black. The strongest thing on the section. */
.v2-copper .v2-btn-primary {
  background: oklch(var(--stsh-on-accent));
  color: oklch(var(--stsh-accent));
}
.v2-copper .v2-btn-primary:hover {
  background: oklch(var(--background));
  color: oklch(var(--stsh-accent));
}
/* Secondary: outlined in the same ink, filling on hover. */
.v2-copper .v2-btn-outline {
  border-color: oklch(var(--stsh-on-accent) / 0.45);
  color: oklch(var(--stsh-on-accent));
}
.v2-copper .v2-btn-outline:hover {
  border-color: oklch(var(--stsh-on-accent));
  background: oklch(var(--stsh-on-accent) / 0.08);
  color: oklch(var(--stsh-on-accent));
}
.v2-copper .v2-btn:focus-visible {
  outline: 2px solid oklch(var(--stsh-on-accent));
  outline-offset: 3px;
}
/* Status strip: dots and text both invert so the strip stays readable. */
.v2-copper .v2-status-strip {
  color: oklch(var(--stsh-on-accent) / 0.78);
}
.v2-copper .v2-status-strip span::before {
  background: oklch(var(--stsh-on-accent));
}

/* Body copy, muted text and rules inside a copper block. The dark-ground
   utilities (text-muted-foreground, border-border) are near-invisible on
   copper, so anything relying on them is re-toned in ink here. */
.v2-copper .text-muted-foreground {
  color: oklch(var(--stsh-on-accent) / 0.75);
}
.v2-copper .border-border,
.v2-copper .border-t,
.v2-copper .border-b {
  border-color: oklch(var(--stsh-on-accent) / 0.22);
}
/* Zebra striping on the fee table reads as a tint of the ink, not a
   different colour. */
.v2-copper .bg-background\/40 {
  background: oklch(var(--stsh-on-accent) / 0.06);
}

/* ---------- image-backed page header ---------- */

.v2-art-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.v2-art-header > .v2-art-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.v2-art-header > .v2-art-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--art-pos, 70% 50%);
     object-position: var(--art-pos, 70% 50%);
  /* One-shot settle: the image drifts to rest as the header fades in. No
     scroll listener, no library — and reduced-motion is handled below. */
  animation: v2-art-settle 1.6s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes v2-art-settle {
  from {
    transform: scale(1.06);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Scrim: the artwork is busy through the middle, so text legibility is
   guaranteed by a gradient rather than luck. Left-weighted because the
   copy is left-aligned. */
.v2-art-header > .v2-art-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      90deg,
      oklch(var(--background)) 0%,
      oklch(var(--background) / 0.92) 38%,
      oklch(var(--background) / 0.55) 70%,
      oklch(var(--background) / 0.35) 100%
    ),
    linear-gradient(
      180deg,
      oklch(var(--background) / 0.75) 0%,
      transparent 30%,
      oklch(var(--background) / 0.65) 100%
    );
}
@media (max-width: 768px) {
  /* Narrow screens: text runs full width, so the scrim must be much
     stronger and the focal point recentred. */
  .v2-art-header > .v2-art-scrim {
    background: linear-gradient(
      180deg,
      oklch(var(--background) / 0.86) 0%,
      oklch(var(--background) / 0.78) 55%,
      oklch(var(--background) / 0.92) 100%
    );
  }
  .v2-art-header > .v2-art-media img {
    -o-object-position: 50% 40%;
       object-position: 50% 40%;
  }
}

/* ---------- inline section artwork ---------- */

.v2-art-figure {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid oklch(var(--border));
}
.v2-art-figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .v2-art-header > .v2-art-media img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Whitepaper data tables.
   Desktop: a normal table. Mobile: each row becomes a stacked card with
   the column name printed above its value, instead of a horizontally
   scrolling table squashed into 375px. The <table> markup is untouched,
   so screen readers still get real row/column semantics either way.
   ============================================================ */

.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.v2-table th,
.v2-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid oklch(var(--border));
  vertical-align: top;
}
.v2-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: oklch(var(--muted-foreground));
  border-bottom-color: oklch(var(--stsh-accent) / 0.4);
  white-space: nowrap;
}
.v2-table td {
  color: oklch(var(--muted-foreground));
  line-height: 1.6;
}
/* First column is the row's subject — keep it legible and unwrapped-ish. */
.v2-table tbody th,
.v2-table td:first-child {
  color: oklch(var(--foreground));
  font-weight: 500;
}
.v2-table tbody tr:last-child td,
.v2-table tbody tr:last-child th {
  border-bottom: none;
}
.v2-table .num {
  font-family: var(--font-mono);
  white-space: nowrap;
  color: oklch(var(--stsh-accent));
}

@media (max-width: 720px) {
  .v2-table thead {
    /* Visually hidden, still announced. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .v2-table,
  .v2-table tbody,
  .v2-table tr,
  .v2-table td,
  .v2-table tbody th {
    display: block;
    width: 100%;
  }
  .v2-table tr {
    border: 1px solid oklch(var(--border));
    border-radius: 0.75rem;
    padding: 4px 0;
    margin-bottom: 12px;
    background: oklch(var(--card));
  }
  .v2-table td,
  .v2-table tbody th {
    border-bottom: none;
    padding: 8px 16px;
  }
  /* Print the column name above the value so a stacked cell still has context. */
  .v2-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: oklch(var(--muted-foreground));
    margin-bottom: 4px;
  }
  .v2-table tbody th,
  .v2-table td:first-child {
    font-size: 1rem;
    padding-bottom: 2px;
  }
}

/* roadmap: gradient progression rail — copper at the built end (top),
   fading to border toward the speculative end (bottom) */
.v2-rail {
  background: linear-gradient(
    180deg,
    oklch(var(--stsh-accent) / 0.55),
    oklch(var(--border)) 65%
  );
}

/* roadmap: pulsing halo on the single in-progress milestone dot */
@keyframes v2-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(var(--stsh-accent) / 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px oklch(var(--stsh-accent) / 0);
  }
}
.v2-pulse {
  animation: v2-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .v2-pulse {
    animation: none !important;
  }
}

/* ==========================================================================
   MOTION SYSTEM
   Ported from the signed-off prototype in /motion-explorations.

   Naming: motion tokens first, then reveals, then the pieces that use them.
   Everything degrades — reduced motion and JS failure are handled at the end
   of this block, not per-component.
   ========================================================================== */

:root {
  /* Named so "slick" is consistent rather than re-decided per component. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 180ms; /* hover, focus, tap */
  --dur-fast: 320ms; /* state change */
  --dur-reveal: 720ms; /* entrance */
  --dur-ambient: 1400ms; /* atmosphere */
}

/* Entrance animations hide their target until an observer fires. Gating them
   behind .js means a JS failure leaves the page fully readable rather than
   blank — the most common way a reveal system breaks in production. */
html:not(.js) .r-line > span,
html:not(.js) .r-body,
html:not(.js) .r-panel,
html:not(.js) .v2-flow-node,
html:not(.js) .v2-fact-list li {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- B2 · typed reveals ----------
   The old system gave every element the same 28px fade-up, so motion carried
   no hierarchy. Each role now gets its own entrance. */

.r-line {
  display: block;
  overflow: hidden;
}
html.js .r-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-reveal) var(--ease-out-expo);
}
html.js .reveal.in .r-line > span {
  transform: none;
}

/* Body copy fades without travelling, so it is readable immediately. */
html.js .r-body {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out-quint);
  transition-delay: 220ms;
}
html.js .reveal.in .r-body {
  opacity: 1;
}

/* Panels lift, with a copper hairline drawing across the top edge. */
html.js .r-panel {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out-quint), transform
    var(--dur-reveal) var(--ease-out-quint);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.js .reveal.in .r-panel {
  opacity: 1;
  transform: none;
}
html.js .r-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    oklch(var(--stsh-accent)),
    oklch(var(--stsh-accent) / 0)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms + 180ms);
}
html.js .reveal.in .r-panel::before {
  transform: scaleX(1);
}

/* ---------- A2b · section-edge sweep ----------
   A copper glint crosses the section's bottom edge on arrival, then
   sporadically. Animates background-position rather than translating an
   overlay: a translated full-width strip would extend past the section and
   risk horizontal overflow. */

.v2-section {
  position: relative;
}
/* bottom: 0, not -1px. Every section is position:relative, so a later sibling
   with an opaque background paints over anything overlapping it — which is
   exactly what a -1px offset does. Half the sections on Technical have an
   opaque next sibling, and their sweep was invisible. */
.v2-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    oklch(var(--stsh-accent)) 50%,
    transparent 100%
  );
  background-size: 55% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
}
.v2-section.no-sweep::after {
  content: none;
}
.v2-section.sweep::after {
  animation: v2-edge-sweep 1700ms var(--ease-out-expo);
}
@keyframes v2-edge-sweep {
  0% {
    background-position: -60% 0;
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    background-position: 160% 0;
    opacity: 0;
  }
}

/* ---------- B4 · panel sheen ---------- */

.v2-panel,
.v2-grid-cells .cell,
.v2-node {
  position: relative;
  overflow: hidden;
}
.v2-panel::after,
.v2-grid-cells .cell::after,
.v2-node::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-quint);
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    oklch(var(--stsh-accent) / 0.13),
    transparent 62%
  );
}
/* No opt-in wrapper. Requiring a `.js-sheen` ancestor meant the effect
   silently applied to exactly one element on the whole site — every panel I
   did not remember to wrap simply had no hover. The listener is delegated at
   the document, so scoping here is unnecessary. */
.v2-panel:hover::after,
.v2-grid-cells .cell:hover::after,
.v2-node:hover::after {
  opacity: 1;
}

/* ---------- B1 · rails + scroll playhead ---------- */

.v2-rails {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Above page content, below the header. At z-index 2 it tied with content
     that sets its own z-index and lost on DOM order, leaving the rails
     painted behind opaque section backgrounds. */
  z-index: 40;
}
@media (max-width: 900px) {
  .v2-rails {
    display: none;
  }
}
.v2-rails .rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    oklch(var(--border)) 12%,
    oklch(var(--border)) 88%,
    transparent
  );
}
.v2-rails .rail.left {
  left: 32px;
}
.v2-rails .rail.right {
  right: 32px;
}
/* A playhead, not a fill bar: fixed height, position driven by --p. */
.v2-rails .rail-progress {
  position: absolute;
  left: 32px;
  width: 1px;
  height: 96px;
  top: calc(var(--p, 0) * (100vh - 96px));
  background: linear-gradient(
    180deg,
    transparent,
    oklch(var(--stsh-accent)),
    transparent
  );
  box-shadow: 0 0 12px oklch(var(--stsh-accent) / 0.5);
}
.v2-rails .rail-readout {
  position: absolute;
  left: 46px;
  top: calc(var(--p, 0) * (100vh - 96px) + 40px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: oklch(var(--stsh-accent) / 0.75);
}

/* ==========================================================================
   D1 · FLOW DIAGRAMS

   Two treatments, alternated across the site so neither becomes wallpaper:

   .v2-flow            signal path — a hairline rail, a ring at each station,
                       and a copper pulse running the length of it
   .v2-flow.is-boxed   the original cards and arrow glyphs, but the arrows now
                       light in sequence and flick downward

   Both keep the same markup and the same order, so switching is one class.
   ========================================================================== */

.v2-flow {
  position: relative;
  display: grid;
  gap: 26px;
  padding-left: 34px;
  margin-top: 56px;
}
.v2-flow::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: oklch(var(--border));
}
/* The track is the CLIPPER, sized to the dot on its cross axis.
   The pulse inside is full rail length and translates by its own width; without
   a clip its box extends a full rail past the section and creates horizontal
   page overflow — the visible dot never does, but the box does. */
.v2-flow-track {
  position: absolute;
  left: 1.5px;
  top: 10px;
  bottom: 10px;
  width: 7px;
  overflow: hidden;
  pointer-events: none;
}

.v2-flow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}
.v2-flow-node::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid oklch(var(--stsh-accent) / 0.55);
  background: oklch(var(--background));
  transition: background 400ms var(--ease-out-quint), box-shadow 400ms
    var(--ease-out-quint);
}
.v2-flow-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--foreground));
}
.v2-flow-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(var(--muted-foreground));
}
/* Arrows are redundant once the rail is continuous. */
.v2-flow:not(.is-boxed) .v2-flow-link {
  display: none;
}

/* Horizontal for wide left-to-right flows. Mobile-first: the vertical rules
   above are the default and this overrides them, never the other way round. */
@media (min-width: 900px) {
  .v2-flow.is-horizontal {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding-left: 0;
    padding-top: 46px;
  }
  /* rail inset by half a column, so it begins and ends under the outer
     stations rather than running past them */
  .v2-flow.is-horizontal::before {
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    top: 14px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .v2-flow.is-horizontal .v2-flow-track {
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    top: 10.5px;
    bottom: auto;
    width: auto;
    height: 7px;
  }
  .v2-flow.is-horizontal .v2-flow-node {
    align-items: center;
    text-align: center;
  }
  .v2-flow.is-horizontal .v2-flow-node::before {
    left: 50%;
    top: -36px;
    transform: translateX(-50%);
  }
}

/* The pulse walks the rail by translating its OWN width — a transform, never
   a `left`, so it never triggers layout. */
.v2-flow-pulse {
  position: absolute;
  inset: 0;
}
.v2-flow-pulse::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(var(--stsh-accent));
  box-shadow: 0 0 14px 1px oklch(var(--stsh-accent) / 0.75);
}
.v2-flow:not(.is-boxed) .v2-flow-pulse {
  animation: v2-path-y var(--dur, 7s) cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@media (min-width: 900px) {
  .v2-flow.is-horizontal:not(.is-boxed) .v2-flow-pulse {
    animation-name: v2-path-x;
  }
}
@keyframes v2-path-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% - 7px));
  }
}
@keyframes v2-path-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(100% - 7px));
  }
}

/* Each station lights as the pulse reaches it. --at is the fraction of the
   cycle at which the pulse arrives, measured from the station's position on
   the rail by initFlowPaths (lib/motion.ts) rather than assumed from --i. */
.v2-flow:not(.is-boxed) .v2-flow-node::before {
  animation: v2-station var(--dur, 7s) linear infinite;
  animation-delay: calc(var(--at, 0) * var(--dur, 7s));
}
@keyframes v2-station {
  0%,
  3% {
    background: oklch(var(--stsh-accent));
    border-color: oklch(var(--stsh-accent));
    box-shadow: 0 0 12px 1px oklch(var(--stsh-accent) / 0.6);
  }
  16%,
  100% {
    background: oklch(var(--background));
    border-color: oklch(var(--stsh-accent) / 0.55);
    box-shadow: 0 0 0 0 oklch(var(--stsh-accent) / 0);
  }
}

/* ---------- boxed variant ---------- */

.v2-flow.is-boxed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-left: 0;
  gap: 0;
  max-width: 460px;
  margin-inline: auto;
}
.v2-flow.is-boxed::before {
  content: none;
}
.v2-flow.is-boxed .v2-flow-track {
  display: none;
}
.v2-flow.is-boxed .v2-flow-node {
  border: 1px solid oklch(var(--border));
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    oklch(var(--card)),
    oklch(var(--background))
  );
  padding: 18px 20px;
  align-items: center;
  text-align: center;
}
.v2-flow.is-boxed .v2-flow-node::before {
  content: none;
}
.v2-flow.is-boxed .v2-flow-link {
  display: block;
  position: relative;
  width: 1px;
  height: 30px;
  margin: 9px auto;
  background: oklch(var(--stsh-accent) / 0.3);
}
.v2-flow.is-boxed .v2-flow-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid oklch(var(--stsh-accent) / 0.45);
  border-bottom: 1px solid oklch(var(--stsh-accent) / 0.45);
}
/* Each connector brightens and nudges down in turn, then hands off. */
@keyframes v2-arrow {
  0%,
  4% {
    background: oklch(var(--stsh-accent));
  }
  14%,
  100% {
    background: oklch(var(--stsh-accent) / 0.3);
  }
}
@keyframes v2-arrow-head {
  0% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
    border-color: oklch(var(--stsh-accent));
  }
  8% {
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    border-color: oklch(var(--stsh-accent));
  }
  20%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
    border-color: oklch(var(--stsh-accent) / 0.45);
  }
}
.v2-flow.is-boxed .v2-flow-link {
  animation: v2-arrow var(--dur, 7s) linear infinite;
  animation-delay: calc(var(--i) * (var(--dur, 7s) / (var(--n) - 1)));
}
.v2-flow.is-boxed .v2-flow-link::after {
  animation: v2-arrow-head var(--dur, 7s) linear infinite;
  animation-delay: calc(var(--i) * (var(--dur, 7s) / (var(--n) - 1)));
}

/* ---------- the invariant statement ----------
   NOT a flow: two equal claims either side of an operator. It reuses the node
   box, so the path styling has to be held off it explicitly or the boxes turn
   into stations on a rail and the centred composition collapses. */

.v2-invariant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 56px auto 0;
  max-width: 520px;
  text-align: center;
  padding: 0;
}
.v2-invariant::before {
  content: none;
}
.v2-invariant .v2-node {
  width: 100%;
}
.v2-invariant-op {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: oklch(var(--stsh-accent));
}

/* ==========================================================================
   PAGE FURNITURE
   ========================================================================== */

/* ---------- motif-backed page header ----------
   Replaces the photographic header art. The motif is quiet on the left where
   the copy sits, so the scrim is lighter than the photograph's needed to be —
   a full-strength scrim would only flatten it. */

.v2-motif-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.v2-motif-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.v2-motif-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      90deg,
      oklch(var(--background) / 0.85) 0%,
      oklch(var(--background) / 0.55) 45%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 60%,
      oklch(var(--background) / 0.5) 100%
    );
}
@media (max-width: 768px) {
  /* Narrow screens run the text full width, so the scrim must be stronger. */
  .v2-motif-scrim {
    background: linear-gradient(
      180deg,
      oklch(var(--background) / 0.86) 0%,
      oklch(var(--background) / 0.72) 55%,
      oklch(var(--background) / 0.92) 100%
    );
  }
}

/* ---------- step labels ----------
   Copper THROUGHOUT. Splitting the number from the title into two colours
   read as an accident. */
.v2-step-label {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(var(--stsh-accent));
}

/* ---------- marked fact lists ----------
   Copper dashes for private facts, muted for public. */
.v2-fact-head {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: oklch(var(--muted-foreground));
}
.v2-fact-head.is-private {
  color: oklch(var(--stsh-accent));
}

.v2-fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.v2-fact-list li {
  display: flex;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: oklch(var(--muted-foreground));
}
.v2-fact-list .mark {
  flex: none;
  color: oklch(var(--muted-foreground));
}
.v2-fact-list.is-private .mark {
  color: oklch(var(--stsh-accent));
}

/* Dashes arrive just after their heading, so the list reads as a list rather
   than as six things appearing at once. */
html.js .reveal .v2-fact-list li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 420ms var(--ease-out-quint), transform 420ms
    var(--ease-out-quint);
  transition-delay: calc(300ms + var(--i, 0) * 60ms);
}
html.js .reveal.in .v2-fact-list li {
  opacity: 1;
  transform: none;
}

/* ---------- status tags ---------- */
.v2-status-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
html.js .reveal .v2-status-list .v2-status-tag {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 480ms var(--ease-out-quint), transform 480ms
    var(--ease-out-quint);
  transition-delay: calc(260ms + var(--i, 0) * 90ms);
}
html.js .reveal.in .v2-status-list .v2-status-tag {
  opacity: 1;
  transform: none;
}

/* ---------- pull quote ---------- */
.v2-pull-quote {
  margin: 56px 0 0;
  padding: 0 0 0 24px;
  border-left: 2px solid oklch(var(--stsh-accent));
}
.v2-pull-quote p {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ---------- D3 · disclosures ----------
   `interpolate-size` lets block-size animate to `auto`, which is the
   difference between a thing toggled and a thing opened. Browsers without it
   simply snap open — content is never hidden or unreachable, so the
   degradation is invisible rather than broken. */
:root {
  /* biome-ignore lint/correctness/noUnknownProperty: interpolate-size is shipped in Chrome; biome has not caught up */
  interpolate-size: allow-keywords;
}

.v2-disclosure::details-content,
.v2-faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur-fast) var(--ease-out-quint),
    content-visibility var(--dur-fast) allow-discrete;
}
.v2-disclosure[open]::details-content,
.v2-faq-item[open]::details-content {
  block-size: auto;
}

/* ---------- D2 · scroll-filled roadmap rail ----------
   The rail fills as the section crosses the viewport, so progress through the
   page and progress through the roadmap become the same gesture. Scaling a
   1px line is free; animating its height would relayout every frame. The
   production gradient stays underneath, so the speculative end still reads as
   speculative even at full fill. */
.v2-rail-fill {
  position: absolute;
  width: 1px;
  transform-origin: top;
  transform: scaleY(var(--fill, 0));
  background: linear-gradient(
    180deg,
    oklch(var(--stsh-accent) / 0.65),
    oklch(var(--stsh-accent) / 0.2)
  );
}

/* ---------- copper block spacing ----------
   The original is taller and responsive; a flat value read as condensed at
   every width except desktop. */
.v2-copper.v2-section {
  padding-block: 110px;
}
@media (min-width: 1024px) {
  .v2-copper.v2-section {
    padding-block: 140px;
  }
}
.v2-copper.is-closing {
  padding-block: 160px;
}

/* ---------- inline links in body copy ---------- */
.v2-inline-link {
  color: oklch(var(--stsh-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease-out-quint);
}
.v2-inline-link:hover {
  color: oklch(var(--foreground));
}

/* ==========================================================================
   REDUCED MOTION

   Everything above degrades to "present, still". No information is carried by
   motion alone anywhere on the site.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .r-line > span,
  .r-body,
  .r-panel,
  .r-panel::before,
  .v2-flow-node,
  .v2-flow-link,
  .v2-fact-list li,
  .v2-status-list .v2-status-tag {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .v2-section::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .v2-flow-pulse {
    display: none;
  }
  .v2-flow:not(.is-boxed) .v2-flow-node::before {
    animation: none !important;
    background: oklch(var(--stsh-accent) / 0.35);
  }
  .v2-flow.is-boxed .v2-flow-link,
  .v2-flow.is-boxed .v2-flow-link::after {
    animation: none !important;
  }
  .v2-rail-fill {
    transform: scaleY(1) !important;
    opacity: 0.35;
  }
  .v2-rails .rail-progress {
    box-shadow: none;
  }
  .v2-disclosure::details-content,
  .v2-faq-item::details-content {
    transition: none !important;
  }
}

/* ==========================================================================
   HOMEPAGE — denomination rollers, anonymity strip, audit panel
   ========================================================================== */

/* ---------- B3 · denomination rollers ---------- */
.v2-digit {
  height: 1.1em;
  overflow: hidden;
}
.v2-digit-strip {
  display: block;
  transform: translateY(0);
  transition: transform 1100ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.v2-digit-strip > span {
  display: block;
  height: 1.1em;
}

/* ---------- the anonymity strip ---------- */
.v2-chip {
  position: relative;
  border: 1px solid oklch(var(--border));
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(var(--muted-foreground));
  background: oklch(var(--card) / 0.6);
  transition: border-color 900ms var(--ease-in-out-soft), color 900ms
    var(--ease-in-out-soft);
}
.v2-chip.is-mine {
  border-color: oklch(var(--stsh-accent));
  color: oklch(var(--stsh-accent));
}
/* Every chip carries its own tag; only the marked one shows it. Moving a
   class is cheaper and far less fragile than relocating a DOM node, and it
   means the strip never reflows as the marker roams. */
.v2-chip-tag {
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  background: oklch(var(--stsh-accent));
  color: oklch(var(--stsh-on-accent));
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0;
  transition: opacity 600ms var(--ease-in-out-soft);
}
.v2-chip.is-mine .v2-chip-tag {
  opacity: 1;
}

/* ---------- the six-phase arc ----------
   One hairline row per phase: number, name, benefit, status chip. The chip
   column is the point of the section, so it gets its own track and never
   wraps under the copy. */
.v2-arc {
  border-top: 1px solid oklch(var(--border));
}
.v2-arc-row {
  display: grid;
  grid-template-columns: 36px 160px 1fr auto;
  align-items: baseline;
  -moz-column-gap: 20px;
       column-gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid oklch(var(--border));
}

/* ---------- reserves signal light ----------
   Three states and no fourth. Green is the only colour outside the palette
   on the whole site, and it is reserved for a certificate-verified healthy
   reading — nothing else may use it. */
.v2-signal {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: oklch(var(--muted-foreground));
  box-shadow: 0 0 0 3px oklch(var(--muted-foreground) / 0.18);
}
.v2-signal.is-checking {
  animation: v2-pulse-soft 1.6s ease-in-out infinite;
}
.v2-signal.is-green {
  background: oklch(0.74 0.16 150);
  box-shadow: 0 0 0 3px oklch(0.74 0.16 150 / 0.22);
}
.v2-signal.is-red {
  background: oklch(0.62 0.2 25);
  box-shadow: 0 0 0 3px oklch(0.62 0.2 25 / 0.22);
}
.v2-signal.is-unknown {
  background: oklch(var(--stsh-accent));
  box-shadow: 0 0 0 3px oklch(var(--stsh-accent) / 0.22);
}
@keyframes v2-pulse-soft {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- audit panel ----------
   Instrument-panel language borrowed from the hero HUD: this is the section
   that makes "auditable" concrete rather than a word. */
.v2-audit-panel {
  position: relative;
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid oklch(var(--border));
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    oklch(var(--card)),
    oklch(var(--background))
  );
}
.v2-audit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid oklch(var(--border));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(var(--muted-foreground));
}
.v2-audit-id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: oklch(var(--stsh-accent));
  overflow-wrap: anywhere;
}
.v2-audit-row {
  display: grid;
  gap: 4px 24px;
  padding: 18px 24px;
  border-bottom: 1px solid oklch(var(--border));
}
@media (min-width: 720px) {
  .v2-audit-row {
    grid-template-columns: 220px 1fr;
    align-items: baseline;
  }
}
.v2-audit-row:last-child {
  border-bottom: 0;
}
.v2-audit-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(var(--muted-foreground));
}
.v2-audit-row dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: oklch(var(--foreground));
}
/* Rows arrive in sequence, like a readout populating — the order of the
   checks is the content. */
html.js .reveal .v2-audit-row {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms var(--ease-out-quint), transform 620ms
    var(--ease-out-quint);
  transition-delay: calc(var(--i, 0) * 130ms);
}
html.js .reveal.in .v2-audit-row {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .v2-digit-strip {
    transition: none !important;
    transform: translateY(-11em) !important;
  }
  .v2-chip,
  .v2-chip-tag {
    transition: none !important;
  }
  .v2-audit-row {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- mobile menu sheet ----------
   The sheet fades and settles in over --motion-slow; a full-viewport surface
   is a large thing to move, so it gets the longest step on the scale and no
   overshoot. Items follow on a short stagger — four links is inside the range
   where stagger reads as order rather than decoration.

   There is no exit transition by design: the component unmounts on close.
   Someone dismissing a menu is already looking at the page behind it, and an
   exit animation would only make them wait for it. */
@media (prefers-reduced-motion: no-preference) {
  .v2-menu-sheet {
    animation: v2-menu-in var(--motion-slow) var(--ease-enter) both;
  }

  .v2-menu-sheet .v2-menu-item {
    animation: v2-menu-item-in var(--motion-base) var(--ease-enter) both;
  }
}
.v2-menu-sheet .v2-menu-item:nth-child(1) {
  animation-delay: 40ms;
}
.v2-menu-sheet .v2-menu-item:nth-child(2) {
  animation-delay: 80ms;
}
.v2-menu-sheet .v2-menu-item:nth-child(3) {
  animation-delay: 120ms;
}
.v2-menu-sheet .v2-menu-item:nth-child(4) {
  animation-delay: 160ms;
}

@keyframes v2-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes v2-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   MOBILE COMPOSITION  (below md)

   Desktop is the master and nothing here changes it: every rule that could
   reach a wide screen sits under max-width: 767.98px, the same edge Tailwind's
   md: and useIsMobile() agree on. Mobile is a second composition in the same
   materials — black field, copper, hairlines, tracked mono — not a rescale of
   the first one.

   Order: hero · header · type scale · spacing · reveals · lists · closing
   block · footer. Reduced motion is handled per rule and additively: nothing
   in this block is what makes content visible.
   ========================================================================== */

/* ---------- hero: the horizon ----------
   The section is one screen. Type sits in the top half on plain black; the
   event horizon curves across the bottom, 1.1× wider than the phone, so only
   its crown shows — and the shield grows out of it on scroll. See HeroMobile in components/hero/BlackHoleHero.tsx. */
.v2-hero-m {
  /* How far above the section's bottom edge the horizon runs — a share of
     the section, clamped so it neither crowds the copy on a short Safari
     viewport nor floats mid-screen on a tall one. */
  --crown: clamp(125px, 24%, 215px);
  min-height: calc(100vh - 4rem);
  min-height: calc(100svh - 4rem - env(safe-area-inset-top));
  padding-top: clamp(40px, 6svh, 72px);
}
.v2-hero-m-ring {
  /* Fades the canvas's top edge into the page so the object has no frame.
     The crown sits a fifth of the way down the canvas; everything above it is
     haze, which should thin out rather than stop. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 19%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 19%);
}

/* Entrance. Visible at rest — the hidden start state lives only inside the
   animation, which applies under no-preference, so anything that stops it
   running (reduced motion, a stalled document timeline) leaves a readable
   hero rather than an empty screen. The type settles in four short steps; the
   horizon comes up after it, slower, because it is the large thing. */
@media (prefers-reduced-motion: no-preference) {
  .v2-hero-m-in {
    animation: v2-hero-m-in var(--motion-slow) var(--ease-enter) both;
  }
  .v2-hero-m-ring {
    animation: v2-horizon-in 1400ms var(--ease-enter) 120ms both;
  }
}
@keyframes v2-hero-m-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* `translate`, not `transform`: the scroll parallax owns transform. */
@keyframes v2-horizon-in {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 767.98px) {
  /* ---------- header over the hero ----------
     The bar starts as clear glass on the hero's black and takes its fill and
     hairline once the page has moved. Scroll-driven animation is progressive:
     browsers without it keep the solid bar, which is the state that matters. */
  @supports (animation-timeline: scroll()) {
    .v2-header.is-over-hero {
      animation: v2-header-settle linear both;
      animation-timeline: scroll(root);
      animation-range: 0 96px;
    }
  }

  /* ---------- type scale ----------
     One step down across the board. The desktop scale is set for a 1180px
     wrap read at arm's length; on a 350px column the same sizes wrap every
     heading to three lines and turn body copy into a wall. */
  .eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: oklch(var(--stsh-accent));
  }
  .section-title {
    font-size: 1.875rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .v2-section:not(.v2-copper) p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.6;
  }
  /* Muted text at 0.55 is grey-on-black on an OLED phone held at arm's
     length. One step brighter here, by re-declaring the token under this
     media query rather than by selector: Tailwind clones any rule naming an
     @apply'd utility (p.text-muted-foreground became p.eyebrow) so selecting
     on utility classes is not safe. Desktop reads the untouched :root value;
     paragraphs set in foreground keep the muted/bright contrast in #problem. */
  :root,
  .dark {
    --muted-foreground: 0.64 0 0;
  }

  /* ---------- spacing ---------- */
  .v2-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .v2-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  /* Two-column sections collapse to one; the 64px column gap becomes a hole
     between a heading and its body. */
  .v2-section > .v2-wrap.grid {
    gap: 24px;
  }
  #faq .mt-10 {
    margin-top: 4px;
  }
  .v2-panel {
    padding: 20px;
    border-radius: 14px;
  }
  .v2-copper.v2-section,
  .v2-copper.is-closing {
    padding-block: 80px;
  }
  /* The scroll cue belongs to the pinned hero, which does not exist here. */
  .v2-scroll-cue-line {
    display: none;
  }

  /* ---------- reveals ----------
     28px of travel per block is a lot of motion on a screen that shows two
     blocks at a time. Shorter and quicker; the mask wipe on headings is kept. */
  .reveal {
    transform: translateY(14px);
    transition-duration: 0.55s;
  }

  /* ---------- lists, not boxes ----------
     Desktop lays these out as a bordered grid of cells, which is right for a
     four-across row. Stacked into one column the same treatment becomes four
     heavy slabs with 32px of inner padding inside a 350px column — the border
     does no work once there is nothing beside a cell, and the card fill
     flattens the contrast the copy needs. So below md the grid stops being a
     grid: rows divided by a hairline, icon beside the title. Same content,
     same order; the container stops competing with it.

     !important because the cells carry Tailwind's own !p-8. */
  .v2-grid-cells {
    margin-top: 28px !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }
  .v2-grid-cells > .cell {
    display: grid !important;
    grid-template-columns: 22px 1fr;
    -moz-column-gap: 14px;
         column-gap: 14px;
    padding: 18px 0 !important;
    background: none !important;
    border-top: 1px solid oklch(var(--border)) !important;
  }
  .v2-grid-cells > .cell:first-child {
    border-top: 0 !important;
  }
  /* Icon spans both rows so the title and body align to one text column. */
  .v2-grid-cells > .cell > svg {
    grid-row: 1 / span 2;
    width: 20px !important;
    height: 20px !important;
    margin: 3px 0 0 !important;
  }
  .v2-grid-cells > .cell > h3 {
    margin: 0 0 5px !important;
    font-size: 1rem !important;
  }
  .v2-grid-cells > .cell > p {
    grid-column: 2;
    font-size: 0.9rem !important;
  }

  /* ---------- denominations: a ladder ----------
     Five figures down the page in mono, one per hairline row, at a size that
     lets the digit roll-in read as the moment it is. The cards' inline
     padding needs !important; the "Note size" label repeated five times down
     a column is noise, so it is hidden visually and kept for assistive tech,
     where it labels a figure that has no other context. */
  .v2-denoms {
    margin-top: 24px !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }
  .v2-denoms > * {
    position: relative;
    display: block !important;
    padding: 14px 0 !important;
    background: none !important;
    border-top: 1px solid oklch(var(--border));
  }
  .v2-denoms > :first-child {
    border-top: 0;
  }
  .v2-denoms > * > :first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .v2-denoms .v2-roller {
    font-size: 1.5rem !important;
  }
  .v2-denoms + figure,
  #denominations figure {
    margin-top: 36px;
  }

  /* ---------- closing block ----------
     Three stacked full-width buttons is the template look. Primary takes the
     row; the two secondaries share the next one. */
  .v2-closing-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 28px;
  }
  .v2-closing-actions > :first-child {
    grid-column: 1 / -1;
  }
  .v2-closing-actions .v2-btn {
    justify-content: center;
    padding-inline: 8px;
    font-size: 13px;
  }
  /* The phase grid folds to two rows per phase: number + name + chip above,
     the benefit line below in the text column. */
  .v2-arc-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "n name chip"
      ". benefit benefit";
    row-gap: 4px;
    padding: 14px 0;
  }
  .v2-arc-row > :nth-child(1) {
    grid-area: n;
  }
  .v2-arc-row > :nth-child(2) {
    grid-area: name;
  }
  .v2-arc-row > :nth-child(3) {
    grid-area: benefit;
  }
  .v2-arc-row > :nth-child(4) {
    grid-area: chip;
  }
  .v2-hero-actions .v2-btn {
    padding-inline: 18px;
  }
  .v2-copper .v2-status-strip {
    margin-top: 32px;
    gap: 12px 22px;
  }

  /* ---------- footer ----------
     Four stacked columns and 96px of top padding after the copper block was
     most of a screen of footer. Brand across the top, the two link columns
     side by side, status across the bottom. */
  .v2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding-top: 56px;
    padding-bottom: 40px;
  }
  .v2-footer-grid > :first-child,
  .v2-footer-grid > :last-child {
    grid-column: 1 / -1;
  }
  .v2-footer-bar {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

@keyframes v2-header-settle {
  from {
    background-color: transparent;
    border-color: transparent;
  }
  to {
    background-color: oklch(var(--card) / 0.8);
    border-color: oklch(var(--border));
  }
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}

.file\:inline-flex::file-selector-button {
  display: inline-flex;
}

.file\:h-7::file-selector-button {
  height: 1.75rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

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

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:border-border:hover {
  border-color: oklch(var(--border));
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}

.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

.hover\:bg-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/50:hover {
  background-color: oklch(var(--secondary) / 0.5);
}

.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}

.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}

.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

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

.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}

.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-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(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);
}

.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

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

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

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

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --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));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --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));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --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));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --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));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  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));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --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);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

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

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

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

  .sm\:grid-cols-\[1fr_1\.4fr\] {
    grid-template-columns: 1fr 1.4fr;
  }

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

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

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

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

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

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

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

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

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

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

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}

@media (min-width: 768px) {

  .md\:fixed {
    position: fixed;
  }

  .md\:absolute {
    position: absolute;
  }

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

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

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

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

  .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\:gap-1\.5 {
    gap: 0.375rem;
  }

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

  .md\:bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }

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

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

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

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

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\: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);
  }
}

@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

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

  .lg\:h-fit {
    height: -moz-fit-content;
    height: fit-content;
  }

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

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

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

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

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

  .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .lg\:grid-cols-\[1\.6fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .lg\:grid-cols-\[240px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 240px minmax(0,1fr);
  }

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

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

  .lg\:gap-16 {
    gap: 4rem;
  }

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

  .lg\:py-\[140px\] {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .lg\:pb-\[140px\] {
    padding-bottom: 140px;
  }

  .lg\:pb-\[96px\] {
    padding-bottom: 96px;
  }

  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:pt-\[140px\] {
    padding-top: 140px;
  }
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:shrink-0>span {
  flex-shrink: 0;
}

.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}