/* [next]/internal/font/google/manrope_e5b5049c.module.css [app-client] (css) */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/a342834df7752944-s.3hd2l7bm32o7k.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/d3fe2f289711ac3f-s.1l2zhvq5eocqf.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/58c4895d0a0ef7cc-s.2vhvl9vrvk-va.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/bfc7db5c00d21bc5-s.173xwsdme27n8.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/6ab0db14f70d8ed6-s.13hnt-xgp82zk.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/a343f882a40d2cc9-s.p.1sj6eobyi31rd.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope Fallback;
  src: local(Arial);
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0.0%;
  size-adjust: 103.19%;
}

.manrope_e5b5049c-module__9cmR3a__className {
  font-family: Manrope, Manrope Fallback;
  font-style: normal;
}

.manrope_e5b5049c-module__9cmR3a__variable {
  --font-app-sans: "Manrope", "Manrope Fallback";
}

/* [next]/internal/font/google/geist_mono_1078bf67.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.31988l_ccedte.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_1078bf67-module__YwGDWa__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_1078bf67-module__YwGDWa__variable {
  --font-app-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [next]/internal/font/google/space_grotesk_e69b798c.module.css [app-client] (css) */
@font-face {
  font-family: Space Grotesk;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/e50b939c4e3518a9-s.1_-y3t15h7ixh.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Space Grotesk;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/7a03f7a08146f938-s.0xn1ufqfc19ns.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Space Grotesk;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/6bb62198a3d8dd21-s.p.38eumgkwyr26c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Space Grotesk Fallback;
  src: local(Arial);
  ascent-override: 89.71%;
  descent-override: 26.62%;
  line-gap-override: 0.0%;
  size-adjust: 109.69%;
}

.space_grotesk_e69b798c-module__ttxavq__className {
  font-family: Space Grotesk, Space Grotesk Fallback;
  font-style: normal;
  font-weight: 700;
}

.space_grotesk_e69b798c-module__ttxavq__variable {
  --font-brand-display: "Space Grotesk", "Space Grotesk Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-sky-100: #dff2fe;
    --color-slate-950: #020618;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-sky-100: lab(94.3709% -4.56053 -8.23453);
      --color-slate-950: lab(1.76974% 1.32743 -9.28855);
    }
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    --color-bg: #0a0812;
    --color-fg: #f4efff;
    --color-background: var(--color-bg);
    --color-foreground: var(--color-fg);
    --color-card: #120e1ff0;
    --color-card-foreground: var(--color-fg);
    --color-popover: #120e1ffa;
    --color-popover-foreground: var(--color-fg);
    --color-primary: #42157d;
    --color-primary-foreground: #fff;
    --color-secondary: #1f1930;
    --color-secondary-foreground: #eee7ff;
    --color-muted: #1a1528;
    --color-muted-foreground: #b4abce;
    --color-destructive: #e40014;
    --color-destructive-foreground: #fafafa;
    --color-info: #5d9bcf;
    --color-info-foreground: var(--color-info);
  }

  @supports (color: lab(0% 0 0)) {
    :root {
      --color-destructive: lab(48.4493% 77.4328 61.5452);
      --color-destructive-foreground: lab(98.26% 0 0);
      --color-info: lab(61.5492% -9.50491 -32.9969);
    }
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-info-foreground: color-mix(in oklch, var(--color-info) 72%, black 28%);
    }
  }

  :root {
    --color-info-soft: var(--color-info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-info-soft: color-mix(in oklch, var(--color-info) 12%, white 88%);
    }
  }

  :root {
    --color-info-soft-strong: var(--color-info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-info-soft-strong: color-mix(in oklch,
      var(--color-info) 18%,
      white 82%);
    }
  }

  :root {
    --color-info-border: var(--color-info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-info-border: color-mix(in oklch, var(--color-info) 28%, white 72%);
    }
  }

  :root {
    --color-info-solid: var(--color-info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-info-solid: color-mix(in oklch, var(--color-info) 72%, black 28%);
    }
  }

  :root {
    --color-success: #37b880;
    --color-success-foreground: var(--color-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-success-foreground: color-mix(in oklch,
      var(--color-success) 74%,
      black 26%);
    }
  }

  :root {
    --color-success-soft: var(--color-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-success-soft: color-mix(in oklch,
      var(--color-success) 10%,
      white 90%);
    }
  }

  :root {
    --color-success-soft-strong: var(--color-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-success-soft-strong: color-mix(in oklch,
      var(--color-success) 16%,
      white 84%);
    }
  }

  :root {
    --color-success-border: var(--color-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-success-border: color-mix(in oklch,
      var(--color-success) 30%,
      white 70%);
    }
  }

  :root {
    --color-success-solid: var(--color-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-success-solid: color-mix(in oklch,
      var(--color-success) 72%,
      black 28%);
    }
  }

  :root {
    --color-warning: #f09c17;
    --color-warning-foreground: #793207;
    --color-warning-soft: var(--color-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-warning-soft: color-mix(in oklch,
      var(--color-warning) 10%,
      white 90%);
    }
  }

  :root {
    --color-warning-soft-strong: var(--color-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-warning-soft-strong: color-mix(in oklch,
      var(--color-warning) 16%,
      white 84%);
    }
  }

  :root {
    --color-warning-border: var(--color-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-warning-border: color-mix(in oklch,
      var(--color-warning) 30%,
      white 70%);
    }
  }

  :root {
    --color-warning-solid: var(--color-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-warning-solid: color-mix(in oklch,
      var(--color-warning) 72%,
      black 28%);
    }
  }

  :root {
    --color-error: var(--color-destructive);
    --color-error-foreground: var(--color-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-error-foreground: color-mix(in oklch, var(--color-error) 72%, black 28%);
    }
  }

  :root {
    --color-error-soft: var(--color-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-error-soft: color-mix(in oklch, var(--color-error) 10%, white 90%);
    }
  }

  :root {
    --color-error-soft-strong: var(--color-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-error-soft-strong: color-mix(in oklch,
      var(--color-error) 16%,
      white 84%);
    }
  }

  :root {
    --color-error-border: var(--color-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-error-border: color-mix(in oklch, var(--color-error) 30%, white 70%);
    }
  }

  :root {
    --color-error-solid: var(--color-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-error-solid: color-mix(in oklch, var(--color-error) 78%, black 22%);
    }
  }

  :root {
    --color-border: #6c5b9657;
    --color-input: #6c5b9657;
    --color-ring: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-ring: color-mix(in srgb, var(--color-primary) 34%, white 66%);
    }
  }

  :root {
    --radius: .625rem;
    --ui-color-canvas-start: #080610;
    --ui-color-canvas: #0c0a17;
    --ui-color-canvas-end: #120e21;
    --ui-color-glow: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --ui-color-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
    }
  }

  :root {
    --ui-surface-panel: #130f21eb;
    --ui-surface-card: #19142bd6;
    --ui-border-surface: #6f5e9a61;
    --ui-shadow-panel: 0 24px 60px #0101056b;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --type-root-size: clamp(16.5px, 16.1px + .24vw, 18px);
    --radius-xs: .375rem;
    --radius-sm: .5rem;
    --radius-md: var(--radius);
    --radius-lg: .875rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;
    --shadow-xs: 0 0 transparent;
    --shadow-sm: 0 0 transparent;
    --shadow-md: 0 0 transparent;
    --shadow-lg: 0 0 transparent;
    --shadow-xl: var(--ui-shadow-panel);
    --motion-duration-fast: .12s;
    --motion-duration-base: .16s;
    --motion-duration-slow: .24s;
    --motion-duration-slower: .32s;
    --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --motion-ease-emphasized: cubic-bezier(.2, .8, .2, 1);
    --layout-page-pad-top: var(--space-8);
    --layout-page-pad-bottom: var(--space-8);
    --layout-page-gap-sm: var(--space-3);
    --layout-page-gap-md: var(--space-4);
    --layout-page-gap-lg: var(--space-6);
    --layout-user-shell-max: 120rem;
    --layout-user-shell-max-wide: 128rem;
    --layout-sidebar-collapsed: 4.5rem;
    --layout-sidebar-collapsed-wide: 5rem;
    --layout-sidebar-expanded: 12.5rem;
    --layout-sidebar-expanded-wide: 15.75rem;
    --z-base: 0;
    --z-sticky: 10;
    --z-overlay: 40;
    --z-dialog: 50;
    --scrollbar-size: 15px;
    --scrollbar-padding: 2px;
    --scrollbar-min-length: 2.5rem;
    --scrollbar-track: var(--color-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-track: color-mix(in srgb, var(--color-card) 84%, black 16%);
    }
  }

  :root {
    --scrollbar-thumb: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb: color-mix(in srgb,
      var(--color-primary) 34%,
      var(--color-card) 66%);
    }
  }

  :root {
    --scrollbar-thumb-hover: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-hover: color-mix(in srgb,
      var(--color-primary) 46%,
      var(--color-card) 54%);
    }
  }

  :root {
    --scrollbar-thumb-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-border: color-mix(in srgb,
      var(--color-primary) 22%,
      var(--color-card) 78%);
    }
  }

  :root {
    --scrollbar-thumb-shadow: 0 10px 18px
      var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-shadow: 0 10px 18px
      color-mix(in srgb, var(--color-primary) 18%, transparent);
    }
  }

  :root {
    --scrollbar-thumb-shadow-hover: 0 10px 18px
      var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-shadow-hover: 0 10px 18px
      color-mix(in srgb, var(--color-primary) 26%, transparent);
    }
  }

  :root {
    --scrollbar-thumb-inset-shadow: inset 0 0 0 1px #ffffff14;
    --scrollbar-thumb-surface: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-surface: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 28%, white 6%) 0%,
      color-mix(in srgb, var(--color-primary) 44%, black 56%) 100%);
    }
  }

  :root {
    --scrollbar-thumb-surface-hover: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --scrollbar-thumb-surface-hover: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 34%, white 8%) 0%,
      color-mix(in srgb, var(--color-primary) 52%, black 48%) 100%);
    }
  }

  :root {
    --page-pad-top: var(--layout-page-pad-top);
    --page-pad-bottom: var(--layout-page-pad-bottom);
    --page-bg-from: var(--ui-color-canvas-start);
    --page-bg-via: var(--ui-color-canvas);
    --page-bg-to: var(--ui-color-canvas-end);
    --page-glow: var(--ui-color-glow);
    --surface-panel: var(--ui-surface-panel);
    --surface-card: var(--ui-surface-card);
    --surface-border: var(--ui-border-surface);
    --surface-shadow: var(--ui-shadow-panel);
    --session-accent-soft: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-soft: color-mix(in srgb,
      var(--color-primary) 18%,
      #130f21 82%);
    }
  }

  :root {
    --session-accent-soft-strong: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-soft-strong: color-mix(in srgb,
      var(--color-primary) 26%,
      #130f21 74%);
    }
  }

  :root {
    --session-accent-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-border: color-mix(in srgb,
      var(--color-primary) 34%,
      #1e1832 66%);
    }
  }

  :root {
    --session-accent-ring: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-ring: color-mix(in srgb,
      var(--color-primary) 42%,
      #1e1832 58%);
    }
  }

  :root {
    --session-accent-ink: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-ink: color-mix(in srgb,
      var(--color-primary) 56%,
      white 44%);
    }
  }

  :root {
    --session-accent-gradient: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-gradient: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 72%, white 28%) 0%,
      color-mix(in srgb, var(--color-primary) 88%, black 12%) 100%);
    }
  }

  :root {
    --session-accent-gradient-strong: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --session-accent-gradient-strong: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 78%, white 22%) 0%,
      color-mix(in srgb, var(--color-primary) 94%, black 6%) 100%);
    }
  }

  :root {
    --playlist-row-hover-bg: var(--session-accent-soft);
    --playlist-row-border: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-border: color-mix(in oklch,
      var(--color-border) 46%,
      transparent);
    }
  }

  :root {
    --playlist-row-meta-text: var(--color-muted-foreground);
    --playlist-row-meta-text-soft: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-meta-text-soft: color-mix(in oklch,
      var(--color-muted-foreground) 78%,
      transparent);
    }
  }

  :root {
    --playlist-row-meta-text-strong: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-meta-text-strong: color-mix(in oklch,
      var(--color-muted-foreground) 88%,
      var(--color-foreground) 12%);
    }
  }

  :root {
    --playlist-row-restricted-text: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-restricted-text: color-mix(in oklch,
      var(--color-muted-foreground) 70%,
      transparent);
    }
  }

  :root {
    --playlist-row-restricted-meta-text: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-restricted-meta-text: color-mix(in oklch,
      var(--color-muted-foreground) 60%,
      transparent);
    }
  }

  :root {
    --playlist-row-index-bg: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-index-bg: color-mix(in oklch,
      var(--color-muted) 80%,
      transparent);
    }
  }

  :root {
    --playlist-row-index-text: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-index-text: color-mix(in oklch,
      var(--color-foreground) 75%,
      transparent);
    }
  }

  :root {
    --playlist-row-waveform-idle: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-waveform-idle: color-mix(in oklch,
      var(--color-muted-foreground) 25%,
      transparent);
    }
  }

  :root {
    --playlist-row-action-text: var(--color-muted-foreground);
    --playlist-row-action-text-disabled: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-action-text-disabled: color-mix(in oklch,
      var(--color-muted-foreground) 55%,
      transparent);
    }
  }

  :root {
    --playlist-row-current-bg: linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-current-bg: linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary) 30%, var(--surface-card) 70%),
      color-mix(in srgb, var(--color-primary) 22%, var(--surface-panel) 78%));
    }
  }

  :root {
    --playlist-row-pending-bg: linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-pending-bg: linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary) 18%, var(--surface-card) 82%),
      color-mix(in srgb, var(--color-primary) 12%, var(--surface-panel) 88%));
    }
  }

  :root {
    --playlist-row-restricted-bg: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --playlist-row-restricted-bg: color-mix(in srgb,
      var(--surface-card) 84%,
      var(--color-muted) 16%);
    }
  }

  :root {
    --button-primary-border: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-primary-border: color-mix(in srgb,
      var(--session-accent-border) 84%,
      var(--color-primary) 16%);
    }
  }

  :root {
    --button-primary-bg: var(--session-accent-gradient-strong);
    --button-primary-bg-hover: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-primary-bg-hover: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 84%, white 16%) 0%,
      color-mix(in srgb, var(--color-primary) 97%, black 3%) 100%);
    }
  }

  :root {
    --button-primary-text: var(--color-primary-foreground);
    --button-primary-shadow: 0 16px 30px
      var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-primary-shadow: 0 16px 30px
      color-mix(in srgb, var(--color-primary) 22%, transparent);
    }
  }

  :root {
    --button-secondary-border: var(--session-accent-border);
    --button-secondary-bg: linear-gradient(180deg,
      var(--session-accent-soft-strong) 0%,
      var(--session-accent-soft) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-secondary-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--session-accent-soft-strong) 82%, #ffffff14 18%) 0%,
      color-mix(in srgb, var(--session-accent-soft) 100%, transparent) 100%);
    }
  }

  :root {
    --button-secondary-bg-hover: linear-gradient(180deg,
      var(--session-accent-soft-strong) 0%,
      var(--session-accent-soft-strong) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-secondary-bg-hover: linear-gradient(180deg,
      color-mix(in srgb, var(--session-accent-soft-strong) 96%, #ffffff1a 4%) 0%,
      color-mix(in srgb, var(--session-accent-soft-strong) 88%, var(--session-accent-soft) 12%) 100%);
    }
  }

  :root {
    --button-secondary-text: var(--session-accent-ink);
    --button-secondary-shadow: 0 12px 24px
      var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-secondary-shadow: 0 12px 24px
      color-mix(in srgb, var(--color-primary) 14%, transparent);
    }
  }

  :root {
    --button-tertiary-border: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-tertiary-border: color-mix(in srgb,
      var(--session-accent-border) 46%,
      var(--color-border) 54%);
    }
  }

  :root {
    --button-tertiary-bg: linear-gradient(180deg,
      var(--color-card) 0%,
      var(--color-card) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-tertiary-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--color-card) 96%, #ffffff0d 4%) 0%,
      color-mix(in srgb, var(--color-card) 88%, transparent) 100%);
    }
  }

  :root {
    --button-tertiary-bg-hover: linear-gradient(180deg,
      var(--color-card) 0%,
      var(--color-card) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-tertiary-bg-hover: linear-gradient(180deg,
      color-mix(in srgb, var(--color-card) 100%, #ffffff0f 0%) 0%,
      color-mix(in srgb, var(--color-card) 92%, transparent) 100%);
    }
  }

  :root {
    --button-tertiary-text: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-tertiary-text: color-mix(in srgb,
      var(--color-primary) 64%,
      white 36%);
    }
  }

  :root {
    --button-tertiary-shadow: 0 12px 24px
      #0000003d;
    --button-ghost-hover: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --button-ghost-hover: color-mix(in srgb,
      var(--session-accent-soft) 76%,
      transparent);
    }
  }

  :root {
    --button-ghost-text: var(--session-accent-ink);
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  html[data-app-theme="light"] {
    --color-bg: #f7fcf2;
    --color-fg: #18331b;
    --color-background: var(--color-bg);
    --color-foreground: var(--color-fg);
    --color-card: #ffffffb8;
    --color-card-foreground: var(--color-fg);
    --color-popover: #fffffff0;
    --color-popover-foreground: var(--color-fg);
    --color-primary: #569e12;
    --color-primary-foreground: #123409;
    --color-secondary: #fff0d8;
    --color-secondary-foreground: #743900;
    --color-muted: #edf6e7;
    --color-muted-foreground: #486044;
    --color-border: #66993e4d;
    --color-input: #66993e57;
    --color-ring: #6fb8237a;
    --ui-color-canvas-start: #fcfff9;
    --ui-color-canvas: #f5fbee;
    --ui-color-canvas-end: #fff6e5;
    --ui-color-glow: #79c42a33;
    --ui-surface-panel: #ffffff9e;
    --ui-surface-card: #ffffffc2;
    --ui-border-surface: #ffffffd6;
    --ui-shadow-panel: 0 10px 30px #3d701824,
      0 3px 10px #dd6f0014,
      inset 0 1px 0 #fffffff2;
    --session-accent-soft: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-soft: color-mix(in oklch,
      var(--color-primary) 12%,
      var(--color-bg) 88%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-soft-strong: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-soft-strong: color-mix(in oklch,
      var(--color-primary) 20%,
      var(--color-bg) 80%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-border: color-mix(in oklch,
      var(--color-primary) 30%,
      white 70%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-ring: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-ring: color-mix(in oklch,
      var(--color-primary) 38%,
      white 62%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-ink: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-ink: color-mix(in oklch,
      var(--color-primary) 76%,
      black 24%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-gradient: linear-gradient(180deg,
      var(--session-accent-soft) 0%,
      var(--session-accent-soft-strong)
        100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-gradient: linear-gradient(180deg,
      color-mix(in oklch, var(--session-accent-soft) 92%, white 8%) 0%,
      color-mix(in oklch, var(--session-accent-soft-strong) 100%, transparent)
        100%);
    }
  }

  html[data-app-theme="light"] {
    --session-accent-gradient-strong: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --session-accent-gradient-strong: linear-gradient(180deg,
      color-mix(in oklch, var(--color-primary) 22%, white 78%) 0%,
      color-mix(in oklch, var(--color-primary) 34%, white 66%) 100%);
    }
  }

  html[data-app-theme="light"] {
    --button-primary-border: #448407;
    --button-primary-bg: radial-gradient(farthest-corner at bottom center, #ffffff6b, transparent 62%),
      linear-gradient(180deg, #397e04, #85cd2a);
    --button-primary-bg-hover: radial-gradient(farthest-corner at bottom center, #ffffff85, transparent 62%),
      linear-gradient(180deg, #449107, #97de36);
    --button-primary-text: var(--color-primary-foreground);
    --button-primary-shadow: 0 5px 14px #4a8b0c4d,
      inset 0 1px 0 #ffffff8c;
    --button-secondary-border: #6fa93b57;
    --button-secondary-bg: radial-gradient(farthest-corner at bottom center, #ffffff61, transparent 64%),
      linear-gradient(180deg, #4c950ef5, #91cf39f0);
    --button-secondary-bg-hover: radial-gradient(farthest-corner at bottom center, #ffffff80, transparent 64%),
      linear-gradient(180deg, #58a512, #a4de48);
    --button-secondary-text: #2a581b;
    --button-secondary-shadow: 0 3px 12px #43751d24,
      inset 0 1px 0 #fffffff2;
    --button-tertiary-border: #e07e186b;
    --button-tertiary-bg: radial-gradient(farthest-corner at bottom center, #fff6, transparent 62%),
      linear-gradient(180deg, #be5600e6, #f69e36e0);
    --button-tertiary-bg-hover: radial-gradient(farthest-corner at bottom center, #ffffff85, transparent 62%),
      linear-gradient(180deg, #d36600f0, #ffb149f0);
    --button-tertiary-text: #7e3e00;
    --button-tertiary-shadow: 0 3px 12px #d2690029,
      inset 0 1px 0 #fffffff2;
    --button-ghost-hover: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --button-ghost-hover: color-mix(in oklch,
      var(--color-primary) 6%,
      var(--color-bg) 94%);
    }
  }

  html[data-app-theme="light"] {
    --button-ghost-text: var(--session-accent-ink);
    --playlist-row-hover-bg: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-hover-bg: color-mix(in oklch,
      var(--color-primary) 14%,
      var(--color-bg) 86%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-border: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-border: color-mix(in oklch,
      var(--color-border) 78%,
      white 22%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-meta-text: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-meta-text: color-mix(in oklch,
      var(--color-foreground) 58%,
      var(--color-muted-foreground) 42%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-meta-text-soft: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-meta-text-soft: color-mix(in oklch,
      var(--color-foreground) 48%,
      var(--color-muted-foreground) 52%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-meta-text-strong: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-meta-text-strong: color-mix(in oklch,
      var(--color-foreground) 68%,
      var(--color-muted-foreground) 32%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-restricted-text: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-restricted-text: color-mix(in oklch,
      var(--color-muted-foreground) 88%,
      var(--color-card) 12%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-restricted-meta-text: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-restricted-meta-text: color-mix(in oklch,
      var(--color-muted-foreground) 76%,
      var(--color-card) 24%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-index-bg: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-index-bg: color-mix(in oklch,
      var(--color-primary) 10%,
      var(--color-muted) 90%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-index-text: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-index-text: color-mix(in oklch,
      var(--color-foreground) 84%,
      var(--color-primary) 16%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-waveform-idle: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-waveform-idle: color-mix(in oklch,
      var(--color-foreground) 24%,
      white 76%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-action-text: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-action-text: color-mix(in oklch,
      var(--color-foreground) 54%,
      var(--color-muted-foreground) 46%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-action-text-disabled: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-action-text-disabled: color-mix(in oklch,
      var(--color-foreground) 32%,
      white 68%);
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-current-bg: linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-current-bg: linear-gradient(135deg,
      color-mix(in oklch, var(--color-primary) 18%, white 82%),
      color-mix(in oklch, var(--color-primary) 12%, var(--color-card) 88%));
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-pending-bg: linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-pending-bg: linear-gradient(135deg,
      color-mix(in oklch, var(--color-primary) 12%, white 88%),
      color-mix(in oklch, var(--color-primary) 7%, var(--color-card) 93%));
    }
  }

  html[data-app-theme="light"] {
    --playlist-row-restricted-bg: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --playlist-row-restricted-bg: color-mix(in oklch,
      var(--color-muted) 76%,
      var(--color-card) 24%);
    }
  }

  html[data-app-theme="light"] {
    --scrollbar-track: var(--page-bg-to);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] {
      --scrollbar-track: color-mix(in oklch,
      var(--page-bg-to) 28%,
      white 72%);
    }
  }

  html[data-app-theme="light"] {
    --scrollbar-thumb: #7fbe3cb8;
    --scrollbar-thumb-hover: #66a91fe0;
    --scrollbar-thumb-border: #ffffffd1;
    --scrollbar-thumb-shadow: 0 3px 8px #43751d33;
    --scrollbar-thumb-shadow-hover: 0 4px 12px #43751d4d;
    --scrollbar-thumb-inset-shadow: inset 0 1px 0 #fffc;
    --scrollbar-thumb-surface: linear-gradient(90deg,
      #bcea6e,
      #65ae20);
    --scrollbar-thumb-surface-hover: linear-gradient(90deg,
      #cdf289,
      #569e12);
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  html[data-app-theme="psone"] {
    --color-bg: #00000a;
    --color-fg: #fff;
    --color-background: var(--color-bg);
    --color-foreground: var(--color-fg);
    --color-card: #081668;
    --color-card-foreground: var(--color-fg);
    --color-popover: #060f48;
    --color-popover-foreground: var(--color-fg);
    --color-primary: #3e8ca5;
    --color-primary-foreground: #fff;
    --color-secondary: #0e227d;
    --color-secondary-foreground: #fff;
    --color-muted: #0d2289;
    --color-muted-foreground: #c6c6c6;
    --color-destructive: #b62f28;
    --color-destructive-foreground: #fff;
    --color-info: #49a7c6;
    --color-success: #4ea35b;
    --color-warning: #f19c42;
    --color-border: #c6c6c6;
    --color-input: #c6c6c6;
    --color-ring: #f4f251;
    --ui-color-canvas-start: #000005;
    --ui-color-canvas: #010316;
    --ui-color-canvas-end: #050a34;
    --ui-color-glow: #49a7c638;
    --ui-surface-panel: #06093b;
    --ui-surface-card: #0d2289;
    --ui-border-surface: #e1e1e1;
    --ui-shadow-panel: inset 0 0 0 2px #ffffffd1,
      inset 0 0 10px 4px #0000007a,
      5px 6px 0 #000000b8;
    --radius: .5rem;
    --radius-xs: .25rem;
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .625rem;
    --radius-xl: .75rem;
    --radius-2xl: .875rem;
    --radius-pill: .5rem;
    --page-bg-from: var(--ui-color-canvas-start);
    --page-bg-via: var(--ui-color-canvas);
    --page-bg-to: var(--ui-color-canvas-end);
    --page-glow: var(--ui-color-glow);
    --surface-panel: var(--ui-surface-panel);
    --surface-card: var(--ui-surface-card);
    --surface-border: var(--ui-border-surface);
    --surface-shadow: var(--ui-shadow-panel);
    --session-accent-soft: #0d2289;
    --session-accent-soft-strong: #1430a2;
    --session-accent-border: #c6c6c6;
    --session-accent-ring: #f4f251;
    --session-accent-ink: #fff;
    --session-accent-gradient: linear-gradient(90deg, transparent, #3e8ca5, transparent);
    --session-accent-gradient-strong: linear-gradient(90deg, transparent, #49a7c6, transparent);
    --button-primary-border: #ffffff42;
    --button-primary-bg: linear-gradient(90deg, transparent, #3e8ca5, transparent);
    --button-primary-bg-hover: linear-gradient(90deg, transparent, #49a7c6, transparent);
    --button-primary-text: #fff;
    --button-primary-shadow: none;
    --button-secondary-border: #ffffff38;
    --button-secondary-bg: linear-gradient(90deg, transparent, #747674, transparent);
    --button-secondary-bg-hover: linear-gradient(90deg, transparent, #aeafae, transparent);
    --button-secondary-text: #fff;
    --button-secondary-shadow: none;
    --button-tertiary-border: #ffffff2e;
    --button-tertiary-bg: linear-gradient(90deg, transparent, #383a4a, transparent);
    --button-tertiary-bg-hover: linear-gradient(90deg, transparent, #5a5d70, transparent);
    --button-tertiary-text: #fff;
    --button-tertiary-shadow: none;
    --button-ghost-hover: linear-gradient(90deg, transparent, #49a7c670, transparent);
    --button-ghost-text: #fff;
    --playlist-row-hover-bg: linear-gradient(90deg, transparent, #49a7c661, transparent);
    --playlist-row-border: #c6c6c64d;
    --playlist-row-meta-text: #c6c6c6;
    --playlist-row-meta-text-soft: #aaa9af;
    --playlist-row-meta-text-strong: #fff;
    --playlist-row-restricted-text: #aeafae;
    --playlist-row-restricted-meta-text: #969796;
    --playlist-row-index-bg: #00000075;
    --playlist-row-index-text: #fff;
    --playlist-row-waveform-idle: #c6c6c661;
    --playlist-row-action-text: #fff;
    --playlist-row-action-text-disabled: #aeafae;
    --playlist-row-current-bg: linear-gradient(90deg, #0d2289, #3e8ca5b8, #0d2289);
    --playlist-row-pending-bg: linear-gradient(90deg, #06093b, #0d2289, #06093b);
    --playlist-row-restricted-bg: #06093bc2;
    --scrollbar-track: #000000b3;
    --scrollbar-thumb: #3e8ca5;
    --scrollbar-thumb-hover: #49a7c6;
    --scrollbar-thumb-border: #c6c6c6;
    --scrollbar-thumb-surface: linear-gradient(90deg, #2c6776, #4ea35b);
    --scrollbar-thumb-surface-hover: linear-gradient(90deg, #3e8ca5, #49a7c6);
    --scrollbar-thumb-shadow: none;
    --scrollbar-thumb-shadow-hover: none;
    --scrollbar-thumb-inset-shadow: none;
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  html[data-app-theme="psone"] body {
    background-color: #00000a;
    background-image: repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 4px), radial-gradient(circle at 50% -20%, #3e8ca533, transparent 46%), linear-gradient(145deg, var(--page-bg-from), var(--page-bg-via) 55%, var(--page-bg-to));
    font-family: "Final Fantasy Script Collection - Final Fantasy VII", var(--font-app-sans), sans-serif;
    letter-spacing: 0;
    -webkit-font-smoothing: none;
  }

  html[data-app-theme="system"] {
    --color-bg: #fff;
    --color-fg: #000;
    --color-background: var(--color-bg);
    --color-foreground: var(--color-fg);
    --color-card: #fff;
    --color-card-foreground: #000;
    --color-popover: #fff;
    --color-popover-foreground: #000;
    --color-primary: #000;
    --color-primary-foreground: #fff;
    --color-secondary: #fff;
    --color-secondary-foreground: #000;
    --color-muted: #e5e5e5;
    --color-muted-foreground: #4a4a4a;
    --color-destructive: #000;
    --color-destructive-foreground: #fff;
    --color-info: #000;
    --color-info-foreground: #000;
    --color-info-soft: #fff;
    --color-info-soft-strong: #e5e5e5;
    --color-info-border: #000;
    --color-info-solid: #000;
    --color-success: #000;
    --color-success-foreground: #000;
    --color-success-soft: #fff;
    --color-success-soft-strong: #e5e5e5;
    --color-success-border: #000;
    --color-success-solid: #000;
    --color-warning: #000;
    --color-warning-foreground: #000;
    --color-warning-soft: #fff;
    --color-warning-soft-strong: #e5e5e5;
    --color-warning-border: #000;
    --color-warning-solid: #000;
    --color-error: #000;
    --color-error-foreground: #000;
    --color-error-soft: #fff;
    --color-error-soft-strong: #e5e5e5;
    --color-error-border: #000;
    --color-error-solid: #000;
    --color-border: #000;
    --color-input: #000;
    --color-ring: #000;
    --ui-color-canvas-start: #fff;
    --ui-color-canvas: #fff;
    --ui-color-canvas-end: #fff;
    --ui-color-glow: transparent;
    --ui-surface-panel: #fff;
    --ui-surface-card: #fff;
    --ui-border-surface: #000;
    --ui-shadow-panel: 2px 2px 0 #000;
    --radius: 0;
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-pill: 0;
    --page-bg-from: #fff;
    --page-bg-via: #fff;
    --page-bg-to: #fff;
    --page-glow: transparent;
    --surface-panel: #fff;
    --surface-card: #fff;
    --surface-border: #000;
    --surface-shadow: 2px 2px 0 #000;
    --session-accent-soft: #fff;
    --session-accent-soft-strong: #000;
    --session-accent-border: #000;
    --session-accent-ring: #000;
    --session-accent-ink: #000;
    --session-accent-gradient: #fff;
    --session-accent-gradient-strong: #000;
    --button-primary-border: #000;
    --button-primary-bg: #fff;
    --button-primary-bg-hover: #000;
    --button-primary-text: #000;
    --button-primary-shadow: none;
    --button-secondary-border: #000;
    --button-secondary-bg: #fff;
    --button-secondary-bg-hover: #000;
    --button-secondary-text: #000;
    --button-secondary-shadow: none;
    --button-tertiary-border: #000;
    --button-tertiary-bg: #fff;
    --button-tertiary-bg-hover: #000;
    --button-tertiary-text: #000;
    --button-tertiary-shadow: none;
    --button-ghost-hover: #000;
    --button-ghost-text: #000;
    --playlist-row-hover-bg: #000;
    --playlist-row-border: #000;
    --playlist-row-meta-text: #404040;
    --playlist-row-meta-text-soft: #5f5f5f;
    --playlist-row-meta-text-strong: #000;
    --playlist-row-restricted-text: #707070;
    --playlist-row-restricted-meta-text: #858585;
    --playlist-row-index-bg: #000;
    --playlist-row-index-text: #fff;
    --playlist-row-waveform-idle: #777;
    --playlist-row-action-text: #000;
    --playlist-row-action-text-disabled: #a5a5a5;
    --playlist-row-current-bg: #d8d8d8;
    --playlist-row-pending-bg: #fff;
    --playlist-row-restricted-bg: #eee;
    --scrollbar-size: 22px;
    --scrollbar-padding: 0px;
    --scrollbar-track: #fff;
    --scrollbar-thumb: #fff;
    --scrollbar-thumb-hover: #000;
    --scrollbar-thumb-border: #000;
    --scrollbar-thumb-surface: #fff;
    --scrollbar-thumb-surface-hover: #000;
    --scrollbar-thumb-shadow: none;
    --scrollbar-thumb-shadow-hover: none;
    --scrollbar-thumb-inset-shadow: none;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  html[data-app-theme="system"] body {
    color: #000;
    letter-spacing: -.025em;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
    background-image: linear-gradient(90deg, #fff 21px, #0000 1%), linear-gradient(#fff 21px, #0000 1%);
    background-position: center;
    background-size: 22px 22px;
    background-attachment: fixed;
    font-family: "System Geneva 9", "System Chicago 12", sans-serif;
    font-size: 18px;
  }

  html[data-app-theme="system"] :is(code, kbd, pre, samp) {
    font-family: "System Monaco", var(--font-app-mono), monospace;
  }

  html {
    min-height: 100%;
    font-size: var(--type-root-size);
    background-color: var(--page-bg-via);
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --document-scrollbar-size: max(18px, var(--scrollbar-size));
    --document-scrollbar-padding: 1px;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  html[data-scrollbar-gutter-mode="auto"] {
    scrollbar-gutter: auto;
  }

  html::-webkit-scrollbar {
    width: var(--document-scrollbar-size);
    height: var(--document-scrollbar-size);
  }

  html::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
  }

  html::-webkit-scrollbar-thumb {
    min-height: var(--scrollbar-min-length);
    background: var(--scrollbar-thumb-surface, var(--scrollbar-thumb));
    border: var(--document-scrollbar-padding) solid var(--scrollbar-thumb-border);
    box-shadow: var(--scrollbar-thumb-shadow);
    background-clip: content-box;
    border-radius: 9999px;
  }

  html::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-surface-hover, var(--scrollbar-thumb-hover));
    box-shadow: var(--scrollbar-thumb-shadow-hover);
  }

  body {
    background-color: var(--page-bg-via);
    background-image: linear-gradient(135deg, var(--page-bg-from), var(--page-bg-via), var(--page-bg-to));
    min-height: 100%;
    color: var(--color-fg);
    font-family: var(--font-app-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body[data-session-flat-corners="true"], body[data-session-flat-corners="true"] *, body[data-session-flat-corners="true"] :before, body[data-session-flat-corners="true"] :after {
    border-radius: 0 !important;
  }

  code, kbd, pre, samp {
    font-family: var(--font-app-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  [data-slot="scroll-area"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  [data-slot="scroll-area"]::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  [data-slot="scroll-area"]::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
  }

  [data-slot="scroll-area"]::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-surface, var(--scrollbar-thumb));
    border: var(--scrollbar-padding) solid var(--scrollbar-thumb-border);
    box-shadow: var(--scrollbar-thumb-shadow);
    background-clip: content-box;
    border-radius: 9999px;
    transition: background .16s, box-shadow .16s;
  }

  [data-slot="scroll-area"]::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-surface-hover, var(--scrollbar-thumb-hover));
    box-shadow: var(--scrollbar-thumb-shadow-hover);
  }
}

@layer components {
  .survey-scale-slider {
    appearance: none;
    cursor: pointer;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    --survey-slider-percent: 0%;
    --survey-slider-track-h: .7rem;
    --survey-slider-thumb-size: 1.55rem;
    --survey-slider-fill-start: var(--color-primary);
    background: none;
    border-radius: 9999px;
    width: 100%;
    height: 2rem;
    margin: 0;
    padding: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-fill-start: color-mix(in oklch,
      var(--color-primary) 28%,
      white 72%);
    }
  }

  .survey-scale-slider {
    --survey-slider-fill-end: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-fill-end: color-mix(in oklch,
      var(--color-primary) 44%,
      white 56%);
    }
  }

  .survey-scale-slider {
    --survey-slider-unfilled: var(--page-bg-via);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-unfilled: color-mix(in oklch,
      var(--page-bg-via) 34%,
      white 66%);
    }
  }

  .survey-scale-slider {
    --survey-slider-track-border: var(--page-bg-to);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-track-border: color-mix(in oklch,
      var(--page-bg-to) 20%,
      white 80%);
    }
  }

  .survey-scale-slider {
    --survey-slider-thumb-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-thumb-border: color-mix(in oklch,
      var(--color-primary) 26%,
      white 74%);
    }
  }

  .survey-scale-slider {
    --survey-slider-thumb-shadow: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-thumb-shadow: color-mix(in oklch,
      var(--color-primary) 14%,
      transparent);
    }
  }

  .survey-scale-slider {
    --survey-slider-thumb-ring: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider {
      --survey-slider-thumb-ring: color-mix(in oklch,
      var(--color-primary) 18%,
      transparent);
    }
  }

  .survey-scale-slider:focus {
    outline: none;
  }

  .survey-scale-slider::-webkit-slider-runnable-track {
    height: var(--survey-slider-track-h);
    border: 1px solid var(--survey-slider-track-border);
    background: linear-gradient(to right, var(--survey-slider-fill-start) 0, var(--survey-slider-fill-end) var(--survey-slider-percent), var(--survey-slider-unfilled) var(--survey-slider-percent), var(--survey-slider-unfilled) 100%);
    border-radius: 9999px;
    box-shadow: inset 0 1px 1px #ffffff9e, inset 0 -1px 1px #94a3b81f;
  }

  .survey-scale-slider::-moz-range-track {
    height: var(--survey-slider-track-h);
    border: 1px solid var(--survey-slider-track-border);
    background: var(--survey-slider-unfilled);
    border-radius: 9999px;
    box-shadow: inset 0 1px 1px #ffffff9e, inset 0 -1px 1px #94a3b81f;
  }

  .survey-scale-slider::-moz-range-progress {
    height: var(--survey-slider-track-h);
    background: linear-gradient(to right, var(--survey-slider-fill-start), var(--survey-slider-fill-end));
    border-radius: 9999px;
  }

  .survey-scale-slider::-webkit-slider-thumb {
    width: var(--survey-slider-thumb-size);
    height: var(--survey-slider-thumb-size);
    border: 1px solid var(--survey-slider-thumb-border);
    background: linear-gradient(180deg, #fffffffa 0%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider::-webkit-slider-thumb {
      background: linear-gradient(180deg, #fffffffa 0%, color-mix(in oklch, var(--color-primary) 8%, white 92%) 100%);
    }
  }

  .survey-scale-slider::-webkit-slider-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 1px #ffffff94;
    transition: box-shadow .15s, transform .15s;
  }

  .survey-scale-slider::-moz-range-thumb {
    width: var(--survey-slider-thumb-size);
    height: var(--survey-slider-thumb-size);
    border: 1px solid var(--survey-slider-thumb-border);
    background: linear-gradient(180deg, #fffffffa 0%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .survey-scale-slider::-moz-range-thumb {
      background: linear-gradient(180deg, #fffffffa 0%, color-mix(in oklch, var(--color-primary) 8%, white 92%) 100%);
    }
  }

  .survey-scale-slider::-moz-range-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 1px #ffffff94;
    transition: box-shadow .15s, transform .15s;
  }

  .survey-scale-slider::-webkit-slider-thumb {
    appearance: none;
    margin-top: calc((var(--survey-slider-track-h) - var(--survey-slider-thumb-size)) / 2);
  }

  .survey-scale-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  .survey-scale-slider:hover::-moz-range-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  .survey-scale-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  .survey-scale-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  .survey-scale-slider:active::-webkit-slider-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  .survey-scale-slider:active::-moz-range-thumb {
    box-shadow: 0 8px 18px var(--survey-slider-thumb-shadow), 0 0 0 4px var(--survey-slider-thumb-ring);
  }

  [data-transport-progress], [data-transport-volume] {
    accent-color: var(--color-primary);
    margin: 0;
    padding: 0;
    display: block;
  }

  [data-transport-progress]:focus-visible, [data-transport-volume]:focus-visible {
    outline: none;
  }

  [data-transport-progress]::-webkit-slider-runnable-track {
    height: 0;
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 999px;
  }

  [data-transport-progress]::-moz-range-track {
    height: 0;
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 9999px;
  }

  [data-transport-progress]::-moz-range-progress {
    background: none;
    border-radius: 9999px;
    height: 0;
  }

  [data-transport-progress]::-webkit-slider-thumb {
    border: 1px solid var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-webkit-slider-thumb {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 68%, var(--surface-border) 32%);
    }
  }

  [data-transport-progress]::-webkit-slider-thumb {
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-webkit-slider-thumb {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 92%, var(--surface-card) 8%) 0%, color-mix(in srgb, var(--color-primary) 72%, black 28%) 100%);
    }
  }

  [data-transport-progress]::-webkit-slider-thumb {
    box-shadow: 0 8px 18px #0000006b, 0 0 0 1px var(--color-primary), 0 0 12px var(--color-primary), 0 0 24px var(--session-accent-ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-webkit-slider-thumb {
      box-shadow: 0 8px 18px #0000006b, 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary) 34%, transparent), 0 0 24px color-mix(in srgb, var(--session-accent-ring) 22%, transparent);
    }
  }

  [data-transport-progress]::-moz-range-thumb {
    border: 1px solid var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-moz-range-thumb {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 68%, var(--surface-border) 32%);
    }
  }

  [data-transport-progress]::-moz-range-thumb {
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-moz-range-thumb {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 92%, var(--surface-card) 8%) 0%, color-mix(in srgb, var(--color-primary) 72%, black 28%) 100%);
    }
  }

  [data-transport-progress]::-moz-range-thumb {
    box-shadow: 0 8px 18px #0000006b, 0 0 0 1px var(--color-primary), 0 0 12px var(--color-primary), 0 0 24px var(--session-accent-ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-progress]::-moz-range-thumb {
      box-shadow: 0 8px 18px #0000006b, 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary) 34%, transparent), 0 0 24px color-mix(in srgb, var(--session-accent-ring) 22%, transparent);
    }
  }

  [data-transport-progress]::-webkit-slider-thumb {
    appearance: none;
    width: var(--transport-progress-thumb-size);
    height: var(--transport-progress-thumb-size);
    margin-top: calc(( var(--transport-progress-track-h) - var(--transport-progress-thumb-size) ) / 2 - 2px);
  }

  [data-transport-progress]::-moz-range-thumb {
    width: var(--transport-progress-thumb-size);
    height: var(--transport-progress-thumb-size);
    transform: translateY(-2px);
  }

  [data-transport-volume]::-webkit-slider-runnable-track {
    height: var(--transport-volume-track-h);
    border: 1px solid var(--session-accent-border);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-webkit-slider-runnable-track {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 52%, var(--surface-border) 48%);
    }
  }

  [data-transport-volume]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--transport-volume-elapsed) 0%, var(--transport-volume-elapsed) var(--transport-volume-pct), var(--transport-volume-remaining) var(--transport-volume-pct), var(--transport-volume-remaining) 100%);
    box-shadow: inset 0 1px #ffffff1f, inset 0 -1px #0000002e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-webkit-slider-runnable-track {
      background: linear-gradient(to right, color-mix(in srgb, var(--transport-volume-elapsed) 88%, white 12%) 0%, var(--transport-volume-elapsed) var(--transport-volume-pct), var(--transport-volume-remaining) var(--transport-volume-pct), color-mix(in srgb, var(--transport-volume-remaining) 88%, black 12%) 100%);
    }
  }

  [data-transport-volume]::-moz-range-track {
    height: var(--transport-volume-track-h);
    border: 1px solid var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-moz-range-track {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 52%, var(--surface-border) 48%);
    }
  }

  [data-transport-volume]::-moz-range-track {
    background: var(--transport-volume-remaining);
    border-radius: 9999px;
    box-shadow: inset 0 1px #ffffff1f, inset 0 -1px #0000002e;
  }

  [data-transport-volume]::-moz-range-progress {
    height: var(--transport-volume-track-h);
    background: linear-gradient(to right, var(--transport-volume-elapsed) 0%, var(--transport-volume-elapsed) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-moz-range-progress {
      background: linear-gradient(to right, color-mix(in srgb, var(--transport-volume-elapsed) 88%, white 12%) 0%, var(--transport-volume-elapsed) 100%);
    }
  }

  [data-transport-volume]::-webkit-slider-thumb {
    border: 1px solid var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-webkit-slider-thumb {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 68%, var(--surface-border) 32%);
    }
  }

  [data-transport-volume]::-webkit-slider-thumb {
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--color-primary) 55%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-webkit-slider-thumb {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 96%, white 4%) 0%, color-mix(in srgb, var(--color-primary) 68%, var(--session-accent-ring) 32%) 55%, color-mix(in srgb, var(--color-primary) 76%, black 24%) 100%);
    }
  }

  [data-transport-volume]::-webkit-slider-thumb {
    box-shadow: 0 -7px 16px var(--color-primary), 0 0 0 1px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-webkit-slider-thumb {
      box-shadow: 0 -7px 16px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
    }
  }

  [data-transport-volume]::-moz-range-thumb {
    border: 1px solid var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-moz-range-thumb {
      border: 1px solid color-mix(in srgb, var(--session-accent-border) 68%, var(--surface-border) 32%);
    }
  }

  [data-transport-volume]::-moz-range-thumb {
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--color-primary) 55%, var(--color-primary) 100%);
    border-radius: 9999px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-moz-range-thumb {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 96%, white 4%) 0%, color-mix(in srgb, var(--color-primary) 68%, var(--session-accent-ring) 32%) 55%, color-mix(in srgb, var(--color-primary) 76%, black 24%) 100%);
    }
  }

  [data-transport-volume]::-moz-range-thumb {
    box-shadow: 0 -7px 16px var(--color-primary), 0 0 0 1px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-transport-volume]::-moz-range-thumb {
      box-shadow: 0 -7px 16px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
    }
  }

  [data-transport-volume]::-webkit-slider-thumb {
    appearance: none;
    width: var(--transport-volume-thumb-size);
    height: var(--transport-volume-thumb-size);
    margin-top: calc(((var(--transport-volume-track-h) - var(--transport-volume-thumb-size)) / 2) - 1px);
  }

  [data-transport-volume]::-moz-range-thumb {
    width: var(--transport-volume-thumb-size);
    height: var(--transport-volume-thumb-size);
    transform: translateY(-1px);
  }

  @media (pointer: coarse) {
    [data-transport-progress] {
      --transport-progress-track-h: 10px;
      --transport-progress-thumb-size: 22px;
      height: 36px;
    }
  }
}

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

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

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-\[3\%\] {
    inset: 3%;
  }

  .inset-\[6\%\] {
    inset: 6%;
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-2 {
    inset-inline: calc(var(--spacing) * 2);
  }

  .inset-x-8 {
    inset-inline: calc(var(--spacing) * 8);
  }

  .inset-x-12 {
    inset-inline: calc(var(--spacing) * 12);
  }

  .inset-x-\[var\(--admin-shell-padding\)\] {
    inset-inline: var(--admin-shell-padding);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

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

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-\[0\.45rem\] {
    top: .45rem;
  }

  .top-\[2px\] {
    top: 2px;
  }

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

  .top-\[calc\(50\%\+2px\)\] {
    top: calc(50% + 2px);
  }

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

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

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

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

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-\[0\.7rem\] {
    right: .7rem;
  }

  .right-\[0\.45rem\] {
    right: .45rem;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-\[calc\(0\.7rem\+env\(safe-area-inset-bottom\)\)\] {
    bottom: calc(.7rem + env(safe-area-inset-bottom));
  }

  .bottom-\[calc\(100\%\+0\.7rem\)\] {
    bottom: calc(100% + .7rem);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

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

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-\[0\.55rem\] {
    left: .55rem;
  }

  .isolate {
    isolation: isolate;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .z-\[var\(--z-dialog\)\] {
    z-index: var(--z-dialog);
  }

  .z-\[var\(--z-overlay\)\] {
    z-index: var(--z-overlay);
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3 {
    order: 3;
  }

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

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-\[0\.2rem\] {
    margin-top: .2rem;
  }

  .mt-\[0\.3rem\] {
    margin-top: .3rem;
  }

  .mt-\[0\.05rem\] {
    margin-top: .05rem;
  }

  .mt-\[0\.6rem\] {
    margin-top: .6rem;
  }

  .mt-\[0\.7rem\] {
    margin-top: .7rem;
  }

  .mt-\[0\.12rem\] {
    margin-top: .12rem;
  }

  .mt-\[0\.25rem\] {
    margin-top: .25rem;
  }

  .mt-\[0\.35rem\] {
    margin-top: .35rem;
  }

  .mt-\[0\.45rem\] {
    margin-top: .45rem;
  }

  .mt-\[0\.55rem\] {
    margin-top: .55rem;
  }

  .mt-\[0\.65rem\] {
    margin-top: .65rem;
  }

  .mt-\[0\.85rem\] {
    margin-top: .85rem;
  }

  .mt-\[clamp\(0\.95rem\,2vh\,1\.15rem\)\] {
    margin-top: clamp(.95rem, 2vh, 1.15rem);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-auto {
    margin-right: auto;
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-\[clamp\(0\.55rem\,1\.1vh\,0\.8rem\)\] {
    margin-bottom: clamp(.55rem, 1.1vh, .8rem);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

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

  .box-border {
    box-sizing: border-box;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

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

  .table {
    display: table;
  }

  .table-caption {
    display: table-caption;
  }

  .table-cell {
    display: table-cell;
  }

  .table-row {
    display: table-row;
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }

  .size-\[0\.82rem\] {
    width: .82rem;
    height: .82rem;
  }

  .size-\[0\.88rem\] {
    width: .88rem;
    height: .88rem;
  }

  .size-\[0\.92rem\] {
    width: .92rem;
    height: .92rem;
  }

  .size-\[0\.95rem\] {
    width: .95rem;
    height: .95rem;
  }

  .size-\[1\.1rem\] {
    width: 1.1rem;
    height: 1.1rem;
  }

  .size-\[1\.2rem\] {
    width: 1.2rem;
    height: 1.2rem;
  }

  .size-\[1\.05rem\] {
    width: 1.05rem;
    height: 1.05rem;
  }

  .size-\[1\.15rem\] {
    width: 1.15rem;
    height: 1.15rem;
  }

  .size-\[1\.55rem\] {
    width: 1.55rem;
    height: 1.55rem;
  }

  .size-\[1\.72rem\] {
    width: 1.72rem;
    height: 1.72rem;
  }

  .size-\[1\.125rem\] {
    width: 1.125rem;
    height: 1.125rem;
  }

  .size-\[1rem\] {
    width: 1rem;
    height: 1rem;
  }

  .size-\[2\.15rem\] {
    width: 2.15rem;
    height: 2.15rem;
  }

  .size-\[84\%\] {
    width: 84%;
    height: 84%;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-\[0\.9rem\] {
    height: .9rem;
  }

  .h-\[0\.72rem\] {
    height: .72rem;
  }

  .h-\[0\.82rem\] {
    height: .82rem;
  }

  .h-\[0\.85rem\] {
    height: .85rem;
  }

  .h-\[0\.95rem\] {
    height: .95rem;
  }

  .h-\[0\.875rem\] {
    height: .875rem;
  }

  .h-\[1\.1rem\] {
    height: 1.1rem;
  }

  .h-\[1\.05rem\] {
    height: 1.05rem;
  }

  .h-\[1\.6rem\] {
    height: 1.6rem;
  }

  .h-\[1\.9rem\] {
    height: 1.9rem;
  }

  .h-\[1\.15rem\] {
    height: 1.15rem;
  }

  .h-\[1\.85rem\] {
    height: 1.85rem;
  }

  .h-\[1\.125rem\] {
    height: 1.125rem;
  }

  .h-\[2\.4rem\] {
    height: 2.4rem;
  }

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

  .h-\[3rem\] {
    height: 3rem;
  }

  .h-\[12\.5rem\] {
    height: 12.5rem;
  }

  .h-\[26rem\] {
    height: 26rem;
  }

  .h-\[32\.5rem\] {
    height: 32.5rem;
  }

  .h-\[clamp\(4\.1rem\,8vw\,6\.6rem\)\] {
    height: clamp(4.1rem, 8vw, 6.6rem);
  }

  .h-\[env\(safe-area-inset-top\)\] {
    height: env(safe-area-inset-top);
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-\[26rem\] {
    max-height: 26rem;
  }

  .max-h-\[72vh\] {
    max-height: 72vh;
  }

  .max-h-\[calc\(100dvh-1\.5rem\)\] {
    max-height: calc(100dvh - 1.5rem);
  }

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

  .max-h-\[calc\(100vh-2rem\)\] {
    max-height: calc(100vh - 2rem);
  }

  .max-h-\[min\(52dvh\,20rem\)\] {
    max-height: min(52dvh, 20rem);
  }

  .max-h-\[min\(88dvh\,52rem\)\] {
    max-height: min(88dvh, 52rem);
  }

  .\!min-h-0 {
    min-height: calc(var(--spacing) * 0) !important;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-\[1\.85rem\] {
    min-height: 1.85rem;
  }

  .min-h-\[1\.875rem\] {
    min-height: 1.875rem;
  }

  .min-h-\[1rem\] {
    min-height: 1rem;
  }

  .min-h-\[2\.2rem\] {
    min-height: 2.2rem;
  }

  .min-h-\[5\.25rem\] {
    min-height: 5.25rem;
  }

  .min-h-\[5\.75rem\] {
    min-height: 5.75rem;
  }

  .min-h-\[12\.5rem\] {
    min-height: 12.5rem;
  }

  .min-h-\[12rem\] {
    min-height: 12rem;
  }

  .min-h-\[15rem\] {
    min-height: 15rem;
  }

  .min-h-\[16rem\] {
    min-height: 16rem;
  }

  .min-h-\[18rem\] {
    min-height: 18rem;
  }

  .min-h-\[20rem\] {
    min-height: 20rem;
  }

  .min-h-\[22rem\] {
    min-height: 22rem;
  }

  .min-h-\[24rem\] {
    min-height: 24rem;
  }

  .min-h-\[25rem\] {
    min-height: 25rem;
  }

  .min-h-\[calc\(100\%-1px\)\] {
    min-height: calc(100% - 1px);
  }

  .min-h-\[clamp\(4\.6rem\,9\.4vh\,5\.15rem\)\] {
    min-height: clamp(4.6rem, 9.4vh, 5.15rem);
  }

  .min-h-\[clamp\(5\.25rem\,11vh\,6rem\)\] {
    min-height: clamp(5.25rem, 11vh, 6rem);
  }

  .min-h-\[min\(calc\(100dvh-1\.5rem\)\,42rem\)\] {
    min-height: min(100dvh - 1.5rem, 42rem);
  }

  .min-h-\[var\(--admin-shell-min-height\)\] {
    min-height: var(--admin-shell-min-height);
  }

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

  .min-h-full {
    min-height: 100%;
  }

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

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

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[0\.9rem\] {
    width: .9rem;
  }

  .w-\[0\.82rem\] {
    width: .82rem;
  }

  .w-\[0\.85rem\] {
    width: .85rem;
  }

  .w-\[0\.95rem\] {
    width: .95rem;
  }

  .w-\[0\.875rem\] {
    width: .875rem;
  }

  .w-\[1\.1rem\] {
    width: 1.1rem;
  }

  .w-\[1\.05rem\] {
    width: 1.05rem;
  }

  .w-\[1\.15rem\] {
    width: 1.15rem;
  }

  .w-\[1\.85rem\] {
    width: 1.85rem;
  }

  .w-\[1\.125rem\] {
    width: 1.125rem;
  }

  .w-\[2\.4rem\] {
    width: 2.4rem;
  }

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

  .w-\[3\.75rem\] {
    width: 3.75rem;
  }

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

  .w-\[3rem\] {
    width: 3rem;
  }

  .w-\[5\.35rem\] {
    width: 5.35rem;
  }

  .w-\[8\%\] {
    width: 8%;
  }

  .w-\[10\%\] {
    width: 10%;
  }

  .w-\[12\%\] {
    width: 12%;
  }

  .w-\[12\.5rem\] {
    width: 12.5rem;
  }

  .w-\[14\%\] {
    width: 14%;
  }

  .w-\[15\%\] {
    width: 15%;
  }

  .w-\[16\%\] {
    width: 16%;
  }

  .w-\[18\%\] {
    width: 18%;
  }

  .w-\[18rem\] {
    width: 18rem;
  }

  .w-\[20\%\] {
    width: 20%;
  }

  .w-\[22\%\] {
    width: 22%;
  }

  .w-\[23\%\] {
    width: 23%;
  }

  .w-\[24\%\] {
    width: 24%;
  }

  .w-\[26\%\] {
    width: 26%;
  }

  .w-\[28\%\] {
    width: 28%;
  }

  .w-\[30\%\] {
    width: 30%;
  }

  .w-\[32\%\] {
    width: 32%;
  }

  .w-\[34\%\] {
    width: 34%;
  }

  .w-\[36\%\] {
    width: 36%;
  }

  .w-\[44\%\] {
    width: 44%;
  }

  .w-\[48\%\] {
    width: 48%;
  }

  .w-\[52\%\] {
    width: 52%;
  }

  .w-\[56\%\] {
    width: 56%;
  }

  .w-\[calc\(100vw-1rem\)\] {
    width: calc(100vw - 1rem);
  }

  .w-\[calc\(100vw-2rem\)\] {
    width: calc(100vw - 2rem);
  }

  .w-\[min\(64\.5vw\,21rem\)\] {
    width: min(64.5vw, 21rem);
  }

  .w-\[min\(100vw-1\.25rem\,52rem\)\] {
    width: min(100vw - 1.25rem, 52rem);
  }

  .w-\[min\(calc\(100\%-2rem\)\,34rem\)\] {
    width: min(100% - 2rem, 34rem);
  }

  .w-\[var\(--layout-sidebar-collapsed\)\] {
    width: var(--layout-sidebar-collapsed);
  }

  .w-\[var\(--layout-sidebar-expanded\)\] {
    width: var(--layout-sidebar-expanded);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-52 {
    max-width: calc(var(--spacing) * 52);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }

  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }

  .max-w-\[8\.75rem\] {
    max-width: 8.75rem;
  }

  .max-w-\[13\.75rem\] {
    max-width: 13.75rem;
  }

  .max-w-\[16\.65rem\] {
    max-width: 16.65rem;
  }

  .max-w-\[16rem\] {
    max-width: 16rem;
  }

  .max-w-\[18rem\] {
    max-width: 18rem;
  }

  .max-w-\[20rem\] {
    max-width: 20rem;
  }

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

  .max-w-\[26rem\] {
    max-width: 26rem;
  }

  .max-w-\[28rem\] {
    max-width: 28rem;
  }

  .max-w-\[30rem\] {
    max-width: 30rem;
  }

  .max-w-\[31rem\] {
    max-width: 31rem;
  }

  .max-w-\[32rem\] {
    max-width: 32rem;
  }

  .max-w-\[34rem\] {
    max-width: 34rem;
  }

  .max-w-\[36rem\] {
    max-width: 36rem;
  }

  .max-w-\[38rem\] {
    max-width: 38rem;
  }

  .max-w-\[40rem\] {
    max-width: 40rem;
  }

  .max-w-\[54rem\] {
    max-width: 54rem;
  }

  .max-w-\[64rem\] {
    max-width: 64rem;
  }

  .max-w-\[72rem\] {
    max-width: 72rem;
  }

  .max-w-\[92rem\] {
    max-width: 92rem;
  }

  .max-w-\[calc\(100vw-1\.5rem\)\] {
    max-width: calc(100vw - 1.5rem);
  }

  .max-w-\[calc\(100vw-1rem\)\] {
    max-width: calc(100vw - 1rem);
  }

  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }

  .max-w-\[min\(22rem\,82vw\)\] {
    max-width: min(22rem, 82vw);
  }

  .max-w-\[var\(--layout-user-shell-max\)\] {
    max-width: var(--layout-user-shell-max);
  }

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

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .min-w-\[1rem\] {
    min-width: 1rem;
  }

  .min-w-\[2\.2rem\] {
    min-width: 2.2rem;
  }

  .min-w-\[2\.25rem\] {
    min-width: 2.25rem;
  }

  .min-w-\[6\.5rem\] {
    min-width: 6.5rem;
  }

  .min-w-\[7\.25rem\] {
    min-width: 7.25rem;
  }

  .min-w-\[12\.5rem\] {
    min-width: 12.5rem;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[34rem\] {
    min-width: 34rem;
  }

  .min-w-\[40rem\] {
    min-width: 40rem;
  }

  .min-w-\[44rem\] {
    min-width: 44rem;
  }

  .min-w-\[46rem\] {
    min-width: 46rem;
  }

  .min-w-\[48rem\] {
    min-width: 48rem;
  }

  .min-w-\[56rem\] {
    min-width: 56rem;
  }

  .min-w-\[58rem\] {
    min-width: 58rem;
  }

  .min-w-\[60rem\] {
    min-width: 60rem;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

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

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

  .basis-full {
    flex-basis: 100%;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-separate {
    border-collapse: separate;
  }

  .border-spacing-0 {
    --tw-border-spacing-x: calc(var(--spacing) * 0);
    --tw-border-spacing-y: calc(var(--spacing) * 0);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }

  .\[transform-origin\:bottom\] {
    transform-origin: bottom;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-\[62\%\] {
    --tw-translate-y: calc(62% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-px {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-\[0\.82\] {
    scale: .82;
  }

  .scale-\[0\.975\] {
    scale: .975;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .\[transform\:rotateX\(var\(--playlist-tilt-rotate-x\,0deg\)\)_rotateY\(var\(--playlist-tilt-rotate-y\,0deg\)\)_scale\(var\(--playlist-tilt-scale\,1\)\)\] {
    transform: rotateX(var(--playlist-tilt-rotate-x, 0deg)) rotateY(var(--playlist-tilt-rotate-y, 0deg)) scale(var(--playlist-tilt-scale, 1));
  }

  .\[transform\:rotateY\(180deg\)\] {
    transform: rotateY(180deg);
  }

  .\[transform\:translate3d\(0\,0\,4px\)\] {
    transform: translate3d(0, 0, 4px);
  }

  .\[transform\:translate3d\(0\,0\,8px\)\] {
    transform: translate3d(0, 0, 8px);
  }

  .\[transform\:translate3d\(0\,0\,16px\)\] {
    transform: translate3d(0, 0, 16px);
  }

  .\[transform\:translate3d\(0\,0\,24px\)\] {
    transform: translate3d(0, 0, 24px);
  }

  .\[transform\:translate3d\(0\.2rem\,0\.22rem\,-12px\)\] {
    transform: translate3d(.2rem, .22rem, -12px);
  }

  .\[transform\:translate3d\(0\.42rem\,0\.46rem\,-24px\)\] {
    transform: translate3d(.42rem, .46rem, -24px);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-help {
    cursor: help;
  }

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

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-pan-x {
    --tw-pan-x: pan-x;
    touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
  }

  .touch-manipulation {
    touch-action: manipulation;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .\[scroll-padding-bottom\:0\.85rem\] {
    scroll-padding-bottom: .85rem;
  }

  .list-disc {
    list-style-type: disc;
  }

  .appearance-none {
    appearance: none;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

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

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

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

  .grid-cols-\[auto_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .grid-rows-\[auto_minmax\(0\,1fr\)\] {
    grid-template-rows: auto minmax(0, 1fr);
  }

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

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

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

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

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

  .content-start {
    align-content: flex-start;
  }

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

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

  .items-end {
    align-items: flex-end;
  }

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

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

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

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

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

  .justify-start {
    justify-content: flex-start;
  }

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

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-\[0\.1rem\] {
    gap: .1rem;
  }

  .gap-\[0\.3rem\] {
    gap: .3rem;
  }

  .gap-\[0\.4rem\] {
    gap: .4rem;
  }

  .gap-\[0\.6rem\] {
    gap: .6rem;
  }

  .gap-\[0\.7rem\] {
    gap: .7rem;
  }

  .gap-\[0\.35rem\] {
    gap: .35rem;
  }

  .gap-\[0\.38rem\] {
    gap: .38rem;
  }

  .gap-\[0\.45rem\] {
    gap: .45rem;
  }

  .gap-\[0\.55rem\] {
    gap: .55rem;
  }

  .gap-\[0\.65rem\] {
    gap: .65rem;
  }

  .gap-\[0\.75rem\] {
    gap: .75rem;
  }

  .gap-\[0\.85rem\] {
    gap: .85rem;
  }

  .gap-\[0\.95rem\] {
    gap: .95rem;
  }

  .gap-\[0\.625rem\] {
    gap: .625rem;
  }

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

  .gap-\[clamp\(0\.9rem\,1\.9vh\,1\.1rem\)\] {
    gap: clamp(.9rem, 1.9vh, 1.1rem);
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_76\%\,transparent\)\] > :not(:last-child)) {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_76\%\,transparent\)\] > :not(:last-child)) {
      border-color: color-mix(in srgb,var(--surface-border) 76%,transparent);
    }
  }

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

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

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

  .\!overflow-visible {
    overflow: visible !important;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

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

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

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

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-visible {
    overflow-y: visible;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

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

  .rounded-\[0\.9rem\] {
    border-radius: .9rem;
  }

  .rounded-\[0\.35rem\] {
    border-radius: .35rem;
  }

  .rounded-\[0\.85rem\] {
    border-radius: .85rem;
  }

  .rounded-\[0\.95rem\] {
    border-radius: .95rem;
  }

  .rounded-\[0\.625rem\] {
    border-radius: .625rem;
  }

  .rounded-\[0\.875rem\] {
    border-radius: .875rem;
  }

  .rounded-\[1\.2rem\] {
    border-radius: 1.2rem;
  }

  .rounded-\[1\.05rem\] {
    border-radius: 1.05rem;
  }

  .rounded-\[1\.7rem\] {
    border-radius: 1.7rem;
  }

  .rounded-\[1\.15rem\] {
    border-radius: 1.15rem;
  }

  .rounded-\[1\.25rem\] {
    border-radius: 1.25rem;
  }

  .rounded-\[1\.35rem\] {
    border-radius: 1.35rem;
  }

  .rounded-\[1\.55rem\] {
    border-radius: 1.55rem;
  }

  .rounded-\[1rem\] {
    border-radius: 1rem;
  }

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

  .rounded-\[calc\(var\(--radius-md\)-2px\)\] {
    border-radius: calc(var(--radius-md) - 2px);
  }

  .rounded-\[calc\(var\(--session-section-radius-md\,1rem\)-0\.1rem\)\] {
    border-radius: calc(var(--session-section-radius-md, 1rem) - .1rem);
  }

  .rounded-\[calc\(var\(--session-section-radius-sm\,0\.8rem\)-0\.05rem\)\] {
    border-radius: calc(var(--session-section-radius-sm, .8rem) - .05rem);
  }

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

  .rounded-\[var\(--radius-2xl\)\] {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }

  .rounded-\[var\(--radius-md\)\] {
    border-radius: var(--radius-md);
  }

  .rounded-\[var\(--radius-pill\)\] {
    border-radius: var(--radius-pill);
  }

  .rounded-\[var\(--radius-sm\)\] {
    border-radius: var(--radius-sm);
  }

  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }

  .rounded-\[var\(--radius-xs\)\] {
    border-radius: var(--radius-xs);
  }

  .rounded-\[var\(--session-section-radius-md\,1rem\)\] {
    border-radius: var(--session-section-radius-md, 1rem);
  }

  .rounded-\[var\(--session-section-radius-xl\)\] {
    border-radius: var(--session-section-radius-xl);
  }

  .rounded-\[var\(--session-section-radius-xl\,1\.15rem\)\] {
    border-radius: var(--session-section-radius-xl, 1.15rem);
  }

  .rounded-\[var\(--session-section-radius-xl\,1\.25rem\)\] {
    border-radius: var(--session-section-radius-xl, 1.25rem);
  }

  .rounded-\[var\(--session-section-radius-xl\,1\.35rem\)\] {
    border-radius: var(--session-section-radius-xl, 1.35rem);
  }

  .rounded-\[var\(--session-section-radius-xl\,1\.45rem\)\] {
    border-radius: var(--session-section-radius-xl, 1.45rem);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-r-\[0\.9rem\] {
    border-top-right-radius: .9rem;
    border-bottom-right-radius: .9rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\!border-y-0 {
    border-block-style: var(--tw-border-style) !important;
    border-block-width: 0 !important;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\!border-l-0 {
    border-left-style: var(--tw-border-style) !important;
    border-left-width: 0 !important;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }

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

  .\[border-color\:color-mix\(in_oklch\,var\(--color-border\)_45\%\,transparent\)\] {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[border-color\:color-mix\(in_oklch\,var\(--color-border\)_45\%\,transparent\)\] {
      border-color: color-mix(in oklch,var(--color-border) 45%,transparent);
    }
  }

  .\[border-color\:var\(--playlist-row-border\)\] {
    border-color: var(--playlist-row-border);
  }

  .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_60\%\,transparent\)\] {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_60\%\,transparent\)\] {
      border-color: color-mix(in oklch,var(--color-border) 60%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_72\%\,transparent\)\] {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_72\%\,transparent\)\] {
      border-color: color-mix(in oklch,var(--color-border) 72%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_82\%\,transparent\)\] {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_oklch\,var\(--color-border\)_82\%\,transparent\)\] {
      border-color: color-mix(in oklch,var(--color-border) 82%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_30\%\,transparent\)\] {
    border-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_30\%\,transparent\)\] {
      border-color: color-mix(in oklch,var(--color-primary) 30%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--color-border\)_56\%\,transparent\)\] {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--color-border\)_56\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--color-border) 56%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--color-success-border\)_82\%\,transparent\)\] {
    border-color: var(--color-success-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--color-success-border\)_82\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--color-success-border) 82%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--color-warning-border\)_82\%\,transparent\)\] {
    border-color: var(--color-warning-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--color-warning-border\)_82\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--color-warning-border) 82%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--session-accent-border\)_82\%\,transparent\)\] {
    border-color: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--session-accent-border\)_82\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--session-accent-border) 82%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_60\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_60\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 60%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_72\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_72\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 72%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_76\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_76\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 76%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_78\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_78\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 78%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_80\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_80\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 80%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_82\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_82\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 82%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_86\%\,transparent\)\] {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_86\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--surface-border) 86%,transparent);
    }
  }

  .border-\[color\:var\(--button-secondary-border\)\] {
    border-color: var(--button-secondary-border);
  }

  .border-\[color\:var\(--button-tertiary-border\)\] {
    border-color: var(--button-tertiary-border);
  }

  .border-\[color\:var\(--color-border\)\] {
    border-color: var(--color-border);
  }

  .border-\[color\:var\(--color-error-border\)\] {
    border-color: var(--color-error-border);
  }

  .border-\[color\:var\(--color-info-border\)\] {
    border-color: var(--color-info-border);
  }

  .border-\[color\:var\(--color-input\)\] {
    border-color: var(--color-input);
  }

  .border-\[color\:var\(--color-success-border\)\] {
    border-color: var(--color-success-border);
  }

  .border-\[color\:var\(--color-warning-border\)\] {
    border-color: var(--color-warning-border);
  }

  .border-\[color\:var\(--session-accent-border\)\] {
    border-color: var(--session-accent-border);
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-t-\[color\:var\(--color-border\)\] {
    border-top-color: var(--color-border);
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_35\%\,white_65\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_35\%\,white_65\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 35%,white 65%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_70\%\,white_30\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_70\%\,white_30\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 70%,white 30%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_82\%\,white_18\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_82\%\,white_18\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 82%,white 18%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_88\%\,white_12\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_88\%\,white_12\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 88%,white 12%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_92\%\,white_8\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_92\%\,white_8\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 92%,white 8%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_95\%\,transparent\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_95\%\,transparent\)\] {
      background-color: color-mix(in oklch,var(--color-background) 95%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_96\%\,white_4\%\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-background\)_96\%\,white_4\%\)\] {
      background-color: color-mix(in oklch,var(--color-background) 96%,white 4%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-card\)_80\%\,white_20\%\)\] {
    background-color: var(--color-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-card\)_80\%\,white_20\%\)\] {
      background-color: color-mix(in oklch,var(--color-card) 80%,white 20%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_45\%\,transparent\)\] {
    background-color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_45\%\,transparent\)\] {
      background-color: color-mix(in oklch,var(--color-foreground) 45%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_15\%\,white_85\%\)\] {
    background-color: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_15\%\,white_85\%\)\] {
      background-color: color-mix(in oklch,var(--color-muted) 15%,white 85%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_18\%\,white_82\%\)\] {
    background-color: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_18\%\,white_82\%\)\] {
      background-color: color-mix(in oklch,var(--color-muted) 18%,white 82%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_70\%\,white_30\%\)\] {
    background-color: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_70\%\,white_30\%\)\] {
      background-color: color-mix(in oklch,var(--color-muted) 70%,white 30%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_10\%\,white_90\%\)\] {
    background-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_10\%\,white_90\%\)\] {
      background-color: color-mix(in oklch,var(--color-primary) 10%,white 90%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_12\%\,white_88\%\)\] {
    background-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_12\%\,white_88\%\)\] {
      background-color: color-mix(in oklch,var(--color-primary) 12%,white 88%);
    }
  }

  .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_15\%\,white_85\%\)\] {
    background-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_15\%\,white_85\%\)\] {
      background-color: color-mix(in oklch,var(--color-primary) 15%,white 85%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--color-background\)_88\%\,transparent\)\] {
    background-color: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--color-background\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--color-background) 88%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--color-success-soft\)_74\%\,var\(--surface-card\)_26\%\)\] {
    background-color: var(--color-success-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--color-success-soft\)_74\%\,var\(--surface-card\)_26\%\)\] {
      background-color: color-mix(in srgb,var(--color-success-soft) 74%,var(--surface-card) 26%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--color-warning-soft\)_76\%\,var\(--surface-card\)_24\%\)\] {
    background-color: var(--color-warning-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--color-warning-soft\)_76\%\,var\(--surface-card\)_24\%\)\] {
      background-color: color-mix(in srgb,var(--color-warning-soft) 76%,var(--surface-card) 24%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_20\%\,var\(--surface-card\)_80\%\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_20\%\,var\(--surface-card\)_80\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 20%,var(--surface-card) 80%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_22\%\,var\(--surface-card\)_78\%\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_22\%\,var\(--surface-card\)_78\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 22%,var(--surface-card) 78%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_28\%\,transparent\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_28\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 28%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_52\%\,transparent\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_52\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 52%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_86\%\,var\(--surface-card\)_14\%\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_86\%\,var\(--surface-card\)_14\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 86%,var(--surface-card) 14%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_88\%\,var\(--surface-card\)_12\%\)\] {
    background-color: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_88\%\,var\(--surface-card\)_12\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft) 88%,var(--surface-card) 12%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_80\%\,var\(--surface-card\)_20\%\)\] {
    background-color: var(--session-accent-soft-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_80\%\,var\(--surface-card\)_20\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft-strong) 80%,var(--surface-card) 20%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_82\%\,var\(--surface-card\)_18\%\)\] {
    background-color: var(--session-accent-soft-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_82\%\,var\(--surface-card\)_18\%\)\] {
      background-color: color-mix(in srgb,var(--session-accent-soft-strong) 82%,var(--surface-card) 18%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_34\%\,transparent\)\] {
    background-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_34\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-border) 34%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_54\%\,transparent\)\] {
    background-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_54\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-border) 54%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_72\%\,transparent\)\] {
    background-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_72\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-border) 72%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_82\%\,transparent\)\] {
    background-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_82\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-border) 82%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_78\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_78\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 78%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_80\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_80\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 80%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_82\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_82\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 82%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_84\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_84\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 84%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_86\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_86\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 86%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 88%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,var\(--surface-panel\)_12\%\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,var\(--surface-panel\)_12\%\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 88%,var(--surface-panel) 12%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_90\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_90\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 90%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,black_8\%\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,black_8\%\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 92%,black 8%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 92%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 94%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,white_6\%\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,white_6\%\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 94%,white 6%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_96\%\,transparent\)\] {
    background-color: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_96\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--surface-card) 96%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_90\%\,black_10\%\)\] {
    background-color: var(--surface-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_90\%\,black_10\%\)\] {
      background-color: color-mix(in srgb,var(--surface-panel) 90%,black 10%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_92\%\,black_8\%\)\] {
    background-color: var(--surface-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_92\%\,black_8\%\)\] {
      background-color: color-mix(in srgb,var(--surface-panel) 92%,black 8%);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_92\%\,var\(--surface-card\)_8\%\)\] {
    background-color: var(--surface-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--surface-panel\)_92\%\,var\(--surface-card\)_8\%\)\] {
      background-color: color-mix(in srgb,var(--surface-panel) 92%,var(--surface-card) 8%);
    }
  }

  .bg-\[color\:var\(--color-background\)\] {
    background-color: var(--color-background);
  }

  .bg-\[color\:var\(--color-border\)\] {
    background-color: var(--color-border);
  }

  .bg-\[color\:var\(--color-destructive\)\] {
    background-color: var(--color-destructive);
  }

  .bg-\[color\:var\(--color-error\)\] {
    background-color: var(--color-error);
  }

  .bg-\[color\:var\(--color-error-soft\)\] {
    background-color: var(--color-error-soft);
  }

  .bg-\[color\:var\(--color-error-solid\)\] {
    background-color: var(--color-error-solid);
  }

  .bg-\[color\:var\(--color-foreground\)\] {
    background-color: var(--color-foreground);
  }

  .bg-\[color\:var\(--color-info-soft\)\] {
    background-color: var(--color-info-soft);
  }

  .bg-\[color\:var\(--color-muted\)\] {
    background-color: var(--color-muted);
  }

  .bg-\[color\:var\(--color-muted\)\]\/50 {
    background-color: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:var\(--color-muted\)\]\/50 {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }
  }

  .bg-\[color\:var\(--color-popover\)\] {
    background-color: var(--color-popover);
  }

  .bg-\[color\:var\(--color-primary\)\] {
    background-color: var(--color-primary);
  }

  .bg-\[color\:var\(--color-success\)\] {
    background-color: var(--color-success);
  }

  .bg-\[color\:var\(--color-success-soft\)\] {
    background-color: var(--color-success-soft);
  }

  .bg-\[color\:var\(--color-success-solid\)\] {
    background-color: var(--color-success-solid);
  }

  .bg-\[color\:var\(--color-warning-soft\)\] {
    background-color: var(--color-warning-soft);
  }

  .bg-\[color\:var\(--color-warning-solid\)\] {
    background-color: var(--color-warning-solid);
  }

  .bg-\[color\:var\(--playlist-row-waveform-idle\)\] {
    background-color: var(--playlist-row-waveform-idle);
  }

  .bg-\[color\:var\(--session-accent\)\] {
    background-color: var(--session-accent);
  }

  .bg-\[color\:var\(--session-accent-border\)\] {
    background-color: var(--session-accent-border);
  }

  .bg-\[color\:var\(--session-accent-soft\)\] {
    background-color: var(--session-accent-soft);
  }

  .bg-\[color\:var\(--session-accent-soft-strong\)\] {
    background-color: var(--session-accent-soft-strong);
  }

  .bg-\[color\:var\(--surface-card\)\] {
    background-color: var(--surface-card);
  }

  .bg-black\/24 {
    background-color: #0000003d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/24 {
      background-color: color-mix(in oklab, var(--color-black) 24%, transparent);
    }
  }

  .bg-black\/58 {
    background-color: #00000094;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/58 {
      background-color: color-mix(in oklab, var(--color-black) 58%, transparent);
    }
  }

  .bg-black\/90 {
    background-color: #000000e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/90 {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }

  .bg-black\/\[0\.04\] {
    background-color: #0000000a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
    }
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-slate-950\/50 {
    background-color: #02061880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-950\/50 {
      background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white\/85 {
    background-color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/85 {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .bg-\[linear-gradient\(135deg\,\#cbd5e1\,\#94a3b8\)\] {
    background-image: linear-gradient(135deg, #cbd5e1, #94a3b8);
  }

  .bg-\[linear-gradient\(135deg\,\#d8c8f2\,\#9070c7\)\] {
    background-image: linear-gradient(135deg, #d8c8f2, #9070c7);
  }

  .bg-\[linear-gradient\(135deg\,\#e2e8f0\,\#cbd5e1\)\] {
    background-image: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  }

  .bg-\[linear-gradient\(180deg\,rgba\(15\,23\,42\,0\.4\)\,rgba\(15\,23\,42\,0\.16\)\)\] {
    background-image: linear-gradient(#0f172a66, #0f172a29);
  }

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

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-\[1rem_1rem_0\.95rem\] {
    padding: 1rem 1rem .95rem;
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-\[0\.2rem\] {
    padding-inline: .2rem;
  }

  .px-\[0\.5rem\] {
    padding-inline: .5rem;
  }

  .px-\[0\.7rem\] {
    padding-inline: .7rem;
  }

  .px-\[0\.8rem\] {
    padding-inline: .8rem;
  }

  .px-\[0\.9rem\] {
    padding-inline: .9rem;
  }

  .px-\[0\.15rem\] {
    padding-inline: .15rem;
  }

  .px-\[0\.35rem\] {
    padding-inline: .35rem;
  }

  .px-\[0\.45rem\] {
    padding-inline: .45rem;
  }

  .px-\[0\.55rem\] {
    padding-inline: .55rem;
  }

  .px-\[0\.65rem\] {
    padding-inline: .65rem;
  }

  .px-\[0\.72rem\] {
    padding-inline: .72rem;
  }

  .px-\[0\.85rem\] {
    padding-inline: .85rem;
  }

  .px-\[0\.95rem\] {
    padding-inline: .95rem;
  }

  .px-\[clamp\(0\.9rem\,1\.8vw\,1rem\)\] {
    padding-inline: clamp(.9rem, 1.8vw, 1rem);
  }

  .px-\[clamp\(0\.65rem\,1\.8vw\,1\.5rem\)\] {
    padding-inline: clamp(.65rem, 1.8vw, 1.5rem);
  }

  .px-\[clamp\(0\.75rem\,2vw\,1\.25rem\)\] {
    padding-inline: clamp(.75rem, 2vw, 1.25rem);
  }

  .px-\[clamp\(0\.95rem\,2\.6vw\,1\.35rem\)\] {
    padding-inline: clamp(.95rem, 2.6vw, 1.35rem);
  }

  .px-\[clamp\(1rem\,1\.8vw\,1\.75rem\)\] {
    padding-inline: clamp(1rem, 1.8vw, 1.75rem);
  }

  .px-\[clamp\(1rem\,2\.2vh\,1\.2rem\)\] {
    padding-inline: clamp(1rem, 2.2vh, 1.2rem);
  }

  .px-\[var\(--admin-shell-padding\)\] {
    padding-inline: var(--admin-shell-padding);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-\[0\.1rem\] {
    padding-block: .1rem;
  }

  .py-\[0\.2rem\] {
    padding-block: .2rem;
  }

  .py-\[0\.4rem\] {
    padding-block: .4rem;
  }

  .py-\[0\.7rem\] {
    padding-block: .7rem;
  }

  .py-\[0\.8rem\] {
    padding-block: .8rem;
  }

  .py-\[0\.22rem\] {
    padding-block: .22rem;
  }

  .py-\[0\.35rem\] {
    padding-block: .35rem;
  }

  .py-\[0\.45rem\] {
    padding-block: .45rem;
  }

  .py-\[0\.65rem\] {
    padding-block: .65rem;
  }

  .py-\[0\.75rem\] {
    padding-block: .75rem;
  }

  .py-\[0\.78rem\] {
    padding-block: .78rem;
  }

  .py-\[calc\(var\(--page-pad-top\)\+env\(safe-area-inset-top\)\)\] {
    padding-block: calc(var(--page-pad-top) + env(safe-area-inset-top));
  }

  .py-\[clamp\(0\.75rem\,1\.7vh\,1rem\)\] {
    padding-block: clamp(.75rem, 1.7vh, 1rem);
  }

  .py-\[clamp\(0\.95rem\,2\.2vh\,1\.1rem\)\] {
    padding-block: clamp(.95rem, 2.2vh, 1.1rem);
  }

  .py-\[clamp\(1rem\,1\.8vw\,1\.75rem\)\] {
    padding-block: clamp(1rem, 1.8vw, 1.75rem);
  }

  .py-\[clamp\(1rem\,2\.8vh\,1\.35rem\)\] {
    padding-block: clamp(1rem, 2.8vh, 1.35rem);
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-\[0\.5rem\] {
    padding-top: .5rem;
  }

  .pt-\[0\.15rem\] {
    padding-top: .15rem;
  }

  .pt-\[0\.95rem\] {
    padding-top: .95rem;
  }

  .pt-\[1\.2rem\] {
    padding-top: 1.2rem;
  }

  .pt-\[calc\(clamp\(0\.8rem\,2\.6vh\,1\.45rem\)\+env\(safe-area-inset-top\)\)\] {
    padding-top: calc(clamp(.8rem, 2.6vh, 1.45rem) + env(safe-area-inset-top));
  }

  .pt-\[calc\(clamp\(0\.9rem\,2\.6vh\,1\.45rem\)\+env\(safe-area-inset-top\)\)\] {
    padding-top: calc(clamp(.9rem, 2.6vh, 1.45rem) + env(safe-area-inset-top));
  }

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

  .pt-\[env\(safe-area-inset-top\)\] {
    padding-top: env(safe-area-inset-top);
  }

  .pt-\[max\(1\.2rem\,calc\(env\(safe-area-inset-top\)\+0\.85rem\)\)\] {
    padding-top: max(1.2rem, calc(env(safe-area-inset-top) + .85rem));
  }

  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-\[0\.8rem\] {
    padding-right: .8rem;
  }

  .pr-\[max\(0\.5rem\,env\(safe-area-inset-right\)\)\] {
    padding-right: max(.5rem, env(safe-area-inset-right));
  }

  .\[padding-bottom\:calc\(40px\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-\[0\.55rem\] {
    padding-bottom: .55rem;
  }

  .pb-\[0\.85rem\] {
    padding-bottom: .85rem;
  }

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

  .pb-\[calc\(clamp\(0\.8rem\,2vh\,1\.3rem\)\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(clamp(.8rem, 2vh, 1.3rem) + env(safe-area-inset-bottom));
  }

  .pb-\[calc\(clamp\(0\.65rem\,2vh\,1\.2rem\)\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(clamp(.65rem, 2vh, 1.2rem) + env(safe-area-inset-bottom));
  }

  .pb-\[max\(0\.55rem\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(.55rem, env(safe-area-inset-bottom));
  }

  .pb-\[max\(1rem\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .pb-\[var\(--admin-shell-padding\)\] {
    padding-bottom: var(--admin-shell-padding);
  }

  .pb-\[var\(--session-transport-clearance\)\] {
    padding-bottom: var(--session-transport-clearance);
  }

  .pb-\[var\(--session-transport-clearance\,7rem\)\] {
    padding-bottom: var(--session-transport-clearance, 7rem);
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-\[0\.4rem\] {
    padding-left: .4rem;
  }

  .pl-\[0\.9rem\] {
    padding-left: .9rem;
  }

  .pl-\[max\(0\.5rem\,env\(safe-area-inset-left\)\)\] {
    padding-left: max(.5rem, env(safe-area-inset-left));
  }

  .\!text-center {
    text-align: center !important;
  }

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

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

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

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.9rem\] {
    font-size: .9rem;
  }

  .text-\[0\.58rem\] {
    font-size: .58rem;
  }

  .text-\[0\.62rem\] {
    font-size: .62rem;
  }

  .text-\[0\.64rem\] {
    font-size: .64rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[0\.66rem\] {
    font-size: .66rem;
  }

  .text-\[0\.67rem\] {
    font-size: .67rem;
  }

  .text-\[0\.68rem\] {
    font-size: .68rem;
  }

  .text-\[0\.72rem\] {
    font-size: .72rem;
  }

  .text-\[0\.74rem\] {
    font-size: .74rem;
  }

  .text-\[0\.75rem\] {
    font-size: .75rem;
  }

  .text-\[0\.76rem\] {
    font-size: .76rem;
  }

  .text-\[0\.78rem\] {
    font-size: .78rem;
  }

  .text-\[0\.82rem\] {
    font-size: .82rem;
  }

  .text-\[0\.84rem\] {
    font-size: .84rem;
  }

  .text-\[0\.85rem\] {
    font-size: .85rem;
  }

  .text-\[0\.86rem\] {
    font-size: .86rem;
  }

  .text-\[0\.88rem\] {
    font-size: .88rem;
  }

  .text-\[0\.92rem\] {
    font-size: .92rem;
  }

  .text-\[0\.95rem\] {
    font-size: .95rem;
  }

  .text-\[0\.98rem\] {
    font-size: .98rem;
  }

  .text-\[0\.625rem\] {
    font-size: .625rem;
  }

  .text-\[0\.875rem\] {
    font-size: .875rem;
  }

  .text-\[0\.5625rem\] {
    font-size: .5625rem;
  }

  .text-\[0\.6875rem\] {
    font-size: .6875rem;
  }

  .text-\[0\.8125rem\] {
    font-size: .8125rem;
  }

  .text-\[1\.02rem\] {
    font-size: 1.02rem;
  }

  .text-\[1\.2rem\] {
    font-size: 1.2rem;
  }

  .text-\[1\.5rem\] {
    font-size: 1.5rem;
  }

  .text-\[1\.15rem\] {
    font-size: 1.15rem;
  }

  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }

  .text-\[1\.125rem\] {
    font-size: 1.125rem;
  }

  .text-\[1rem\] {
    font-size: 1rem;
  }

  .text-\[clamp\(0\.92rem\,0\.89rem\+0\.18vw\,1\.08rem\)\] {
    font-size: clamp(.92rem, .89rem + .18vw, 1.08rem);
  }

  .text-\[clamp\(1\.1rem\,3\.5vw\,1\.45rem\)\] {
    font-size: clamp(1.1rem, 3.5vw, 1.45rem);
  }

  .text-\[clamp\(1\.9rem\,1\.45rem\+1\.9vw\,3\.65rem\)\] {
    font-size: clamp(1.9rem, 1.45rem + 1.9vw, 3.65rem);
  }

  .text-\[clamp\(1\.15rem\,0\.95rem\+0\.7vw\,1\.85rem\)\] {
    font-size: clamp(1.15rem, .95rem + .7vw, 1.85rem);
  }

  .text-\[clamp\(1\.35rem\,0\.9rem\+1vw\,2rem\)\] {
    font-size: clamp(1.35rem, .9rem + 1vw, 2rem);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-\[1\.2\] {
    --tw-leading: 1.2;
    line-height: 1.2;
  }

  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[1\.05\] {
    --tw-leading: 1.05;
    line-height: 1.05;
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }

  .leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }

  .leading-\[1\.25\] {
    --tw-leading: 1.25;
    line-height: 1.25;
  }

  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }

  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-\[650\] {
    --tw-font-weight: 650;
    font-weight: 650;
  }

  .font-\[720\] {
    --tw-font-weight: 720;
    font-weight: 720;
  }

  .font-\[family\:var\(--font-brand-display\)\,var\(--font-app-sans\)\,ui-sans-serif\,sans-serif\] {
    --tw-font-weight: var(--font-brand-display),var(--font-app-sans),ui-sans-serif,sans-serif;
    font-weight: var(--font-brand-display),var(--font-app-sans),ui-sans-serif,sans-serif;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.02em\] {
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
  }

  .tracking-\[-0\.03em\] {
    --tw-tracking: -.03em;
    letter-spacing: -.03em;
  }

  .tracking-\[0\.01em\] {
    --tw-tracking: .01em;
    letter-spacing: .01em;
  }

  .tracking-\[0\.02em\] {
    --tw-tracking: .02em;
    letter-spacing: .02em;
  }

  .tracking-\[0\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.15em\] {
    --tw-tracking: .15em;
    letter-spacing: .15em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.24em\] {
    --tw-tracking: .24em;
    letter-spacing: .24em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .text-balance {
    text-wrap: balance;
  }

  .\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }

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

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

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

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

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-destructive\)_74\%\,black_26\%\)\] {
    color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-destructive\)_74\%\,black_26\%\)\] {
      color: color-mix(in oklch,var(--color-destructive) 74%,black 26%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-destructive\)_76\%\,black_24\%\)\] {
    color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-destructive\)_76\%\,black_24\%\)\] {
      color: color-mix(in oklch,var(--color-destructive) 76%,black 24%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_64\%\,transparent\)\] {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_64\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-foreground) 64%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_70\%\,transparent\)\] {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_70\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-foreground) 70%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_72\%\,transparent\)\] {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_72\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-foreground) 72%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_84\%\,transparent\)\] {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-foreground\)_84\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-foreground) 84%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_70\%\,transparent\)\] {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_70\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-muted-foreground) 70%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_82\%\,transparent\)\] {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_82\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-muted-foreground) 82%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_92\%\,transparent\)\] {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-muted-foreground\)_92\%\,transparent\)\] {
      color: color-mix(in oklch,var(--color-muted-foreground) 92%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_72\%\,black_28\%\)\] {
    color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_72\%\,black_28\%\)\] {
      color: color-mix(in oklch,var(--color-primary) 72%,black 28%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_78\%\,black_22\%\)\] {
    color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_78\%\,black_22\%\)\] {
      color: color-mix(in oklch,var(--color-primary) 78%,black 22%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--page-bg-to\)_54\%\,var\(--page-bg-from\)_46\%\)\] {
    color: var(--page-bg-to);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--page-bg-to\)_54\%\,var\(--page-bg-from\)_46\%\)\] {
      color: color-mix(in oklch,var(--page-bg-to) 54%,var(--page-bg-from) 46%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--page-bg-to\)_60\%\,var\(--page-bg-from\)_40\%\)\] {
    color: var(--page-bg-to);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--page-bg-to\)_60\%\,var\(--page-bg-from\)_40\%\)\] {
      color: color-mix(in oklch,var(--page-bg-to) 60%,var(--page-bg-from) 40%);
    }
  }

  .text-\[color\:color-mix\(in_oklch\,var\(--session-accent-ink\)_78\%\,transparent\)\] {
    color: var(--session-accent-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_oklch\,var\(--session-accent-ink\)_78\%\,transparent\)\] {
      color: color-mix(in oklch,var(--session-accent-ink) 78%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_76\%\,black_24\%\)\] {
    color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_76\%\,black_24\%\)\] {
      color: color-mix(in srgb,var(--color-primary) 76%,black 24%);
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_82\%\,black_18\%\)\] {
    color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_82\%\,black_18\%\)\] {
      color: color-mix(in srgb,var(--color-primary) 82%,black 18%);
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--session-accent-ink\)_70\%\,var\(--color-foreground\)_30\%\)\] {
    color: var(--session-accent-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--session-accent-ink\)_70\%\,var\(--color-foreground\)_30\%\)\] {
      color: color-mix(in srgb,var(--session-accent-ink) 70%,var(--color-foreground) 30%);
    }
  }

  .text-\[color\:var\(--button-tertiary-text\)\] {
    color: var(--button-tertiary-text);
  }

  .text-\[color\:var\(--color-background\)\] {
    color: var(--color-background);
  }

  .text-\[color\:var\(--color-card-foreground\)\] {
    color: var(--color-card-foreground);
  }

  .text-\[color\:var\(--color-destructive-foreground\)\] {
    color: var(--color-destructive-foreground);
  }

  .text-\[color\:var\(--color-error-foreground\)\] {
    color: var(--color-error-foreground);
  }

  .text-\[color\:var\(--color-foreground\)\] {
    color: var(--color-foreground);
  }

  .text-\[color\:var\(--color-info-foreground\)\] {
    color: var(--color-info-foreground);
  }

  .text-\[color\:var\(--color-muted-foreground\)\] {
    color: var(--color-muted-foreground);
  }

  .text-\[color\:var\(--color-popover-foreground\)\] {
    color: var(--color-popover-foreground);
  }

  .text-\[color\:var\(--color-primary\)\] {
    color: var(--color-primary);
  }

  .text-\[color\:var\(--color-primary-foreground\)\] {
    color: var(--color-primary-foreground);
  }

  .text-\[color\:var\(--color-success-foreground\)\] {
    color: var(--color-success-foreground);
  }

  .text-\[color\:var\(--color-warning-foreground\)\] {
    color: var(--color-warning-foreground);
  }

  .text-\[color\:var\(--playlist-row-action-text\)\] {
    color: var(--playlist-row-action-text);
  }

  .text-\[color\:var\(--playlist-row-action-text-disabled\)\] {
    color: var(--playlist-row-action-text-disabled);
  }

  .text-\[color\:var\(--playlist-row-meta-text\)\] {
    color: var(--playlist-row-meta-text);
  }

  .text-\[color\:var\(--playlist-row-meta-text-soft\)\] {
    color: var(--playlist-row-meta-text-soft);
  }

  .text-\[color\:var\(--playlist-row-meta-text-strong\)\] {
    color: var(--playlist-row-meta-text-strong);
  }

  .text-\[color\:var\(--playlist-row-restricted-meta-text\)\] {
    color: var(--playlist-row-restricted-meta-text);
  }

  .text-\[color\:var\(--playlist-row-restricted-text\)\] {
    color: var(--playlist-row-restricted-text);
  }

  .text-\[color\:var\(--session-accent-ink\)\] {
    color: var(--session-accent-ink);
  }

  .text-\[oklch\(0\.52_0\.11_82\)\] {
    color: #886100;
    color: lab(44.3546% 10.814 53.6137);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-current {
    color: currentColor;
  }

  .text-inherit {
    color: inherit;
  }

  .text-white {
    color: var(--color-white);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

  .\[font-variant-numeric\:tabular-nums\] {
    font-variant-numeric: tabular-nums;
  }

  .no-underline {
    text-decoration-line: none;
  }

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

  .decoration-dotted {
    text-decoration-style: dotted;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .\[accent-color\:var\(--color-primary\)\] {
    accent-color: var(--color-primary);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-35 {
    opacity: .35;
  }

  .opacity-45 {
    opacity: .45;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-95 {
    opacity: .95;
  }

  .opacity-100 {
    opacity: 1;
  }

  .mix-blend-screen {
    mix-blend-mode: screen;
  }

  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.1\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.06\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #0000000f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.12\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #ffffff1f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.18\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #ffffff2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_4px_var\(--session-accent-ring\)\] {
    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--session-accent-ring));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_16px_-10px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\] {
    --tw-shadow: 0 8px 16px -10px var(--tw-shadow-color, var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-\[0_8px_16px_-10px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\] {
      --tw-shadow: 0 8px 16px -10px var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 20%,transparent));
    }
  }

  .shadow-\[0_8px_16px_-10px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\] {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_18px_-14px_color-mix\(in_srgb\,var\(--session-accent-border\)_78\%\,transparent\)\] {
    --tw-shadow: 0 8px 18px -14px var(--tw-shadow-color, var(--session-accent-border));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-\[0_8px_18px_-14px_color-mix\(in_srgb\,var\(--session-accent-border\)_78\%\,transparent\)\] {
      --tw-shadow: 0 8px 18px -14px var(--tw-shadow-color, color-mix(in srgb,var(--session-accent-border) 78%,transparent));
    }
  }

  .shadow-\[0_8px_18px_-14px_color-mix\(in_srgb\,var\(--session-accent-border\)_78\%\,transparent\)\] {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_28px_rgba\(15\,23\,42\,0\.14\)\] {
    --tw-shadow: 0 10px 28px var(--tw-shadow-color, #0f172a24);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_28px_color-mix\(in_srgb\,black_42\%\,transparent\)\] {
    --tw-shadow: 0 12px 28px var(--tw-shadow-color, #0000006b);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_30px_rgba\(15\,23\,42\,0\.14\)\] {
    --tw-shadow: 0 18px 30px var(--tw-shadow-color, #0f172a24);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_32px_rgba\(15\,23\,42\,0\.12\)\] {
    --tw-shadow: 0 18px 32px var(--tw-shadow-color, #0f172a1f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_44px_rgba\(15\,23\,42\,0\.28\)\] {
    --tw-shadow: 0 18px 44px var(--tw-shadow-color, #0f172a47);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_20px_36px_rgba\(15\,23\,42\,0\.16\)\] {
    --tw-shadow: 0 20px 36px var(--tw-shadow-color, #0f172a29);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_40px_rgba\(15\,23\,42\,0\.18\)\] {
    --tw-shadow: 0 24px 40px var(--tw-shadow-color, #0f172a2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_56px_rgba\(15\,23\,42\,0\.28\)\] {
    --tw-shadow: 0 24px 56px var(--tw-shadow-color, #0f172a47);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_1px_var\(--session-accent-border\)\] {
    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--session-accent-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-md\)\] {
    --tw-shadow: var(--shadow-md);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-xs\)\] {
    --tw-shadow: var(--shadow-xs);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[color\:var\(--color-success-border\)\] {
    --tw-ring-color: var(--color-success-border);
  }

  .ring-\[color\:var\(--session-accent-border\)\] {
    --tw-ring-color: var(--session-accent-border);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-\[10px\] {
    --tw-blur: blur(10px);
    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, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[10px\] {
    --tw-backdrop-blur: blur(10px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[14px\] {
    --tw-backdrop-blur: blur(14px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[18px\] {
    --tw-backdrop-blur: blur(18px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background\,border-color\,color\,opacity\,transform\] {
    transition-property: background, border-color, color, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background\,color\,border-color\,box-shadow\,transform\] {
    transition-property: background, color, border-color, box-shadow, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background\,color\,opacity\] {
    transition-property: background, color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,box-shadow\] {
    transition-property: background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,color\,box-shadow\,opacity\,transform\] {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,color\,box-shadow\] {
    transition-property: background-color, border-color, color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,color\,transform\] {
    transition-property: background-color, border-color, color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,color\] {
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\] {
    transition-property: background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,box-shadow\] {
    transition-property: background-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,color\,box-shadow\] {
    transition-property: background-color, color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,color\] {
    transition-property: background-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,background\,box-shadow\] {
    transition-property: border-color, background, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,background-color\,box-shadow\] {
    transition-property: border-color, background-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,background-color\,color\,opacity\] {
    transition-property: border-color, background-color, color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\,background-color\,opacity\] {
    transition-property: border-color, box-shadow, background-color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\,color\] {
    transition-property: border-color, box-shadow, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,color\,opacity\,background\] {
    transition-property: border-color, color, opacity, background;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,opacity\,transform\] {
    transition-property: color, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,border-color\,background-color\] {
    transition-property: opacity, border-color, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,transform\] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,background\,color\,border-color\,box-shadow\,opacity\] {
    transition-property: transform, background, color, border-color, box-shadow, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,background\,color\,border-color\,box-shadow\] {
    transition-property: transform, background, color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,border-color\,background\,color\,box-shadow\] {
    transition-property: transform, border-color, background, color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-\[130ms\] {
    --tw-duration: .13s;
    transition-duration: .13s;
  }

  .duration-\[var\(--motion-duration-base\)\] {
    --tw-duration: var(--motion-duration-base);
    transition-duration: var(--motion-duration-base);
  }

  .duration-\[var\(--motion-duration-fast\)\] {
    --tw-duration: var(--motion-duration-fast);
    transition-duration: var(--motion-duration-fast);
  }

  .ease-\[var\(--motion-ease-standard\)\] {
    --tw-ease: var(--motion-ease-standard);
    transition-timing-function: var(--motion-ease-standard);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .\[will-change\:transform\,opacity\] {
    will-change: transform,opacity;
  }

  .will-change-transform {
    will-change: transform;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[--admin-shell-min-height\:calc\(100dvh-env\(safe-area-inset-top\)\)\] {
    --admin-shell-min-height: calc(100dvh - env(safe-area-inset-top));
  }

  .\[--admin-shell-padding\:var\(--space-3\)\] {
    --admin-shell-padding: var(--space-3);
  }

  .\[--admin-sidebar-height\:calc\(100dvh-var\(--admin-toolbar-height\)\)\] {
    --admin-sidebar-height: calc(100dvh - var(--admin-toolbar-height));
  }

  .\[--admin-toolbar-height\:calc\(env\(safe-area-inset-top\)\+3\.75rem\)\] {
    --admin-toolbar-height: calc(env(safe-area-inset-top) + 3.75rem);
  }

  .\[--transport-progress-elapsed\:var\(--session-accent-gradient-strong\)\] {
    --transport-progress-elapsed: var(--session-accent-gradient-strong);
  }

  .\[--transport-progress-pct\:0\%\] {
    --transport-progress-pct: 0%;
  }

  .\[--transport-progress-remaining\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,black_12\%\)\] {
    --transport-progress-remaining: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--transport-progress-remaining\:color-mix\(in_srgb\,var\(--surface-card\)_88\%\,black_12\%\)\] {
      --transport-progress-remaining: color-mix(in srgb,var(--surface-card) 88%,black 12%);
    }
  }

  .\[--transport-progress-thumb-size\:18px\] {
    --transport-progress-thumb-size: 18px;
  }

  .\[--transport-progress-track-h\:8px\] {
    --transport-progress-track-h: 8px;
  }

  .\[--transport-volume-elapsed\:color-mix\(in_srgb\,var\(--session-accent-ink\)_74\%\,var\(--color-info\)_26\%\)\] {
    --transport-volume-elapsed: var(--session-accent-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--transport-volume-elapsed\:color-mix\(in_srgb\,var\(--session-accent-ink\)_74\%\,var\(--color-info\)_26\%\)\] {
      --transport-volume-elapsed: color-mix(in srgb,var(--session-accent-ink) 74%,var(--color-info) 26%);
    }
  }

  .\[--transport-volume-pct\:0\%\] {
    --transport-volume-pct: 0%;
  }

  .\[--transport-volume-remaining\:color-mix\(in_srgb\,var\(--surface-card\)_74\%\,white_26\%\)\] {
    --transport-volume-remaining: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--transport-volume-remaining\:color-mix\(in_srgb\,var\(--surface-card\)_74\%\,white_26\%\)\] {
      --transport-volume-remaining: color-mix(in srgb,var(--surface-card) 74%,white 26%);
    }
  }

  .\[--transport-volume-thumb-size\:15px\] {
    --transport-volume-thumb-size: 15px;
  }

  .\[--transport-volume-track-h\:8px\] {
    --transport-volume-track-h: 8px;
  }

  .\[-webkit-tap-highlight-color\:transparent\] {
    -webkit-tap-highlight-color: transparent;
  }

  .\[animation-iteration-count\:infinite\] {
    animation-iteration-count: infinite;
  }

  .\[animation-name\:imagsEqPulse\] {
    animation-name: imagsEqPulse;
  }

  .\[animation-timing-function\:ease-in-out\] {
    animation-timing-function: ease-in-out;
  }

  .\[backface-visibility\:hidden\] {
    backface-visibility: hidden;
  }

  .\[background\:color-mix\(in_oklch\,oklch\(0\.88_0\.08_90\)_70\%\,white_30\%\)\] {
    background: #f2e2b9;
    background: lab(90.4959% .740588 22.0743);
  }

  .\[background\:linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--surface-card\)_94\%\,white_6\%\)_0\%\,color-mix\(in_srgb\,var\(--session-accent-soft\)_82\%\,var\(--surface-panel\)_18\%\)_48\%\,color-mix\(in_srgb\,var\(--session-accent-ring\)_56\%\,var\(--surface-card\)_44\%\)_100\%\)\] {
    background: linear-gradient(135deg,var(--surface-card) 0%,var(--session-accent-soft) 48%,var(--session-accent-ring) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[background\:linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--surface-card\)_94\%\,white_6\%\)_0\%\,color-mix\(in_srgb\,var\(--session-accent-soft\)_82\%\,var\(--surface-panel\)_18\%\)_48\%\,color-mix\(in_srgb\,var\(--session-accent-ring\)_56\%\,var\(--surface-card\)_44\%\)_100\%\)\] {
      background: linear-gradient(135deg,color-mix(in srgb,var(--surface-card) 94%,white 6%) 0%,color-mix(in srgb,var(--session-accent-soft) 82%,var(--surface-panel) 18%) 48%,color-mix(in srgb,var(--session-accent-ring) 56%,var(--surface-card) 44%) 100%);
    }
  }

  .\[font\:inherit\] {
    font: inherit;
  }

  .\[perspective\:1600px\] {
    perspective: 1600px;
  }

  .\[scrollbar-gutter\:stable\] {
    scrollbar-gutter: stable;
  }

  .\[transform-style\:preserve-3d\] {
    transform-style: preserve-3d;
  }

  .group-focus-within\/track\:scale-100:is(:where(.group\/track):focus-within *) {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .group-focus-within\/track\:scale-\[0\.82\]:is(:where(.group\/track):focus-within *) {
    scale: .82;
  }

  .group-focus-within\/track\:opacity-0:is(:where(.group\/track):focus-within *) {
    opacity: 0;
  }

  .group-focus-within\/track\:opacity-100:is(:where(.group\/track):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }
  }

  @media (hover: hover) {
    .group-hover\/art\:opacity-100:is(:where(.group\/art):hover *) {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .group-hover\/track\:scale-100:is(:where(.group\/track):hover *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .group-hover\/track\:scale-\[0\.82\]:is(:where(.group\/track):hover *) {
      scale: .82;
    }
  }

  @media (hover: hover) {
    .group-hover\/track\:opacity-0:is(:where(.group\/track):hover *) {
      opacity: 0;
    }
  }

  @media (hover: hover) {
    .group-hover\/track\:opacity-100:is(:where(.group\/track):hover *) {
      opacity: 1;
    }
  }

  .group-focus-visible\:underline:is(:where(.group):focus-visible *) {
    text-decoration-line: underline;
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .selection\:bg-\[color\:var\(--color-primary\)\] ::selection, .selection\:bg-\[color\:var\(--color-primary\)\]::selection {
    background-color: var(--color-primary);
  }

  .selection\:text-\[color\:var\(--color-primary-foreground\)\] ::selection, .selection\:text-\[color\:var\(--color-primary-foreground\)\]::selection {
    color: var(--color-primary-foreground);
  }

  .file\:mr-3::file-selector-button {
    margin-right: calc(var(--spacing) * 3);
  }

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

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

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

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-inherit::file-selector-button {
    color: inherit;
  }

  .placeholder\:text-\[color\:var\(--color-muted-foreground\)\]::placeholder {
    color: var(--color-muted-foreground);
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .focus-within\:bg-\[color\:var\(--playlist-row-hover-bg\)\]:focus-within {
    background-color: var(--playlist-row-hover-bg);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .hover\:-translate-y-px:hover {
      --tw-translate-y: -1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .hover\:scale-\[1\.03\]:hover {
      scale: 1.03;
    }
  }

  @media (hover: hover) {
    .hover\:scale-\[1\.015\]:hover {
      scale: 1.015;
    }
  }

  @media (hover: hover) {
    .hover\:scale-\[1\.045\]:hover {
      scale: 1.045;
    }
  }

  @media (hover: hover) {
    .hover\:border-\[color\:var\(--session-accent-border\)\]:hover {
      border-color: var(--session-accent-border);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_42\%\,transparent\)\]:hover {
      background-color: var(--color-muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_42\%\,transparent\)\]:hover {
        background-color: color-mix(in oklch,var(--color-muted) 42%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_56\%\,transparent\)\]:hover {
      background-color: var(--color-muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_56\%\,transparent\)\]:hover {
        background-color: color-mix(in oklch,var(--color-muted) 56%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_60\%\,white_40\%\)\]:hover {
      background-color: var(--color-muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-muted\)_60\%\,white_40\%\)\]:hover {
        background-color: color-mix(in oklch,var(--color-muted) 60%,white 40%);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_10\%\,white_90\%\)\]:hover {
      background-color: var(--color-primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_oklch\,var\(--color-primary\)_10\%\,white_90\%\)\]:hover {
        background-color: color-mix(in oklch,var(--color-primary) 10%,white 90%);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--color-muted\)_18\%\,transparent\)\]:hover {
      background-color: var(--color-muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--color-muted\)_18\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--color-muted) 18%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_24\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_24\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 24%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_32\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_32\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 32%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_36\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_36\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 36%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_42\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_42\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 42%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_48\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_48\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 48%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_52\%\,var\(--surface-panel\)_48\%\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_52\%\,var\(--surface-panel\)_48\%\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 52%,var(--surface-panel) 48%);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_76\%\,transparent\)\]:hover {
      background-color: var(--session-accent-soft);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft\)_76\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--session-accent-soft) 76%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_76\%\,transparent\)\]:hover {
      background-color: var(--surface-card);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_76\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--surface-card) 76%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,transparent\)\]:hover {
      background-color: var(--surface-card);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_92\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--surface-card) 92%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--button-ghost-hover\)\]:hover {
      background-color: var(--button-ghost-hover);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--color-error-soft\)\]:hover {
      background-color: var(--color-error-soft);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--playlist-row-hover-bg\)\]:hover {
      background-color: var(--playlist-row-hover-bg);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--session-accent-soft\)\]:hover {
      background-color: var(--session-accent-soft);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--session-accent-soft-strong\)\]:hover {
      background-color: var(--session-accent-soft-strong);
    }
  }

  @media (hover: hover) {
    .hover\:bg-black\/\[0\.02\]:hover {
      background-color: #00000005;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/\[0\.02\]:hover {
        background-color: color-mix(in oklab, var(--color-black) 2%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-black\/\[0\.03\]:hover {
      background-color: #00000008;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/\[0\.03\]:hover {
        background-color: color-mix(in oklab, var(--color-black) 3%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-black\/\[0\.04\]:hover {
      background-color: #0000000a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/\[0\.04\]:hover {
        background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-transparent:hover {
      background-color: #0000;
    }
  }

  @media (hover: hover) {
    .hover\:text-\[color\:var\(--color-error-foreground\)\]:hover {
      color: var(--color-error-foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-\[color\:var\(--color-foreground\)\]:hover {
      color: var(--color-foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-\[color\:var\(--color-primary\)\]:hover {
      color: var(--color-primary);
    }
  }

  @media (hover: hover) {
    .hover\:text-\[color\:var\(--color-primary-foreground\)\]:hover {
      color: var(--color-primary-foreground);
    }
  }

  @media (hover: hover) {
    .hover\:opacity-90:hover {
      opacity: .9;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-95:hover {
      opacity: .95;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .hover\:brightness-95:hover {
      --tw-brightness: brightness(95%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  @media (hover: hover) {
    .hover\:brightness-\[1\.02\]:hover {
      --tw-brightness: brightness(1.02);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  .focus-visible\:border-\[color\:var\(--color-ring\)\]:focus-visible {
    border-color: var(--color-ring);
  }

  .focus-visible\:border-transparent:focus-visible {
    border-color: #0000;
  }

  .focus-visible\:bg-\[color\:var\(--button-ghost-hover\)\]:focus-visible {
    background-color: var(--button-ghost-hover);
  }

  .focus-visible\:shadow-none:focus-visible {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

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

  .focus-visible\:ring-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_24\%\,transparent\)\]:focus-visible {
    --tw-ring-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_24\%\,transparent\)\]:focus-visible {
      --tw-ring-color: color-mix(in srgb,var(--color-primary) 24%,transparent);
    }
  }

  .focus-visible\:ring-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_26\%\,transparent\)\]:focus-visible {
    --tw-ring-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_26\%\,transparent\)\]:focus-visible {
      --tw-ring-color: color-mix(in srgb,var(--color-primary) 26%,transparent);
    }
  }

  .focus-visible\:ring-\[color\:var\(--color-destructive\)\]:focus-visible {
    --tw-ring-color: var(--color-destructive);
  }

  .focus-visible\:ring-\[color\:var\(--color-ring\)\]:focus-visible {
    --tw-ring-color: var(--color-ring);
  }

  .focus-visible\:ring-\[color\:var\(--color-warning-border\)\]:focus-visible {
    --tw-ring-color: var(--color-warning-border);
  }

  .focus-visible\:ring-\[color\:var\(--session-accent-ring\)\]:focus-visible {
    --tw-ring-color: var(--session-accent-ring);
  }

  .focus-visible\:ring-sky-100\/80:focus-visible {
    --tw-ring-color: #dff2fecc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-sky-100\/80:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-sky-100) 80%, transparent);
    }
  }

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

  .focus-visible\:ring-offset-\[color\:var\(--color-background\)\]:focus-visible {
    --tw-ring-offset-color: var(--color-background);
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-offset-\[-2px\]:focus-visible {
    outline-offset: -2px;
  }

  .focus-visible\:outline-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_42\%\,transparent\)\]:focus-visible {
    outline-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:outline-\[color\:color-mix\(in_srgb\,var\(--color-primary\)_42\%\,transparent\)\]:focus-visible {
      outline-color: color-mix(in srgb,var(--color-primary) 42%,transparent);
    }
  }

  .focus-visible\:outline-\[color\:var\(--session-accent-border\)\]:focus-visible {
    outline-color: var(--session-accent-border);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .enabled\:cursor-pointer:enabled {
    cursor: pointer;
  }

  @media (hover: hover) {
    .enabled\:hover\:-translate-y-px:enabled:hover {
      --tw-translate-y: -1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .enabled\:hover\:border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_95\%\,transparent\)\]:enabled:hover {
      border-color: var(--surface-border);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .enabled\:hover\:border-\[color\:color-mix\(in_srgb\,var\(--surface-border\)_95\%\,transparent\)\]:enabled:hover {
        border-color: color-mix(in srgb,var(--surface-border) 95%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .enabled\:hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,transparent\)\]:enabled:hover {
      background-color: var(--surface-card);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .enabled\:hover\:bg-\[color\:color-mix\(in_srgb\,var\(--surface-card\)_94\%\,transparent\)\]:enabled:hover {
        background-color: color-mix(in srgb,var(--surface-card) 94%,transparent);
      }
    }
  }

  @media (hover: hover) {
    .enabled\:hover\:opacity-85:enabled:hover {
      opacity: .85;
    }
  }

  @media (hover: hover) {
    .enabled\:hover\:opacity-95:enabled:hover {
      opacity: .95;
    }
  }

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

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

  .disabled\:cursor-wait:disabled {
    cursor: wait;
  }

  .disabled\:opacity-45:disabled {
    opacity: .45;
  }

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

  .disabled\:opacity-55:disabled {
    opacity: .55;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-65:disabled {
    opacity: .65;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  .disabled\:opacity-80:disabled {
    opacity: .8;
  }

  @media (hover: hover) {
    .disabled\:hover\:brightness-100:disabled:hover {
      --tw-brightness: brightness(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, );
    }
  }

  .aria-invalid\:border-\[color\:var\(--color-destructive\)\][aria-invalid="true"] {
    border-color: var(--color-destructive);
  }

  .aria-invalid\:ring-2[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .aria-invalid\:ring-\[color\:var\(--color-destructive\)\][aria-invalid="true"] {
    --tw-ring-color: var(--color-destructive);
  }

  .data-\[highlighted\]\:bg-\[color\:var\(--button-ghost-hover\)\][data-highlighted] {
    background-color: var(--button-ghost-hover);
  }

  .data-\[inset\]\:pl-8[data-inset] {
    padding-left: calc(var(--spacing) * 8);
  }

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

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

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

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

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

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

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

  .data-\[state\=active\]\:shadow-\[var\(--shadow-xs\)\][data-state="active"] {
    --tw-shadow: var(--shadow-xs);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

  .data-\[variant\=destructive\]\:text-\[color\:var\(--color-error-foreground\)\][data-variant="destructive"] {
    color: var(--color-error-foreground);
  }

  @media (hover: hover) {
    .data-\[variant\=destructive\]\:hover\:bg-\[color\:var\(--color-error-soft\)\][data-variant="destructive"]:hover {
      background-color: var(--color-error-soft);
    }
  }

  .data-\[variant\=destructive\]\:focus-visible\:bg-\[color\:var\(--color-error-soft\)\][data-variant="destructive"]:focus-visible {
    background-color: var(--color-error-soft);
  }

  .data-\[variant\=destructive\]\:data-\[highlighted\]\:bg-\[color\:var\(--color-error-soft\)\][data-variant="destructive"][data-highlighted] {
    background-color: var(--color-error-soft);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-pulse {
      animation: var(--animate-pulse);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:absolute {
      position: absolute;
    }
  }

  @media (min-width: 40rem) {
    .sm\:sticky {
      position: sticky;
    }
  }

  @media (min-width: 40rem) {
    .sm\:top-\[4\.25rem\] {
      top: 4.25rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:top-\[calc\(0\.8rem\+env\(safe-area-inset-top\)\)\] {
      top: calc(.8rem + env(safe-area-inset-top));
    }
  }

  @media (min-width: 40rem) {
    .sm\:top-\[calc\(100\%\+0\.72rem\)\] {
      top: calc(100% + .72rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:top-\[var\(--session-sticky-summary-top\,calc\(5rem\+env\(safe-area-inset-top\)\)\)\] {
      top: var(--session-sticky-summary-top, calc(5rem + env(safe-area-inset-top)));
    }
  }

  @media (min-width: 40rem) {
    .sm\:right-0 {
      right: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:right-\[0\.8rem\] {
      right: .8rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:bottom-\[calc\(0\.8rem\+env\(safe-area-inset-bottom\)\)\] {
      bottom: calc(.8rem + env(safe-area-inset-bottom));
    }
  }

  @media (min-width: 40rem) {
    .sm\:left-auto {
      left: auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:z-50 {
      z-index: 50;
    }
  }

  @media (min-width: 40rem) {
    .sm\:z-\[1\] {
      z-index: 1;
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 40rem) {
    .sm\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:ml-auto {
      margin-left: auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex {
      display: flex;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid {
      display: grid;
    }
  }

  @media (min-width: 40rem) {
    .sm\:hidden {
      display: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:inline {
      display: inline;
    }
  }

  @media (min-width: 40rem) {
    .sm\:aspect-square {
      aspect-ratio: 1;
    }
  }

  @media (min-width: 40rem) {
    .sm\:size-12 {
      width: calc(var(--spacing) * 12);
      height: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-8 {
      height: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[1\.3rem\] {
      height: 1.3rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[1\.4rem\] {
      height: 1.4rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[1\.7rem\] {
      height: 1.7rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[2\.6rem\] {
      height: 2.6rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[3\.15rem\] {
      height: 3.15rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-\[35rem\] {
      height: 35rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-auto {
      height: auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-h-\[calc\(100dvh-5\.25rem\)\] {
      max-height: calc(100dvh - 5.25rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-h-none {
      max-height: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-h-16 {
      min-height: calc(var(--spacing) * 16);
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-h-\[clamp\(4\.9rem\,9\.8vh\,5\.5rem\)\] {
      min-height: clamp(4.9rem, 9.8vh, 5.5rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-h-\[clamp\(5\.75rem\,11\.5vh\,6\.6rem\)\] {
      min-height: clamp(5.75rem, 11.5vh, 6.6rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-8 {
      width: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-10 {
      width: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[1\.3rem\] {
      width: 1.3rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[1\.4rem\] {
      width: 1.4rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[1\.7rem\] {
      width: 1.7rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[2\.6rem\] {
      width: 2.6rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[3\.15rem\] {
      width: 3.15rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[11rem\] {
      width: 11rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[18rem\] {
      width: 18rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[34rem\] {
      width: 34rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[calc\(100vw-3rem\)\] {
      width: calc(100vw - 3rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[min\(100\%\,15rem\)\] {
      width: min(100%, 15rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-\[min\(286px\,calc\(100vw-1\.5rem\)\)\] {
      width: min(286px, 100vw - 1.5rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-auto {
      width: auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-full {
      width: 100%;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[15rem\] {
      max-width: 15rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[17\.9rem\] {
      max-width: 17.9rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[22rem\] {
      max-width: 22rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[28rem\] {
      max-width: 28rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[32rem\] {
      max-width: 32rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[42rem\] {
      max-width: 42rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-\[calc\(100vw-1\.5rem\)\] {
      max-width: calc(100vw - 1.5rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-md {
      max-width: var(--container-md);
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-0 {
      min-width: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[4\.5rem\] {
      min-width: 4.5rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[11rem\] {
      min-width: 11rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[12rem\] {
      min-width: 12rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[18rem\] {
      min-width: 18rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[40rem\] {
      min-width: 40rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[46rem\] {
      min-width: 46rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[48rem\] {
      min-width: 48rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[52rem\] {
      min-width: 52rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[54rem\] {
      min-width: 54rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[60rem\] {
      min-width: 60rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:min-w-\[66rem\] {
      min-width: 66rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-1 {
      flex: 1;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-none {
      flex: none;
    }
  }

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

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

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

  @media (min-width: 40rem) {
    .sm\:grid-cols-\[9rem_1fr\] {
      grid-template-columns: 9rem 1fr;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-\[auto_auto_minmax\(0\,1\.35fr\)_minmax\(8rem\,0\.9fr\)\] {
      grid-template-columns: auto auto minmax(0, 1.35fr) minmax(8rem, .9fr);
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-\[minmax\(15\.25rem\,18rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(15.25rem, 18rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-\[minmax\(15\.75rem\,19rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(15.75rem, 19rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-col {
      flex-direction: column;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-nowrap {
      flex-wrap: nowrap;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-wrap {
      flex-wrap: wrap;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-stretch {
      align-items: stretch;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-center {
      justify-content: center;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-start {
      justify-content: flex-start;
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-\[0\.1rem\] {
      gap: .1rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-\[0\.8rem\] {
      gap: .8rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-\[0\.45rem\] {
      gap: .45rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-\[0\.55rem\] {
      gap: .55rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:self-auto {
      align-self: auto;
    }
  }

  @media (min-width: 40rem) {
    .sm\:self-center {
      align-self: center;
    }
  }

  @media (min-width: 40rem) {
    .sm\:self-start {
      align-self: flex-start;
    }
  }

  @media (min-width: 40rem) {
    .sm\:overflow-hidden {
      overflow: hidden;
    }
  }

  @media (min-width: 40rem) {
    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 40rem) {
    .sm\:p-\[1\.1rem_1rem_1rem\] {
      padding: 1.1rem 1rem 1rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-3\.5 {
      padding-inline: calc(var(--spacing) * 3.5);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-\[0\.55rem\] {
      padding-inline: .55rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-\[0\.65rem\] {
      padding-inline: .65rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-\[1\.2rem\] {
      padding-inline: 1.2rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-\[clamp\(1rem\,1\.6vw\,1\.9rem\)\] {
      padding-inline: clamp(1rem, 1.6vw, 1.9rem);
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-\[0\.8rem\] {
      padding-block: .8rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-\[0\.72rem\] {
      padding-block: .72rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-\[0\.85rem\] {
      padding-block: .85rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:pt-0 {
      padding-top: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 40rem) {
    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 40rem) {
    .sm\:pr-4 {
      padding-right: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 40rem) {
    .sm\:pb-\[0\.95rem\] {
      padding-bottom: .95rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-left {
      text-align: left;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[0\.8rem\] {
      font-size: .8rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[0\.9rem\] {
      font-size: .9rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[0\.84rem\] {
      font-size: .84rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[0\.96rem\] {
      font-size: .96rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[0\.8125rem\] {
      font-size: .8125rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[1\.08rem\] {
      font-size: 1.08rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[1\.35rem\] {
      font-size: 1.35rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-\[clamp\(1\.9rem\,1\.1rem\+1\.2vw\,2\.8rem\)\] {
      font-size: clamp(1.9rem, 1.1rem + 1.2vw, 2.8rem);
    }
  }

  @media (min-width: 48rem) {
    .md\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 48rem) {
    .md\:block {
      display: block;
    }
  }

  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
  }

  @media (min-width: 48rem) {
    .md\:hidden {
      display: none;
    }
  }

  @media (min-width: 48rem) {
    .md\:size-\[1\.3rem\] {
      width: 1.3rem;
      height: 1.3rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:size-\[2\.65rem\] {
      width: 2.65rem;
      height: 2.65rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:h-8 {
      height: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 48rem) {
    .md\:h-72 {
      height: calc(var(--spacing) * 72);
    }
  }

  @media (min-width: 48rem) {
    .md\:h-\[0\.9rem\] {
      height: .9rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:h-full {
      height: 100%;
    }
  }

  @media (min-width: 48rem) {
    .md\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 48rem) {
    .md\:min-h-\[5\.5rem\] {
      min-height: 5.5rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:w-8 {
      width: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 48rem) {
    .md\:w-\[0\.9rem\] {
      width: .9rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:w-auto {
      width: auto;
    }
  }

  @media (min-width: 48rem) {
    .md\:max-w-\[calc\(100vw-2rem\)\] {
      max-width: calc(100vw - 2rem);
    }
  }

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

  @media (min-width: 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 48rem) {
    .md\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 48rem) {
    .md\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 48rem) {
    .md\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (min-width: 48rem) {
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 48rem) {
    .md\:self-auto {
      align-self: auto;
    }
  }

  @media (min-width: 48rem) {
    .md\:overflow-hidden {
      overflow: hidden;
    }
  }

  @media (min-width: 48rem) {
    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 48rem) {
    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 48rem) {
    .md\:px-\[1\.1rem\] {
      padding-inline: 1.1rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:pt-3 {
      padding-top: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 48rem) {
    .md\:pt-\[1\.25rem\] {
      padding-top: 1.25rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[0\.75rem\] {
      font-size: .75rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[0\.875rem\] {
      font-size: .875rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[0\.8125rem\] {
      font-size: .8125rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[0\.9375rem\] {
      font-size: .9375rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[1\.5rem\] {
      font-size: 1.5rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[1\.25rem\] {
      font-size: 1.25rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:\[--admin-shell-padding\:var\(--space-4\)\] {
      --admin-shell-padding: var(--space-4);
    }
  }

  @media (min-width: 48rem) {
    .md\:\[--admin-toolbar-height\:calc\(env\(safe-area-inset-top\)\+4rem\)\] {
      --admin-toolbar-height: calc(env(safe-area-inset-top) + 4rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }
  }

  @media (min-width: 64rem) {
    .lg\:top-\[var\(--admin-toolbar-height\)\] {
      top: var(--admin-toolbar-height);
    }
  }

  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }
  }

  @media (min-width: 64rem) {
    .lg\:hidden {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:size-9 {
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
    }
  }

  @media (min-width: 64rem) {
    .lg\:size-\[1\.2rem\] {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:size-\[1\.15rem\] {
      width: 1.15rem;
      height: 1.15rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-6 {
      height: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-9 {
      height: calc(var(--spacing) * 9);
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-11 {
      height: calc(var(--spacing) * 11);
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-\[13\.75rem\] {
      height: 13.75rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-\[var\(--admin-sidebar-height\)\] {
      height: var(--admin-sidebar-height);
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-h-\[13\.75rem\] {
      min-height: 13.75rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-h-\[var\(--admin-sidebar-height\)\] {
      min-height: var(--admin-sidebar-height);
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-9 {
      width: calc(var(--spacing) * 9);
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-11 {
      width: calc(var(--spacing) * 11);
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-\[6\.1rem\] {
      width: 6.1rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-\[13\.75rem\] {
      width: 13.75rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-\[19\.5rem\] {
      width: 19.5rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-\[calc\(100vw-4rem\)\] {
      width: calc(100vw - 4rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:max-w-\[13rem\] {
      max-width: 13rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:max-w-\[15rem\] {
      max-width: 15rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:max-w-\[30rem\] {
      max-width: 30rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:max-w-none {
      max-width: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-w-\[4\.75rem\] {
      min-width: 4.75rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-w-\[13\.75rem\] {
      min-width: 13.75rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:min-w-\[22rem\] {
      min-width: 22rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:flex-1 {
      flex: 1;
    }
  }

  @media (min-width: 64rem) {
    .lg\:basis-40 {
      flex-basis: calc(var(--spacing) * 40);
    }
  }

  @media (min-width: 64rem) {
    .lg\:basis-\[22rem\] {
      flex-basis: 22rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

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

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[auto_auto_minmax\(0\,1\.5fr\)_minmax\(9rem\,1fr\)\] {
      grid-template-columns: auto auto minmax(0, 1.5fr) minmax(9rem, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[minmax\(0\,0\.94fr\)_minmax\(28rem\,1\.06fr\)\] {
      grid-template-columns: minmax(0, .94fr) minmax(28rem, 1.06fr);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[minmax\(13\.5rem\,16rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[minmax\(16\.5rem\,19\.5rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(16.5rem, 19.5rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[minmax\(17rem\,20\.5rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(17rem, 20.5rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-rows-1 {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 64rem) {
    .lg\:flex-wrap {
      flex-wrap: wrap;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-stretch {
      align-items: stretch;
    }
  }

  @media (min-width: 64rem) {
    .lg\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 64rem) {
    .lg\:justify-center {
      justify-content: center;
    }
  }

  @media (min-width: 64rem) {
    .lg\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (min-width: 64rem) {
    .lg\:justify-start {
      justify-content: flex-start;
    }
  }

  @media (min-width: 64rem) {
    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .lg\:gap-\[0\.9rem\] {
      gap: .9rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:overflow-clip {
      overflow: clip;
    }
  }

  @media (min-width: 64rem) {
    .lg\:overflow-hidden {
      overflow: hidden;
    }
  }

  @media (min-width: 64rem) {
    .lg\:overflow-visible {
      overflow: visible;
    }
  }

  @media (min-width: 64rem) {
    .lg\:overflow-y-auto {
      overflow-y: auto;
    }
  }

  @media (min-width: 64rem) {
    .lg\:rounded-none {
      border-radius: 0;
    }
  }

  @media (min-width: 64rem) {
    .lg\:border-0 {
      border-style: var(--tw-border-style);
      border-width: 0;
    }
  }

  @media (min-width: 64rem) {
    .lg\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-width: 0;
    }
  }

  @media (min-width: 64rem) {
    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:bg-transparent {
      background-color: #0000;
    }
  }

  @media (min-width: 64rem) {
    .lg\:p-\[1\.2rem_1\.1rem_1\.05rem\] {
      padding: 1.2rem 1.1rem 1.05rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-\[1\.1rem\] {
      padding-inline: 1.1rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-\[clamp\(1\.15rem\,2vw\,1\.8rem\)\] {
      padding-inline: clamp(1.15rem, 2vw, 1.8rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-\[clamp\(1\.25rem\,2vw\,1\.9rem\)\] {
      padding-inline: clamp(1.25rem, 2vw, 1.9rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-\[clamp\(0\.9rem\,2\.1vh\,1\.3rem\)\] {
      padding-block: clamp(.9rem, 2.1vh, 1.3rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-\[clamp\(1\.25rem\,3vh\,2rem\)\] {
      padding-block: clamp(1.25rem, 3vh, 2rem);
    }
  }

  @media (min-width: 64rem) {
    .lg\:pr-\[1\.1rem\] {
      padding-right: 1.1rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:pr-\[var\(--admin-shell-padding\)\] {
      padding-right: var(--admin-shell-padding);
    }
  }

  @media (min-width: 64rem) {
    .lg\:pl-\[var\(--admin-shell-padding\)\] {
      padding-left: var(--admin-shell-padding);
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-left {
      text-align: left;
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-\[0\.95rem\] {
      font-size: .95rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-\[1\.02rem\] {
      font-size: 1.02rem;
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-\[1\.35rem\] {
      font-size: 1.35rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:sticky {
      position: sticky;
    }
  }

  @media (min-width: 80rem) {
    .xl\:top-6 {
      top: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }

  @media (min-width: 80rem) {
    .xl\:block {
      display: block;
    }
  }

  @media (min-width: 80rem) {
    .xl\:hidden {
      display: none;
    }
  }

  @media (min-width: 80rem) {
    .xl\:w-\[21rem\] {
      width: 21rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:max-w-\[26rem\] {
      max-width: 26rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:max-w-\[32rem\] {
      max-width: 32rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:max-w-none {
      max-width: none;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

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

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(22rem\,1\.1fr\)\] {
      grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,1\.7fr\)_minmax\(10rem\,auto\)_minmax\(14rem\,1fr\)_minmax\(16rem\,1fr\)\] {
      grid-template-columns: minmax(0, 1.7fr) minmax(10rem, auto) minmax(14rem, 1fr) minmax(16rem, 1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,1fr\)_22rem\] {
      grid-template-columns: minmax(0, 1fr) 22rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,50rem\)_minmax\(22rem\,1fr\)\] {
      grid-template-columns: minmax(0, 50rem) minmax(22rem, 1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 80rem) {
    .xl\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 80rem) {
    .xl\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 80rem) {
    .xl\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 80rem) {
    .xl\:items-stretch {
      align-items: stretch;
    }
  }

  @media (min-width: 80rem) {
    .xl\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 80rem) {
    .xl\:justify-center {
      justify-content: center;
    }
  }

  @media (min-width: 80rem) {
    .xl\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (min-width: 80rem) {
    .xl\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 80rem) {
    .xl\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 80rem) {
    .xl\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .xl\:self-start {
      align-self: flex-start;
    }
  }

  @media (min-width: 80rem) {
    .xl\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }
  }

  @media (min-width: 80rem) {
    .xl\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 80rem) {
    .xl\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 80rem) {
    .xl\:pr-2 {
      padding-right: calc(var(--spacing) * 2);
    }
  }

  @media (min-width: 80rem) {
    .xl\:pl-2 {
      padding-left: calc(var(--spacing) * 2);
    }
  }

  @media (min-width: 80rem) {
    .xl\:text-\[0\.75rem\] {
      font-size: .75rem;
    }
  }

  @media (min-width: 80rem) {
    .xl\:\[--admin-shell-padding\:var\(--space-5\)\] {
      --admin-shell-padding: var(--space-5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:mt-\[0\.6rem\] {
      margin-top: .6rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:size-\[1\.2rem\] {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:size-\[1\.3rem\] {
      width: 1.3rem;
      height: 1.3rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:size-\[1\.4rem\] {
      width: 1.4rem;
      height: 1.4rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:size-\[2\.8rem\] {
      width: 2.8rem;
      height: 2.8rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-4 {
      height: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-7 {
      height: calc(var(--spacing) * 7);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-8 {
      height: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-9 {
      height: calc(var(--spacing) * 9);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-10 {
      height: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-12 {
      height: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-44 {
      height: calc(var(--spacing) * 44);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-\[2\.85rem\] {
      height: 2.85rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:h-\[15rem\] {
      height: 15rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-h-\[2\.625rem\] {
      min-height: 2.625rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-h-\[3\.25rem\] {
      min-height: 3.25rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-h-\[15rem\] {
      min-height: 15rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-h-\[18\.75rem\] {
      min-height: 18.75rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-4 {
      width: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-9 {
      width: calc(var(--spacing) * 9);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-10 {
      width: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-12 {
      width: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-44 {
      width: calc(var(--spacing) * 44);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-\[2\.85rem\] {
      width: 2.85rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-\[7rem\] {
      width: 7rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-\[15rem\] {
      width: 15rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-\[var\(--layout-sidebar-collapsed-wide\)\] {
      width: var(--layout-sidebar-collapsed-wide);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:w-\[var\(--layout-sidebar-expanded-wide\)\] {
      width: var(--layout-sidebar-expanded-wide);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:max-w-\[78rem\] {
      max-width: 78rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-20 {
      min-width: calc(var(--spacing) * 20);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-\[2\.6rem\] {
      min-width: 2.6rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-\[2\.8rem\] {
      min-width: 2.8rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-\[2\.625rem\] {
      min-width: 2.625rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-\[15rem\] {
      min-width: 15rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:min-w-\[62rem\] {
      min-width: 62rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[auto_auto_minmax\(0\,1\.6fr\)_minmax\(10rem\,1fr\)\] {
      grid-template-columns: auto auto minmax(0, 1.6fr) minmax(10rem, 1fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(0\,1\.02fr\)_minmax\(29rem\,0\.98fr\)\] {
      grid-template-columns: minmax(0, 1.02fr) minmax(29rem, .98fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(0\,54rem\)_minmax\(24rem\,1fr\)\] {
      grid-template-columns: minmax(0, 54rem) minmax(24rem, 1fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(18\.5rem\,22rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(18.5rem, 22rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(19\.5rem\,24rem\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(19.5rem, 24rem) minmax(0, 1fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:p-\[1\.25rem_1\.15rem_1\.1rem\] {
      padding: 1.25rem 1.15rem 1.1rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-\[clamp\(1\.5rem\,1\.8vw\,2\.2rem\)\] {
      padding-inline: clamp(1.5rem, 1.8vw, 2.2rem);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-\[clamp\(1\.7rem\,2vw\,2\.4rem\)\] {
      padding-inline: clamp(1.7rem, 2vw, 2.4rem);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:px-\[clamp\(2rem\,2vw\,2\.75rem\)\] {
      padding-inline: clamp(2rem, 2vw, 2.75rem);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:py-\[0\.9rem\] {
      padding-block: .9rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:py-\[clamp\(1\.2rem\,2\.3vh\,1\.85rem\)\] {
      padding-block: clamp(1.2rem, 2.3vh, 1.85rem);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:py-\[clamp\(2\.25rem\,3vh\,3rem\)\] {
      padding-block: clamp(2.25rem, 3vh, 3rem);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:pt-\[1\.45rem\] {
      padding-top: 1.45rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:pr-5 {
      padding-right: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:pr-6 {
      padding-right: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:pl-4 {
      padding-left: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.8rem\] {
      font-size: .8rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.72rem\] {
      font-size: .72rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.75rem\] {
      font-size: .75rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.625rem\] {
      font-size: .625rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.875rem\] {
      font-size: .875rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.6875rem\] {
      font-size: .6875rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.8125rem\] {
      font-size: .8125rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[0\.9375rem\] {
      font-size: .9375rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1\.05rem\] {
      font-size: 1.05rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1\.5rem\] {
      font-size: 1.5rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1\.12rem\] {
      font-size: 1.12rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1\.125rem\] {
      font-size: 1.125rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1\.875rem\] {
      font-size: 1.875rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:text-\[1rem\] {
      font-size: 1rem;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:\[--admin-shell-padding\:1\.75rem\] {
      --admin-shell-padding: 1.75rem;
    }
  }

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

  .\[\&_svg\]\:size-3 svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

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

  .\[\&_svg\]\:text-\[color\:var\(--color-muted-foreground\)\] svg {
    color: var(--color-muted-foreground);
  }

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

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\]\:border-\[color\:var\(--color-border\)\] tr {
    border-color: var(--color-border);
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&\:has\(\[data-slot\=card-action\]\)\]\:grid-cols-\[minmax\(0\,1fr\)_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: calc(var(--spacing) * 0);
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>td\]\:border-y > td {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .\[\&\>td\]\:border-\[color\:var\(--session-accent-border\)\] > td {
    border-color: var(--session-accent-border);
  }

  .\[\&\>td\]\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_80\%\,var\(--surface-card\)_20\%\)\] > td {
    background-color: var(--session-accent-soft-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\>td\]\:bg-\[color\:color-mix\(in_srgb\,var\(--session-accent-soft-strong\)_80\%\,var\(--surface-card\)_20\%\)\] > td {
      background-color: color-mix(in srgb,var(--session-accent-soft-strong) 80%,var(--surface-card) 20%);
    }
  }

  .\[\&\>td\:first-child\]\:border-l > td:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .\[\&\>td\:last-child\]\:border-r > td:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .\[\&\>tr\:last-child\]\:border-0 > tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .h-screen-safe {
    height: 100dvh;
  }

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

  .page-vertical {
    padding-top: var(--page-pad-top);
    padding-bottom: var(--page-pad-bottom);
  }

  .page-top {
    padding-top: var(--page-pad-top);
  }

  .type-eyebrow {
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    font-size: clamp(.75rem, .72rem + .14vw, .875rem);
    font-weight: 700;
    line-height: 1;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .type-eyebrow {
      color: color-mix(in oklch, var(--color-muted-foreground) 92%, transparent);
    }
  }

  .type-page-title {
    font-size: clamp(2.1rem, 1.75rem + 1.75vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
  }

  .type-page-lead {
    max-width: 62rem;
    color: var(--color-foreground);
    font-size: clamp(1rem, .96rem + .24vw, 1.35rem);
    line-height: 1.6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .type-page-lead {
      color: color-mix(in oklch, var(--color-foreground) 74%, transparent);
    }
  }

  .type-section-title {
    color: var(--color-foreground);
    font-size: clamp(1.05rem, 1rem + .32vw, 1.55rem);
    font-weight: 650;
    line-height: 1.15;
  }

  .type-section-body {
    color: var(--color-muted-foreground);
    font-size: clamp(.98rem, .95rem + .16vw, 1.12rem);
    line-height: 1.5;
  }

  .type-display-brand {
    font-family: var(--font-brand-display), var(--font-app-sans), sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: clamp(3.25rem, 2.5rem + 3.8vw, 7.5rem);
    font-weight: 700;
    line-height: 1;
  }

  .type-display-title {
    font-size: clamp(2.1rem, 1.8rem + 1.9vw, 4.4rem);
    font-weight: 650;
    line-height: 1.1;
  }

  .type-display-lead {
    color: var(--color-foreground);
    font-size: clamp(1rem, .96rem + .24vw, 1.25rem);
    line-height: 1.5;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .type-display-lead {
      color: color-mix(in oklch, var(--color-foreground) 78%, transparent);
    }
  }

  .type-pill-label {
    font-size: clamp(.8125rem, .78rem + .14vw, .9375rem);
    line-height: 1.4;
  }

  .theme-page-bg {
    background-color: var(--page-bg-via);
    background-image: none;
  }

  .theme-session-music-bg {
    background-color: var(--page-bg-via);
    background-image: none;
    background-attachment: scroll;
  }

  .theme-page-glow {
    pointer-events: none;
    z-index: -10;
    background: none;
    position: fixed;
    inset: 0;
  }

  .theme-session-page-root {
    --session-section-radius-sm: .8rem;
    --session-section-radius-md: .9rem;
    --session-section-radius-lg: 1.05rem;
    --session-section-radius-xl: 1.15rem;
    --session-surface-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-page-root {
      --session-surface-border: color-mix(in srgb,
      var(--color-primary) 16%,
      var(--color-border) 84%);
    }
  }

  .theme-session-page-root {
    --session-surface-highlight: #ffffff1f;
    --session-surface-rim: #ffffff29;
    --session-surface-shadow: 0 24px 48px #00000057;
    --session-surface-contact-shadow: 0 0 0 1px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-page-root {
      --session-surface-contact-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent);
    }
  }

  .theme-session-page-root {
    --session-surface-inset-shadow: inset 0 1px 0 var(--session-surface-highlight),
      inset 0 -1px 0 var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-page-root {
      --session-surface-inset-shadow: inset 0 1px 0 var(--session-surface-highlight),
      inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
  }

  .theme-session-page-root {
    --session-surface-backdrop: blur(18px) saturate(1.04);
    --session-surface-stage-glow: var(--page-glow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-page-root {
      --session-surface-stage-glow: color-mix(in srgb, var(--page-glow) 22%, transparent);
    }
  }

  .theme-session-page-root {
    isolation: isolate;
    background: var(--color-background);
    min-height: 100dvh;
    color: var(--color-foreground);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  html[data-app-theme="light"] .theme-session-page-root, html[data-app-theme="dark"] .theme-session-page-root {
    --session-surface-border: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] .theme-session-page-root, html[data-app-theme="dark"] .theme-session-page-root {
      --session-surface-border: color-mix(in oklch,
      var(--color-primary) 12%,
      var(--color-border) 88%);
    }
  }

  html[data-app-theme="light"] .theme-session-page-root, html[data-app-theme="dark"] .theme-session-page-root {
    --session-surface-highlight: transparent;
    --session-surface-rim: transparent;
    --session-surface-shadow: none;
    --session-surface-contact-shadow: 0 0 transparent;
    --session-surface-inset-shadow: none;
    --session-surface-backdrop: none;
    --session-surface-stage-glow: transparent;
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --button-primary-border: transparent;
    --button-secondary-border: transparent;
    --button-tertiary-border: transparent;
    --session-depth-summary-backdrop: none;
    --session-depth-content-backdrop: none;
    --session-depth-transport-backdrop: blur(18px) saturate(1.12);
    --session-depth-drawer-backdrop: var(--session-depth-transport-backdrop);
    --session-depth-panel-transition: background .22s ease,
      box-shadow .22s ease,
      transform .22s ease,
      filter .22s ease;
    --session-depth-transport-transition: background .22s ease,
      box-shadow .22s ease,
      transform .22s ease,
      filter .22s ease;
    --session-depth-panel-face-sheen: linear-gradient(180deg,
      #ffffff1f 0%,
      #ffffff08 18%,
      transparent 48%);
    --session-depth-panel-face-rim: radial-gradient(130% 88% at 0% 0%,
      var(--page-glow),
      transparent 58%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-panel-face-rim: radial-gradient(130% 88% at 0% 0%,
      color-mix(in srgb, var(--page-glow) 20%, transparent),
      transparent 58%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-panel-underlay-bg: linear-gradient(180deg,
      var(--surface-card) 0%,
      var(--surface-panel) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-panel-underlay-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-card) 80%, white 8%) 0%,
      color-mix(in srgb, var(--surface-panel) 92%, black 8%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-panel-underlay-shadow: 0 20px 38px
      #0000003d;
    --session-depth-panel-underlay-opacity: .36;
    --session-depth-panel-underlay-transform: translate3d(0,
        .5rem,
        -1px)
      scale(.974);
    --session-depth-panel-underlay-filter: blur(10px);
    --session-depth-transport-top-line: linear-gradient(90deg,
      transparent,
      var(--session-accent-border),
      transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-transport-top-line: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--session-accent-border) 68%, transparent),
      transparent);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-transport-underlay-bg: linear-gradient(180deg,
      var(--surface-card) 0%,
      var(--surface-panel) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-transport-underlay-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-card) 84%, white 8%) 0%,
      color-mix(in srgb, var(--surface-panel) 92%, black 8%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-transport-underlay-shadow: 0 18px 34px
      #00000042;
    --session-depth-transport-underlay-opacity: .42;
    --session-depth-transport-underlay-transform: translate3d(0,
        .45rem,
        -1px)
      scale(.982);
    --session-depth-transport-underlay-filter: blur(10px);
    --session-depth-drawer-sheen: linear-gradient(180deg,
      #ffffff1f 0%,
      #ffffff0a 16%,
      transparent 44%);
    --session-depth-drawer-header-shadow: inset 0 -1px 0
      var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-drawer-header-shadow: inset 0 -1px 0
      color-mix(in srgb, var(--surface-border) 52%, transparent);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-drawer-close-bg: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-drawer-close-bg: color-mix(in srgb,
      var(--surface-card) 92%,
      black 8%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-drawer-close-bg-hover: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-drawer-close-bg-hover: color-mix(in srgb,
      var(--session-accent-soft) 52%,
      var(--surface-card) 48%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-drawer-close-shadow: inset 0 1px 0 #ffffff1a,
      0 12px 24px #0000002e;
    --session-depth-banner-shadow: 0 14px 28px #00000029,
      inset 0 1px 0 #ffffff1a;
    --session-depth-banner-sheen: linear-gradient(180deg,
      #ffffff29 0%,
      transparent 52%);
    --session-depth-toggle-surface: linear-gradient(180deg,
      var(--surface-card) 0%,
      var(--surface-panel) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-toggle-surface: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-card) 88%, white 12%) 0%,
      color-mix(in srgb, var(--surface-panel) 92%, black 8%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-toggle-shadow: inset 0 1px 0 #ffffff1a,
      0 12px 24px #0000002e;
    --session-depth-toggle-inactive-bg: transparent;
    --session-depth-toggle-inactive-color: var(--color-muted-foreground);
    --session-depth-toggle-active-bg: linear-gradient(180deg,
      var(--session-accent-soft-strong) 0%,
      var(--session-accent-soft) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-toggle-active-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--session-accent-soft-strong) 92%, #ffffff14 8%) 0%,
      color-mix(in srgb, var(--session-accent-soft) 100%, transparent) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-toggle-active-color: var(--session-accent-ink);
    --session-depth-toggle-active-shadow: inset 0 1px 0 #ffffff1f,
      0 10px 18px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-toggle-active-shadow: inset 0 1px 0 #ffffff1f,
      0 10px 18px color-mix(in srgb, var(--color-primary) 16%, transparent);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-summary-surface: linear-gradient(180deg,
      var(--surface-panel) 0%,
      var(--surface-panel) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-summary-surface: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-panel) 84%, #ffffff14 16%) 0%,
      color-mix(in srgb, var(--surface-panel) 94%, black 6%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-summary-shadow: 0 28px 60px #00000061,
      0 10px 24px var(--color-primary),
      inset 0 1px 0 #ffffff1a,
      inset 0 -1px 0 #0307123d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-summary-shadow: 0 28px 60px #00000061,
      0 10px 24px color-mix(in srgb, var(--color-primary) 12%, transparent),
      inset 0 1px 0 #ffffff1a,
      inset 0 -1px 0 #0307123d;
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-content-surface: linear-gradient(180deg,
      var(--surface-card) 0%,
      var(--surface-card) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-content-surface: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-card) 88%, #ffffff0f 12%) 0%,
      color-mix(in srgb, var(--surface-card) 96%, black 4%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-content-shadow: 0 24px 56px #00000057,
      0 8px 18px var(--color-primary),
      inset 0 1px 0 #ffffff14,
      inset 0 -1px 0 #0307122e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-content-shadow: 0 24px 56px #00000057,
      0 8px 18px color-mix(in srgb, var(--color-primary) 10%, transparent),
      inset 0 1px 0 #ffffff14,
      inset 0 -1px 0 #0307122e;
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-panel-underlay-opacity: .3;
    --session-depth-panel-underlay-transform: translate3d(0, .56rem, -1px)
      scale(.972);
    --session-depth-panel-underlay-filter: blur(18px);
    --session-depth-transport-surface-base: var(--surface-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-transport-surface-base: color-mix(in srgb,
      var(--surface-panel) 76%,
      var(--color-background) 24%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-transport-surface: linear-gradient(180deg,
      var(--surface-panel) 0%,
      var(--surface-panel) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-transport-surface: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-panel) 78%, #ffffff14 22%) 0%,
      color-mix(in srgb, var(--surface-panel) 90%, var(--color-background) 10%) 100%);
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-transport-shadow: 0 24px 52px #00000075,
      0 12px 24px var(--color-primary),
      inset 0 1px 0 #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-transport-shadow: 0 24px 52px #00000075,
      0 12px 24px color-mix(in srgb, var(--color-primary) 10%, transparent),
      inset 0 1px 0 #ffffff1f;
    }
  }

  .session-depth-scope[data-session-depth-style="lift"], .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-transport-underlay-opacity: .3;
    --session-depth-transport-underlay-transform: translate3d(0, .48rem, -1px)
      scale(.98);
    --session-depth-transport-underlay-filter: blur(16px);
    --session-depth-drawer-surface: var(--session-depth-transport-surface);
    --session-depth-drawer-shadow: 28px 0 60px
      #00000052;
  }

  html[data-app-theme="light"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="light"] .session-depth-drawer[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-drawer[data-session-depth-style="lift"] {
    --button-primary-border: var(--color-primary);
    --button-secondary-border: var(--session-accent-border);
    --button-tertiary-border: var(--color-border);
    --session-depth-summary-backdrop: none;
    --session-depth-content-backdrop: none;
    --session-depth-transport-backdrop: none;
    --session-depth-drawer-backdrop: none;
    --session-depth-panel-face-sheen: none;
    --session-depth-panel-face-rim: none;
    --session-depth-panel-underlay-bg: none;
    --session-depth-panel-underlay-shadow: none;
    --session-depth-panel-underlay-opacity: 0;
    --session-depth-panel-underlay-transform: none;
    --session-depth-panel-underlay-filter: none;
    --session-depth-transport-top-line: none;
    --session-depth-transport-underlay-bg: none;
    --session-depth-transport-underlay-shadow: none;
    --session-depth-transport-underlay-opacity: 0;
    --session-depth-transport-underlay-transform: none;
    --session-depth-transport-underlay-filter: none;
    --session-depth-drawer-sheen: none;
    --session-depth-drawer-header-shadow: inset 0 -1px 0
      var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-app-theme="light"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="light"] .session-depth-drawer[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-drawer[data-session-depth-style="lift"] {
      --session-depth-drawer-header-shadow: inset 0 -1px 0
      color-mix(in oklch, var(--surface-border) 82%, transparent);
    }
  }

  html[data-app-theme="light"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="light"] .session-depth-drawer[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-scope[data-session-depth-style="lift"], html[data-app-theme="dark"] .session-depth-drawer[data-session-depth-style="lift"] {
    --session-depth-drawer-close-bg: var(--color-card);
    --session-depth-drawer-close-bg-hover: var(--color-secondary);
    --session-depth-drawer-close-shadow: none;
    --session-depth-banner-shadow: none;
    --session-depth-banner-sheen: none;
    --session-depth-toggle-surface: var(--color-card);
    --session-depth-toggle-shadow: none;
    --session-depth-toggle-active-bg: var(--session-accent-soft-strong);
    --session-depth-toggle-active-color: var(--color-foreground);
    --session-depth-toggle-active-shadow: none;
    --session-depth-summary-surface: var(--surface-panel);
    --session-depth-summary-shadow: none;
    --session-depth-content-surface: var(--surface-card);
    --session-depth-content-shadow: none;
    --session-depth-transport-surface-base: var(--surface-panel);
    --session-depth-transport-surface: var(--surface-panel);
    --session-depth-transport-shadow: none;
    --session-depth-drawer-surface: var(--surface-card);
    --session-depth-drawer-shadow: none;
  }

  .session-depth-panel, .session-depth-transport, .session-depth-drawer, .session-depth-banner, .session-depth-toggle {
    isolation: isolate;
    position: relative;
  }

  .session-depth-panel {
    transition: var(--session-depth-panel-transition);
  }

  .session-depth-transport {
    transition: var(--session-depth-transport-transition);
  }

  .session-depth-panel:before, .session-depth-panel:after, .session-depth-transport:before, .session-depth-transport:after, .session-depth-drawer:before, .session-depth-banner:before {
    content: "";
    pointer-events: none;
    border-radius: inherit;
    position: absolute;
  }

  .session-depth-panel:before {
    background: var(--session-depth-panel-face-sheen), var(--session-depth-panel-face-rim);
    inset: 0;
  }

  .session-depth-panel:after {
    z-index: -1;
    left: var(--session-depth-panel-underlay-x, .8rem);
    right: var(--session-depth-panel-underlay-x, .8rem);
    bottom: var(--session-depth-panel-underlay-bottom, -.62rem);
    height: var(--session-depth-panel-underlay-height, 38%);
    background: var(--session-depth-panel-underlay-bg);
    box-shadow: var(--session-depth-panel-underlay-shadow);
    opacity: var(--session-depth-panel-underlay-opacity);
    transform: var(--session-depth-panel-underlay-transform);
    filter: var(--session-depth-panel-underlay-filter);
  }

  .session-depth-panel--summary {
    --session-depth-panel-underlay-height: 42%;
    --session-depth-panel-underlay-bottom: -.72rem;
  }

  .session-depth-panel--content {
    --session-depth-panel-underlay-height: 32%;
    --session-depth-panel-underlay-x: 1rem;
    --session-depth-panel-underlay-bottom: -.58rem;
  }

  .session-depth-transport:before {
    background: linear-gradient(#ffffff14 0%, #0000 52%);
    inset: 0;
  }

  .session-depth-transport:after {
    z-index: -1;
    background: var(--session-depth-transport-underlay-bg);
    height: 54%;
    box-shadow: var(--session-depth-transport-underlay-shadow);
    opacity: var(--session-depth-transport-underlay-opacity);
    transform: var(--session-depth-transport-underlay-transform);
    filter: var(--session-depth-transport-underlay-filter);
    bottom: -.48rem;
    left: 1rem;
    right: 1rem;
  }

  .session-depth-drawer:before {
    background: var(--session-depth-drawer-sheen);
    inset: 0;
  }

  .session-depth-drawer {
    background: var(--session-depth-drawer-surface, var(--color-background));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .session-depth-drawer {
      background: var(--session-depth-drawer-surface, color-mix(in oklch, var(--color-background) 98%, var(--color-muted) 2%));
    }
  }

  .session-depth-drawer {
    box-shadow: var(--session-depth-drawer-shadow, none);
    -webkit-backdrop-filter: var(--session-depth-drawer-backdrop, none);
  }

  .session-depth-drawer__header {
    box-shadow: var(--session-depth-drawer-header-shadow);
  }

  .session-depth-drawer__close {
    background: var(--session-depth-drawer-close-bg);
    box-shadow: var(--session-depth-drawer-close-shadow);
    color: var(--color-muted-foreground);
    -webkit-backdrop-filter: var(--session-depth-transport-backdrop);
    border: 0;
  }

  .session-depth-drawer__close:hover {
    background: var(--session-depth-drawer-close-bg-hover);
    color: var(--color-foreground);
  }

  .session-depth-banner {
    box-shadow: var(--session-depth-banner-shadow);
  }

  .session-depth-banner:before {
    background: var(--session-depth-banner-sheen);
    inset: 0;
  }

  .session-depth-toggle {
    background: var(--session-depth-toggle-surface);
    box-shadow: var(--session-depth-toggle-shadow);
  }

  .session-depth-toggle__button--inactive {
    background: var(--session-depth-toggle-inactive-bg);
    color: var(--session-depth-toggle-inactive-color);
  }

  .session-depth-toggle__button--active {
    background: var(--session-depth-toggle-active-bg);
    color: var(--session-depth-toggle-active-color);
    box-shadow: var(--session-depth-toggle-active-shadow);
  }

  .theme-session-page-main {
    background: inherit;
    flex: auto;
    min-height: 0;
  }

  .theme-user-page-width {
    width: 100%;
  }

  .theme-user-page-width--narrow {
    max-width: 34rem;
  }

  .theme-user-page-width--default, .theme-user-page-width--wide {
    max-width: var(--layout-user-shell-max);
  }

  .theme-user-page-width--full {
    max-width: none;
  }

  @media (min-width: 96rem) {
    .theme-user-page-width--wide {
      max-width: var(--layout-user-shell-max-wide);
    }
  }

  .theme-centered-page-card {
    border-radius: var(--session-section-radius-xl, 1.15rem);
    border: 1px solid var(--color-border);
    background: var(--color-background);
  }

  .theme-session-surface-card {
    border: 1px solid var(--session-surface-border);
    border-radius: var(--session-section-radius-xl);
    background: linear-gradient(180deg, #fffc 0%, #ffffff2e 16%, transparent 44%), radial-gradient(120% 88% at 0% 0%, var(--session-surface-stage-glow), transparent 56%), linear-gradient(180deg, var(--color-background), var(--color-muted));
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-surface-card {
      background: linear-gradient(180deg, #fffc 0%, #ffffff2e 16%, transparent 44%), radial-gradient(120% 88% at 0% 0%, var(--session-surface-stage-glow), transparent 56%), linear-gradient(180deg, color-mix(in oklch, var(--color-background) 93%, white 7%), color-mix(in oklch, var(--color-muted) 10%, var(--color-background) 90%));
    }
  }

  .theme-session-surface-card {
    box-shadow: var(--session-surface-shadow), var(--session-surface-contact-shadow), var(--session-surface-inset-shadow);
    -webkit-backdrop-filter: var(--session-surface-backdrop);
    backdrop-filter: var(--session-surface-backdrop);
  }

  .theme-session-surface-card:before {
    content: "";
    pointer-events: none;
    border-radius: inherit;
    opacity: .5;
    border: 1px solid #ffffff5c;
    padding: 1px;
    position: absolute;
    inset: 1px;
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source;
  }

  .theme-shell-glow {
    z-index: -20;
    opacity: .82;
    background: radial-gradient(circle at top left, var(--page-glow), transparent 72%), radial-gradient(circle at 88% 8%, var(--page-glow), transparent 58%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-shell-glow {
      background: radial-gradient(circle at top left, var(--page-glow), transparent 72%), radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--page-glow) 62%, transparent), transparent 58%);
    }
  }

  .theme-header-surface {
    background-color: var(--surface-card);
    box-shadow: inset 0 -1px 0 var(--surface-border), 0 12px 30px #00000047;
    background-image: none;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-header-surface {
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--surface-border) 64%, transparent), 0 12px 30px #00000047;
    }
  }

  .tracklist-debug-minor {
    --tracklist-debug-color: #05966942;
    position: relative;
  }

  .tracklist-debug-minor:after {
    content: "";
    pointer-events: none;
    border-radius: inherit;
    position: absolute;
    inset: 0;
  }

  .tracklist-debug-minor:after {
    border: 1.5px dotted var(--tracklist-debug-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tracklist-debug-minor:after {
      border: 1.5px dotted color-mix(in srgb, var(--tracklist-debug-color) 64%, transparent);
    }
  }

  .tracklist-debug-color-amber {
    --tracklist-debug-color: #d9770657;
  }

  .theme-header-ambient {
    pointer-events: none;
    opacity: 0;
    background: none;
    position: absolute;
    inset: 0;
  }

  .admin-sidebar-square-scope, .admin-sidebar-square-scope *, .admin-sidebar-square-scope :before, .admin-sidebar-square-scope :after {
    border-radius: 0 !important;
  }

  .theme-header-session-accent {
    pointer-events: none;
    opacity: 0;
    background: none;
    position: absolute;
    inset: 0;
  }

  .theme-header-divider {
    pointer-events: none;
    inset-inline: 0;
    background: var(--surface-border);
    height: 1px;
    position: absolute;
    bottom: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-header-divider {
      background: color-mix(in srgb, var(--surface-border) 88%, transparent);
    }
  }

  .theme-header-session-glow {
    pointer-events: none;
    inset-inline: 3rem;
    opacity: 0;
    filter: none;
    background: none;
    height: 1.9rem;
    position: absolute;
    bottom: 0;
  }

  .theme-header-user-surface {
    background: var(--surface-card);
  }

  .theme-divider-muted {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-divider-muted {
      border-color: color-mix(in oklch, var(--color-border) 62%, transparent);
    }
  }

  .theme-divider-soft {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-divider-soft {
      border-color: color-mix(in oklch, var(--color-border) 72%, transparent);
    }
  }

  .theme-copy-soft {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-copy-soft {
      color: color-mix(in oklch, var(--color-foreground) 78%, transparent);
    }
  }

  .theme-copy-softer {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-copy-softer {
      color: color-mix(in oklch, var(--color-foreground) 72%, transparent);
    }
  }

  .theme-copy-muted {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-copy-muted {
      color: color-mix(in oklch, var(--color-muted-foreground) 88%, transparent);
    }
  }

  .theme-copy-label {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-copy-label {
      color: color-mix(in oklch, var(--color-muted-foreground) 92%, transparent);
    }
  }

  .theme-copy-strong {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-copy-strong {
      color: color-mix(in oklch, var(--color-foreground) 84%, transparent);
    }
  }

  .theme-button-primary {
    border-color: var(--button-primary-border);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: none;
  }

  .theme-button-primary:hover {
    background: var(--button-primary-bg-hover);
  }

  .theme-button-secondary {
    border-color: var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    box-shadow: none;
  }

  .theme-button-secondary:hover {
    background: var(--button-secondary-bg-hover);
  }

  .theme-login-neutral {
    --button-secondary-border: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-neutral {
      --button-secondary-border: color-mix(in srgb,
      var(--surface-border) 88%,
      transparent);
    }
  }

  .theme-login-neutral {
    --button-secondary-bg: var(--color-card);
    --button-secondary-bg-hover: var(--color-secondary);
    --button-secondary-text: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-neutral {
      --button-secondary-text: color-mix(in oklch,
      var(--color-foreground) 88%,
      transparent);
    }
  }

  .theme-login-neutral {
    --button-secondary-shadow: none;
  }

  .theme-login-divider {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-divider {
      border-color: color-mix(in oklch, var(--color-border) 64%, transparent);
    }
  }

  .theme-login-control {
    border-color: var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    box-shadow: none;
  }

  .theme-login-provider-icon {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-provider-icon {
      color: color-mix(in oklch, var(--color-foreground) 84%, transparent);
    }
  }

  .theme-login-admin-button {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-admin-button {
      border-color: color-mix(in srgb, var(--surface-border) 88%, transparent);
    }
  }

  .theme-login-admin-button {
    background: var(--color-card);
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-login-admin-button {
      color: color-mix(in oklch, var(--color-foreground) 84%, transparent);
    }
  }

  .theme-login-admin-button {
    box-shadow: none;
  }

  .theme-button-tertiary {
    border-color: var(--button-tertiary-border);
    background: var(--button-tertiary-bg);
    color: var(--button-tertiary-text);
    box-shadow: none;
  }

  .theme-button-tertiary:hover {
    background: var(--button-tertiary-bg-hover);
  }

  .theme-button-ghost {
    color: var(--button-ghost-text);
  }

  .theme-button-ghost:hover {
    background: var(--button-ghost-hover);
  }

  .theme-control-surface {
    background: var(--button-secondary-bg);
    border-color: var(--button-secondary-border);
    color: var(--button-secondary-text);
    box-shadow: none;
  }

  .theme-control-surface:hover {
    background: var(--button-secondary-bg-hover);
  }

  .theme-menu-surface {
    background-color: var(--surface-panel);
    border-color: var(--surface-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
  }

  .theme-menu-header {
    background: var(--surface-card);
    box-shadow: inset 0 -1px 0 var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-menu-header {
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--surface-border) 76%, transparent);
    }
  }

  .theme-menu-panel {
    border: 1px solid var(--surface-border);
    background-color: var(--surface-card);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .theme-menu-separator {
    background: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-menu-separator {
      background: color-mix(in srgb, var(--surface-border) 78%, transparent);
    }
  }

  .theme-danger-action {
    border-color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-danger-action {
      border-color: color-mix(in oklch, var(--color-destructive) 36%, white 64%);
    }
  }

  .theme-danger-action {
    background-color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-danger-action {
      background-color: color-mix(in oklch, var(--color-destructive) 92%, white 8%);
    }
  }

  .theme-danger-action {
    color: var(--color-destructive-foreground);
    box-shadow: none;
  }

  .theme-danger-action:hover {
    background-color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-danger-action:hover {
      background-color: color-mix(in oklch, var(--color-destructive) 96%, black 4%);
    }
  }

  .theme-avatar-fallback {
    background-color: var(--color-muted);
    background-image: none;
  }

  .theme-session-noise {
    display: none;
  }

  .theme-session-drawer-surface, .theme-track-highlight {
    background-color: var(--color-card);
    box-shadow: none;
    background-image: none;
  }

  .theme-session-drawer-card {
    background-color: var(--color-card);
    border-color: var(--surface-border);
    box-shadow: none;
  }

  .theme-session-drawer-muted {
    background-color: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-drawer-muted {
      background-color: color-mix(in srgb, var(--color-muted) 82%, transparent);
    }
  }

  .theme-surface-panel {
    background-color: var(--surface-panel);
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
  }

  .theme-surface-card {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-surface-card {
      border: 1px solid color-mix(in oklch, var(--surface-border) 85%, transparent);
    }
  }

  .theme-surface-glass {
    background-color: var(--surface-panel);
    border: 1px solid var(--surface-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
  }

  .theme-neutral-inline-card {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-neutral-inline-card {
      border-color: color-mix(in oklch, var(--color-border) 72%, transparent);
    }
  }

  .theme-neutral-inline-card {
    background: var(--color-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-neutral-inline-card {
      background: color-mix(in oklch, var(--color-card) 88%, var(--color-background) 12%);
    }
  }

  .theme-gate-card {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-gate-card {
      border-color: color-mix(in oklch, var(--color-border) 70%, transparent);
    }
  }

  .theme-gate-card {
    background: var(--color-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-gate-card {
      background: color-mix(in oklch, var(--color-card) 85%, white 15%);
    }
  }

  .theme-status-notice {
    --status-notice-border: var(--color-border);
    --status-notice-foreground: var(--color-foreground);
    --status-notice-background: var(--color-background);
    --status-notice-icon-background: var(--status-notice-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-status-notice {
      --status-notice-icon-background: color-mix(in oklch,
      var(--status-notice-background) 84%,
      white 16%);
    }
  }

  .theme-status-notice {
    color: var(--status-notice-foreground);
  }

  .theme-status-notice--info {
    --status-notice-border: var(--color-info-border);
    --status-notice-foreground: var(--color-info-foreground);
    --status-notice-background: var(--color-info-soft);
  }

  .theme-status-notice--success {
    --status-notice-border: var(--color-success-border);
    --status-notice-foreground: var(--color-success-foreground);
    --status-notice-background: var(--color-success-soft);
  }

  .theme-status-notice--warning {
    --status-notice-border: var(--color-warning-border);
    --status-notice-foreground: var(--color-warning-foreground);
    --status-notice-background: var(--color-warning-soft);
  }

  .theme-status-notice--error {
    --status-notice-border: var(--color-error-border);
    --status-notice-foreground: var(--color-error-foreground);
    --status-notice-background: var(--color-error-soft);
  }

  .theme-status-notice--bar {
    border-inline-start: 2px solid var(--status-notice-border);
    padding-inline-start: .85rem;
  }

  .theme-status-notice--panel {
    border: 1px solid var(--status-notice-border);
    border-radius: var(--radius-sm);
    background: var(--status-notice-background);
    padding: .75rem .875rem;
  }

  .theme-status-notice__header {
    align-items: flex-start;
    gap: .75rem;
    display: flex;
  }

  .theme-status-notice__icon {
    border: 1px solid var(--status-notice-border);
    background: var(--status-notice-icon-background);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--status-notice-foreground);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .theme-status-notice__title {
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--status-notice-foreground);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
  }

  .theme-status-notice__body {
    line-height: inherit;
  }

  .theme-status-notice__title + .theme-status-notice__body {
    margin-top: .25rem;
  }

  .theme-recovery-card {
    border-color: var(--color-error-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-recovery-card {
      border-color: color-mix(in oklch, var(--color-error-border) 78%, transparent);
    }
  }

  .theme-recovery-card {
    background: var(--color-error-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-recovery-card {
      background: color-mix(in oklch, var(--color-error-soft) 78%, var(--color-background) 22%);
    }
  }

  .theme-recovery-eyebrow {
    color: var(--color-error-foreground);
  }

  .theme-session-dialog-surface {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-dialog-surface {
      border-color: color-mix(in oklch, var(--color-border) 74%, transparent);
    }
  }

  .theme-session-dialog-surface {
    background: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-dialog-surface {
      background: color-mix(in oklch, var(--color-background) 95%, transparent);
    }
  }

  .theme-session-empty-state {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-empty-state {
      border-color: color-mix(in oklch, var(--color-border) 72%, transparent);
    }
  }

  .theme-session-empty-state {
    background: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-empty-state {
      background: color-mix(in oklch, var(--color-background) 97%, var(--color-muted) 3%);
    }
  }

  .theme-session-log-overlay {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay {
      border-color: color-mix(in srgb, var(--surface-border) 88%, transparent);
    }
  }

  .theme-session-log-overlay {
    background: var(--surface-card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay {
      background: color-mix(in srgb, var(--surface-card) 94%, black 6%);
    }
  }

  .theme-session-log-overlay {
    box-shadow: 0 28px 80px #0000008a, inset 0 1px #ffffff0a;
  }

  .theme-session-log-overlay__header {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay__header {
      border-color: color-mix(in srgb, var(--surface-border) 78%, transparent);
    }
  }

  .theme-session-log-overlay__summary {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay__summary {
      border-color: color-mix(in srgb, var(--surface-border) 74%, transparent);
    }
  }

  .theme-session-log-overlay__entry {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay__entry {
      border-color: color-mix(in srgb, var(--surface-border) 74%, transparent);
    }
  }

  .theme-session-log-overlay__details {
    border-color: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-log-overlay__details {
      border-color: color-mix(in srgb, var(--session-accent-border) 72%, var(--surface-border) 28%);
    }
  }

  .theme-session-accent-banner {
    border-color: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-accent-banner {
      border-color: color-mix(in oklch, var(--session-accent-border) 74%, transparent);
    }
  }

  .theme-session-accent-banner {
    background: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-accent-banner {
      background: color-mix(in oklch, var(--session-accent-soft) 82%, var(--color-background) 18%);
    }
  }

  .theme-provider-install-tile {
    border-color: var(--surface-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-provider-install-tile {
      border-color: color-mix(in srgb, var(--surface-border) 88%, transparent);
    }
  }

  .theme-provider-install-tile {
    background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-card) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-provider-install-tile {
      background: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 98%, white 2%) 0%, color-mix(in srgb, var(--surface-card) 94%, black 6%) 100%);
    }
  }

  .theme-provider-install-tile {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-provider-install-tile {
      color: color-mix(in oklch, var(--color-foreground) 84%, transparent);
    }
  }

  .theme-provider-install-tile {
    box-shadow: inset 0 1px #ffffff14, 0 8px 16px #0000002e;
  }

  .theme-survey-slider-subtext {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-subtext {
      color: color-mix(in oklch, var(--color-foreground) 80%, transparent);
    }
  }

  .theme-survey-slider-labels {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-labels {
      color: color-mix(in oklch, var(--color-muted-foreground) 88%, transparent);
    }
  }

  .theme-survey-slider-value {
    border-color: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-value {
      border-color: color-mix(in oklch, var(--color-primary) 18%, var(--surface-border) 82%);
    }
  }

  .theme-survey-slider-value {
    background: linear-gradient(180deg, var(--surface-card), var(--surface-panel)), linear-gradient(135deg, var(--color-primary), var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-value {
      background: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, #ffffff14 8%), color-mix(in srgb, var(--surface-panel) 84%, black 16%)), linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 10%, var(--surface-card) 90%), color-mix(in oklch, var(--color-primary) 16%, var(--surface-panel) 84%));
    }
  }

  .theme-survey-slider-value {
    color: var(--color-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-value {
      color: color-mix(in oklch, var(--color-foreground) 78%, var(--color-primary) 22%);
    }
  }

  .theme-survey-slider-value {
    box-shadow: inset 0 1px 0 #ffffff29, 0 6px 16px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-survey-slider-value {
      box-shadow: inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in oklch, var(--color-primary) 8%, transparent);
    }
  }

  .theme-session-divider {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-divider {
      border-color: color-mix(in oklch, var(--color-border) 62%, transparent);
    }
  }

  .theme-playlist-panel-divider {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-panel-divider {
      border-color: color-mix(in oklch, var(--color-border) 62%, transparent);
    }
  }

  .theme-session-spotify-device-header {
    border-color: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-header {
      border-color: color-mix(in oklch, var(--session-accent-border) 40%, transparent);
    }
  }

  .theme-session-spotify-device-header {
    background: linear-gradient(135deg, var(--session-accent-soft) 0%, var(--color-background) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-header {
      background: linear-gradient(135deg, color-mix(in oklch, var(--session-accent-soft) 70%, white 30%) 0%, color-mix(in oklch, var(--color-background) 88%, var(--session-accent-soft) 12%) 100%);
    }
  }

  .theme-session-spotify-device-status {
    border-color: var(--session-accent-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-status {
      border-color: color-mix(in oklch, var(--session-accent-border) 52%, transparent);
    }
  }

  .theme-session-spotify-device-status {
    background: var(--session-accent-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-status {
      background: color-mix(in oklch, var(--session-accent-soft) 68%, var(--color-background) 32%);
    }
  }

  .theme-session-spotify-device-status--warning {
    border-color: var(--color-warning-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-status--warning {
      border-color: color-mix(in oklch, var(--color-warning-border) 72%, transparent);
    }
  }

  .theme-session-spotify-device-status--warning {
    background: var(--color-warning-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-spotify-device-status--warning {
      background: color-mix(in oklch, var(--color-warning-soft) 82%, var(--color-background) 18%);
    }
  }

  .theme-muted-surface-button {
    border-color: var(--color-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-muted-surface-button {
      border-color: color-mix(in oklch, var(--color-border) 78%, transparent);
    }
  }

  .theme-muted-surface-button {
    background: var(--color-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-muted-surface-button {
      background: color-mix(in oklch, var(--color-background) 92%, var(--color-muted) 8%);
    }
  }

  .theme-session-summary-panel {
    background: var(--session-depth-summary-surface, var(--surface-panel));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-summary-panel {
      background: var(--session-depth-summary-surface, color-mix(in srgb, var(--surface-panel) 96%, black 4%));
    }
  }

  .theme-session-summary-panel {
    box-shadow: var(--session-depth-summary-shadow, var(--session-surface-shadow, 0 24px 48px #0006));
    -webkit-backdrop-filter: var(--session-depth-summary-backdrop, none);
    backdrop-filter: var(--session-depth-summary-backdrop, none);
  }

  .theme-session-content-panel {
    background: var(--session-depth-content-surface, var(--surface-card));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-content-panel {
      background: var(--session-depth-content-surface, color-mix(in srgb, var(--surface-card) 95%, black 5%));
    }
  }

  .theme-session-content-panel {
    box-shadow: var(--session-depth-content-shadow, var(--session-surface-shadow, 0 24px 48px #0006));
    -webkit-backdrop-filter: var(--session-depth-content-backdrop, none);
    backdrop-filter: var(--session-depth-content-backdrop, none);
  }

  .theme-session-feedback--success {
    border-left-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-foreground);
  }

  .theme-session-feedback--warning {
    border-left-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-foreground);
  }

  .theme-session-feedback--error {
    border-left-color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-feedback--error {
      border-left-color: color-mix(in oklch, var(--color-destructive) 34%, white 66%);
    }
  }

  .theme-session-feedback--error {
    background: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-feedback--error {
      background: color-mix(in oklch, var(--color-destructive) 10%, white 90%);
    }
  }

  .theme-session-feedback--error {
    color: var(--color-destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-feedback--error {
      color: color-mix(in oklch, var(--color-destructive) 78%, black 22%);
    }
  }

  .theme-session-meta-badge {
    border: 1px solid var(--session-accent-border);
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--session-accent-soft) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-meta-badge {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 88%, #ffffff0a 12%) 0%, color-mix(in srgb, var(--session-accent-soft) 100%, transparent) 100%);
    }
  }

  .theme-session-meta-badge {
    color: var(--session-accent-ink);
    box-shadow: inset 0 1px 0 #ffffff14, 0 10px 22px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-meta-badge {
      box-shadow: inset 0 1px 0 #ffffff14, 0 10px 22px color-mix(in srgb, var(--color-primary) 14%, transparent);
    }
  }

  .theme-session-meta-badge--strong {
    border: 1px solid var(--session-accent-border);
    background: linear-gradient(180deg, var(--session-accent-soft-strong) 0%, var(--session-accent-soft-strong) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-meta-badge--strong {
      background: linear-gradient(180deg, color-mix(in srgb, var(--session-accent-soft-strong) 94%, #ffffff0d 6%) 0%, color-mix(in srgb, var(--session-accent-soft-strong) 84%, var(--session-accent-soft) 16%) 100%);
    }
  }

  .theme-session-meta-badge--strong {
    color: var(--session-accent-ink);
    box-shadow: inset 0 1px 0 #ffffff14, 0 10px 22px var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-session-meta-badge--strong {
      box-shadow: inset 0 1px 0 #ffffff14, 0 10px 22px color-mix(in srgb, var(--color-primary) 14%, transparent);
    }
  }

  .theme-playlist-empty-glow {
    background: radial-gradient(circle at top, var(--page-glow), transparent 58%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-empty-glow {
      background: radial-gradient(circle at top, color-mix(in srgb, var(--page-glow) 18%, transparent), transparent 58%);
    }
  }

  .theme-artwork-tilt-shine {
    background: radial-gradient(circle at var(--playlist-tilt-shine-x, 50%) var(--playlist-tilt-shine-y, 30%), #ffffff4d, transparent 40%);
  }

  .theme-playlist-item--selected {
    background: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-item--selected {
      background: color-mix(in oklch, var(--color-primary) 9%, white 91%);
    }
  }

  .theme-playlist-item--selected-drawer {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-item--selected-drawer {
      background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 10%, white 90%), color-mix(in oklch, var(--color-primary) 6%, white 94%));
    }
  }

  .theme-playlist-row--current {
    background: var(--playlist-row-current-bg);
  }

  .theme-playlist-row--pending {
    background: var(--playlist-row-pending-bg);
  }

  .theme-playlist-row--restricted {
    background: var(--playlist-row-restricted-bg);
  }

  .theme-playlist-row-index {
    background: var(--playlist-row-index-bg);
    color: var(--playlist-row-index-text);
  }

  .theme-playlist-row-index--current {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-row-index--current {
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 88%, white 12%) 0%, color-mix(in srgb, var(--color-primary) 94%, black 6%) 100%);
    }
  }

  .theme-playlist-row-index--current {
    color: var(--color-primary-foreground);
  }

  .theme-playlist-row-index--pending {
    background: var(--color-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-row-index--pending {
      background: color-mix(in srgb, var(--color-primary) 22%, var(--surface-card) 78%);
    }
  }

  .theme-playlist-row-index--pending {
    color: var(--session-accent-ink);
  }

  .theme-playlist-row-index--restricted {
    background: var(--color-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-row-index--restricted {
      background: color-mix(in oklch, var(--color-muted) 88%, transparent);
    }
  }

  .theme-playlist-row-index--restricted {
    color: var(--color-muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .theme-playlist-row-index--restricted {
      color: color-mix(in oklch, var(--color-muted-foreground) 70%, transparent);
    }
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .scrollbar-hide::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .scrollbar-default, .scrollbar-theme {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
  }

  .scrollbar-edge {
    scrollbar-gutter: stable;
  }

  .scrollbar-default {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
  }

  .scrollbar-default::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .scrollbar-theme {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  .scrollbar-theme::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  .scrollbar-theme::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
  }

  .scrollbar-theme::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-surface, var(--scrollbar-thumb));
    border: var(--scrollbar-padding) solid var(--scrollbar-thumb-border);
    box-shadow: var(--scrollbar-thumb-shadow);
    background-clip: content-box;
    border-radius: 9999px;
    transition: background .16s, box-shadow .16s;
  }

  .scrollbar-theme::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-surface-hover, var(--scrollbar-thumb-hover));
    box-shadow: var(--scrollbar-thumb-shadow-hover);
  }

  html[data-app-theme="psone"] :is(.theme-surface-panel, .theme-surface-card, .theme-surface-glass, .theme-menu-surface, .theme-menu-panel, .theme-centered-page-card, .theme-session-surface-card, .theme-session-drawer-card, .theme-session-drawer-surface, .theme-track-highlight) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #0d2289;
    background-image: linear-gradient(#0d2289, #06093b);
    border: 1px solid #c6c6c6;
    box-shadow: inset 0 0 0 2px #ffffffd1, inset 0 0 8px 4px #0006, 5px 6px #000000a8;
  }

  html[data-app-theme="psone"] :is(.theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-control-surface, .theme-login-control, .theme-login-admin-button) {
    text-transform: uppercase;
    text-shadow: 2px 2px #000;
    box-shadow: none;
    font-family: "Final Fantasy Script Collection - Final Fantasy VII", var(--font-app-sans), sans-serif;
    border: 3px solid #ffffff38;
    border-width: 3px 0;
  }

  html[data-app-theme="psone"] .psone-primary-button {
    border-color: var(--button-primary-border);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
  }

  html[data-app-theme="psone"] .psone-primary-button:hover {
    background: var(--button-primary-bg-hover);
  }

  html[data-app-theme="psone"] :is(.psone-pairing-button, .psone-baseline-button, .psone-player-button) {
    box-shadow: none;
    font-family: "Final Fantasy Script Collection - Final Fantasy VII", var(--font-app-sans), sans-serif;
    text-shadow: 2px 2px #000;
    text-transform: uppercase;
    border-style: solid;
    border-color: #0000;
    border-image: linear-gradient(to right, #0000, #fff3, #0000) 1;
    border-radius: 0;
    color: #fff !important;
    background: linear-gradient(to right, #0000, #3e8ca5, #0000) !important;
    border-width: 3px 0 !important;
  }

  html[data-app-theme="psone"] :is(.psone-pairing-button, .psone-baseline-button, .psone-player-button):hover:not(:disabled) {
    background: linear-gradient(to right, #0000, #49a7c6, #0000) !important;
  }

  html[data-app-theme="psone"] .psone-baseline-button-success {
    background: linear-gradient(to right, #0000, #4ea35b, #0000) !important;
  }

  html[data-app-theme="psone"] .psone-baseline-button-success:hover:not(:disabled) {
    background: linear-gradient(to right, #0000, #5dc66d, #0000) !important;
  }

  html[data-app-theme="psone"] :is(.psone-pairing-button, .psone-baseline-button, .psone-player-button):disabled {
    pointer-events: none;
    filter: none;
    opacity: 1;
    color: #aeafae !important;
    background: linear-gradient(to right, #0000, #484a48, #0000) !important;
  }

  html[data-app-theme="psone"] [data-slot="button"][data-variant="destructive"] {
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px #000;
    background: linear-gradient(90deg, #0000, #b62f28, #0000);
    border: 3px solid #ffffff38;
    border-width: 3px 0;
  }

  html[data-app-theme="psone"] [data-slot="button"][data-variant="destructive"]:hover {
    background: linear-gradient(90deg, #0000, #e93f36, #0000);
  }

  html[data-app-theme="psone"] [data-slot="button"]:active:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(2px);
  }

  html[data-app-theme="psone"] :is(.type-page-title, .type-section-title, .type-display-title, .type-display-brand, .theme-menu-header) {
    text-transform: uppercase;
    text-shadow: 3px 3px #000;
    letter-spacing: 0;
    font-family: "Final Fantasy Script Collection - Final Fantasy VII", var(--font-app-sans), sans-serif;
  }

  html[data-app-theme="psone"] [data-login-hero] .type-display-title {
    margin-top: .7rem;
    margin-bottom: .4rem;
    line-height: 1.3;
  }

  html[data-app-theme="psone"] [data-login-hero] .type-eyebrow {
    line-height: 1.4;
  }

  html[data-app-theme="psone"] [data-login-hero] .type-display-title + .type-eyebrow {
    margin-top: .55rem;
  }

  html[data-app-theme="psone"] [data-login-hero] .type-eyebrow + .type-eyebrow {
    margin-top: .7rem;
  }

  html[data-app-theme="psone"] [data-login-hero] .type-display-lead {
    margin-top: 1rem;
    line-height: 1.65;
  }

  html[data-app-theme="psone"] .theme-header-surface, html[data-app-theme="psone"] .theme-header-user-surface {
    background: linear-gradient(#0d2289, #06093b);
    border-bottom: 3px double #c6c6c6;
    box-shadow: inset 0 -2px #ffffff9e, 0 6px #0000009e;
  }

  html[data-app-theme="psone"] .theme-menu-header {
    background: #00000057;
    box-shadow: inset 0 -1px #ffffff6b;
  }

  html[data-app-theme="psone"] :is(.type-eyebrow, .theme-copy-label, [data-slot="badge"]) {
    font-family: "Pixel Cyr Normal", var(--font-app-mono), monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 2px 2px #000;
  }

  html[data-app-theme="psone"] :is(.psone-dark-container, .psone-light-container) {
    isolation: isolate;
    border-radius: 8px;
    position: relative;
    box-shadow: inset 0 0 2px 2px #0000004d;
    border: 1px solid #c6c6c6 !important;
  }

  html[data-app-theme="psone"] .psone-dark-container {
    background: #0006 !important;
  }

  html[data-app-theme="psone"] .psone-light-container {
    background: #fff3 !important;
  }

  html[data-app-theme="psone"] :is(.psone-dark-container, .psone-light-container):before {
    content: "";
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none;
    border: 2px solid #fff;
    border-radius: 7px;
    position: absolute;
    inset: 0;
  }

  html[data-app-theme="psone"] .psone-dark-container.theme-menu-header {
    overflow: visible;
  }

  html[data-app-theme="psone"] .psone-dark-container.theme-menu-header :is(h2, h3) {
    color: #d3d3d3;
    text-transform: uppercase;
    text-shadow: 4px 4px #000;
    transform-origin: 0 0;
    margin-top: 0;
    margin-bottom: .5rem;
    margin-left: 10px;
    font-family: Final Fantasy VII PSone Original, sans-serif;
    font-size: 50px;
    font-weight: normal;
    line-height: 4px;
    transform: scale(1, .5);
  }

  html[data-app-theme="psone"] .theme-menu-separator {
    background: linear-gradient(90deg, #0000, #c6c6c6, #0000);
  }

  html[data-app-theme="psone"] .theme-page-bg, html[data-app-theme="psone"] .theme-session-music-bg, html[data-app-theme="psone"] .theme-session-page-root {
    background-color: #00000a;
    background-image: repeating-linear-gradient(0deg, #ffffff06 0 1px, #0000 1px 4px), radial-gradient(circle at 50% 0, #3e8ca52e, #0000 52%), linear-gradient(145deg, #000005, #010316 55%, #050a34);
  }

  html[data-app-theme="psone"] .theme-shell-glow, html[data-app-theme="psone"] .theme-page-glow {
    opacity: .46;
    background: radial-gradient(circle at 50% 10%, #49a7c638, #0000 58%);
  }

  html[data-app-theme="psone"] .theme-session-page-root {
    --session-section-radius-sm: .35rem;
    --session-section-radius-md: .45rem;
    --session-section-radius-lg: .55rem;
    --session-section-radius-xl: .65rem;
    --session-surface-border: #c6c6c6;
    --session-surface-highlight: #ffffffb3;
    --session-surface-rim: #ffffffb3;
    --session-surface-shadow: 5px 6px 0 #0000009e;
    --session-surface-contact-shadow: inset 0 0 0 2px #ffffffb8;
    --session-surface-inset-shadow: inset 0 0 8px 4px #00000061;
    --session-surface-backdrop: none;
    --session-surface-stage-glow: transparent;
  }

  html[data-app-theme="psone"] [data-psone-progress-card] {
    min-height: 6.25rem;
    padding-bottom: 2.15rem;
  }

  html[data-app-theme="psone"] [data-psone-progress] {
    background: none !important;
  }

  html[data-app-theme="psone"] [data-psone-progress]:before {
    content: "";
    background: #0000009e;
    border: 1px solid #c6c6c680;
    height: 18px;
    position: absolute;
    bottom: .35rem;
    left: .4rem;
    right: .4rem;
    box-shadow: inset 0 0 0 3px #00000061;
  }

  html[data-app-theme="psone"] [data-psone-progress-fill] {
    max-width: calc(100% - .8rem - 6px);
    bottom: calc(.35rem + 3px);
    left: calc(.4rem + 3px);
    box-shadow: 0 0 8px #4ea35b7a;
    background: linear-gradient(90deg, #2c6776, #4ea35b) !important;
    height: 12px !important;
    top: auto !important;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]) {
    height: 2rem;
  }

  html[data-app-theme="psone"] .survey-scale-slider {
    --psone-range-percent: var(--survey-slider-percent);
    --survey-slider-track-h: 18px;
    --survey-slider-thumb-size: 22px;
  }

  html[data-app-theme="psone"] [data-transport-progress] {
    --psone-range-percent: var(--transport-progress-pct);
    --transport-progress-track-h: 18px;
    --transport-progress-thumb-size: 22px;
  }

  html[data-app-theme="psone"] [data-transport-volume] {
    --psone-range-percent: var(--transport-volume-pct);
    --transport-volume-track-h: 18px;
    --transport-volume-thumb-size: 22px;
  }

  html[data-app-theme="psone"] [data-transport-progress-effects] {
    display: none;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #2c6776 0, #4ea35b var(--psone-range-percent), #00000080 var(--psone-range-percent), #00000080 100%);
    height: 18px;
    box-shadow: none;
    border: 3px solid #00000080;
    border-radius: 0;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-track {
    height: 12px;
    box-shadow: none;
    background: #00000080;
    border: 3px solid #00000080;
    border-radius: 0;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-progress {
    background: linear-gradient(to right, #2c6776, #4ea35b);
    border-radius: 0;
    height: 12px;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
    background: linear-gradient(#504f51, #3c3d3f);
    border: 2px solid #f4f251;
    border-radius: 0;
    width: 10px;
    height: 22px;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-thumb {
    background: linear-gradient(#504f51, #3c3d3f);
    border: 2px solid #f4f251;
    border-radius: 0;
    width: 10px;
    height: 22px;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
    margin-top: -5px;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):hover::-webkit-slider-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):hover::-moz-range-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):focus-visible::-webkit-slider-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):focus-visible::-moz-range-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):active::-webkit-slider-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):active::-moz-range-thumb {
    background: linear-gradient(#5f5e60, #3c3d3f);
    border-color: #fff;
    box-shadow: 2px 2px #000, 0 0 0 2px #f4f25180;
  }

  html[data-app-theme="psone"] [data-survey-scale] .theme-survey-slider-value-text {
    transform: translateY(-6px);
  }

  html[data-app-theme="psone"] :is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
    color: #fff;
    box-shadow: none;
    background-color: #00000040;
    background-image: linear-gradient(90deg, #fff 0 55%, #0000 55% 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.4rem 2px;
    border-color: #0000 #0000 #c6c6c6;
  }

  html[data-app-theme="psone"] :is(input, textarea)::placeholder {
    color: #c6c843;
    opacity: 1;
  }

  html[data-app-theme="psone"] :is(button, [role="button"]):focus-visible, html[data-app-theme="psone"] :is(input, textarea, select):focus-visible {
    outline-offset: 3px;
    outline: 2px solid #f4f251;
  }

  html[data-app-theme="psone"] a {
    color: #f4f251;
  }

  html[data-app-theme="psone"] button:disabled {
    color: #aeafae;
    filter: grayscale(.7);
  }

  html[data-app-theme="system"] :is(.theme-page-bg, .theme-session-music-bg, .theme-session-page-root) {
    background-color: #000;
    background-image: linear-gradient(90deg, #fff 21px, #0000 1%), linear-gradient(#fff 21px, #0000 1%);
    background-position: center;
    background-size: 22px 22px;
    background-attachment: fixed;
  }

  html[data-app-theme="system"] :is(.theme-shell-glow, .theme-page-glow) {
    display: none;
  }

  html[data-app-theme="system"] :is(.theme-surface-panel, .theme-surface-card, .theme-surface-glass, .theme-menu-surface, .theme-menu-panel, .theme-centered-page-card, .theme-session-surface-card, .theme-session-drawer-card, .theme-session-drawer-surface, .theme-track-highlight, .theme-neutral-inline-card, .theme-gate-card, .theme-recovery-card) {
    color: #000;
    -webkit-backdrop-filter: none;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="system"] .theme-session-surface-card:before {
    display: none;
  }

  html[data-app-theme="system"] :is(.theme-header-surface, .theme-header-user-surface) {
    background: #fff;
    border-bottom: 2px solid #000;
    box-shadow: 0 2px #000;
  }

  html[data-app-theme="system"] .theme-header-divider {
    background: #000;
    height: 2px;
  }

  html[data-app-theme="system"] .theme-menu-header {
    box-shadow: none;
    background: repeating-linear-gradient(#000 0 1px, #fff 1px 3px);
    border-bottom: 2px solid #000;
  }

  html[data-app-theme="system"] .theme-menu-header > * {
    background: #fff;
    width: fit-content;
    padding-inline: .45rem;
  }

  html[data-app-theme="system"] .theme-menu-separator {
    background: #000;
    height: 2px;
  }

  html[data-app-theme="system"] :is(.type-page-title, .type-section-title, .type-display-title, .type-display-brand, .theme-menu-header, [data-slot="card-title"], [data-slot="dialog-title"]) {
    color: #000;
    letter-spacing: 0;
    text-shadow: none;
    font-family: System Chicago, "System Chicago 12", sans-serif;
    font-weight: normal;
  }

  html[data-app-theme="system"] :is(.type-eyebrow, .theme-copy-label, [data-slot="badge"]) {
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-family: "System Chicago 12", sans-serif;
  }

  html[data-app-theme="system"] [data-participant-survey] .type-section-title {
    font-size: clamp(1.5rem, 1.4rem + .35vw, 1.85rem);
    line-height: 1.15;
  }

  html[data-app-theme="system"] [data-participant-survey] .type-section-body {
    font-size: clamp(1.05rem, 1rem + .2vw, 1.25rem);
    line-height: 1.45;
  }

  html[data-app-theme="system"] [data-survey-scale] > label {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  html[data-app-theme="system"] [data-survey-scale] .theme-survey-slider-subtext {
    font-size: 1.0625rem;
    line-height: 1.4;
  }

  html[data-app-theme="system"] [data-survey-scale] .theme-survey-slider-labels {
    margin-top: .45rem;
    font-size: 1rem;
    line-height: 1.25;
  }

  html[data-app-theme="system"] [data-survey-scale] .theme-survey-slider-value {
    color: #000;
    background: #fff;
    border: 2px solid #000;
    min-width: 3rem;
    height: 2rem;
    padding-inline: .45rem;
    font-family: "System Chicago 12", sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 1;
    box-shadow: 2px 2px #000;
    border-radius: 0 !important;
  }

  html[data-app-theme="system"] [data-baseline-capture] h3 {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  html[data-app-theme="system"] .baseline-action-card-eyebrow {
    letter-spacing: 0;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.15;
  }

  html[data-app-theme="system"] .baseline-action-card-label {
    font-size: 1.35rem;
    line-height: 1.15;
  }

  html[data-app-theme="system"] .baseline-action-card-description {
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  html[data-app-theme="system"] .baseline-action-card-meta {
    letter-spacing: 0;
    text-transform: none;
    font-size: 1rem;
  }

  html[data-app-theme="system"] .baseline-status-message {
    font-size: 1rem;
    line-height: 1.4;
  }

  html[data-app-theme="system"] [data-local-mp3-player] h1 {
    font-size: clamp(2rem, 1.85rem + .5vw, 2.5rem);
    line-height: 1.1;
  }

  html[data-app-theme="system"] [data-local-mp3-player] h2 {
    font-size: clamp(1.55rem, 1.45rem + .3vw, 1.85rem);
    line-height: 1.2;
  }

  html[data-app-theme="system"] [data-local-mp3-player] p {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  html[data-app-theme="system"] [data-local-mp3-player] label {
    font-size: 1.1875rem;
    line-height: 1.3;
  }

  html[data-app-theme="system"] [data-local-track-copy] > span:first-child {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  html[data-app-theme="system"] [data-local-track-copy] > span:last-child {
    margin-top: .25rem;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  html[data-app-theme="system"] [data-ui-test="transport-track-title"] {
    font-size: 1.4375rem;
    line-height: 1.2;
  }

  html[data-app-theme="system"] [data-ui-test="transport-track-artist"] {
    margin-top: .15rem;
    font-size: 1.1875rem;
    line-height: 1.25;
  }

  html[data-app-theme="system"] [data-local-mp3-player] [data-slot="button"] {
    font-size: 1.1875rem;
  }

  html[data-app-theme="system"] :is(.theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-control-surface, .theme-login-control, .theme-login-admin-button, [data-slot="button"]) {
    color: #000;
    min-width: 59px;
    box-shadow: none;
    text-shadow: none;
    background: #fff;
    border: 5.5px solid #0000;
    border-image: url("/vendor/system-css/button.svg") 30;
    border-radius: 0;
    font-family: "System Chicago 12", sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    transform: none;
  }

  html[data-app-theme="system"] button.system-btn, html[data-app-theme="system"] button.system-btn-default {
    min-width: 59px;
    min-height: 20px;
    box-shadow: none;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    border: 5.5px solid #0000;
    border-image: url("/vendor/system-css/button.svg") 30;
    border-radius: 0;
    font-family: "System Chicago 12", sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    transform: none;
    color: #000 !important;
    background: #fff !important;
  }

  html[data-app-theme="system"] button.system-btn-default {
    border-width: .5em;
    border-image: url("/vendor/system-css/button-default.svg") 60;
  }

  html[data-app-theme="system"] button:is(.system-btn, .system-btn-default):is(:hover, :focus-visible):not(:disabled) {
    transform: none;
    color: #000 !important;
    background: #fff !important;
  }

  html[data-app-theme="system"] button:is(.system-btn, .system-btn-default):active:not(:disabled) {
    border-radius: 6px;
    color: #fff !important;
    background: #000 !important;
  }

  html[data-app-theme="system"] button:is(.system-btn, .system-btn-default):disabled {
    filter: none;
    opacity: 1;
    color: #a5a5a5 !important;
    background: #fff !important;
  }

  html[data-app-theme="system"] :is(.theme-button-primary, [data-slot="button"][data-variant="default"]) {
    border-width: .5em;
    border-image: url("/vendor/system-css/button-default.svg") 60;
  }

  html[data-app-theme="system"] :is(.theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-control-surface, .theme-login-control, .theme-login-admin-button, [data-slot="button"]):hover:not(:disabled) {
    color: #000;
    background: #fff;
    transform: none;
  }

  html[data-app-theme="system"] :is(.theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-control-surface, .theme-login-control, .theme-login-admin-button, [data-slot="button"]):active:not(:disabled) {
    color: #fff;
    background: #000;
    border-radius: 6px;
    transform: none;
  }

  html[data-app-theme="system"] [data-slot="button"][data-variant="destructive"] {
    color: #fff;
    background: #000;
  }

  html[data-app-theme="system"] button:disabled {
    color: #a5a5a5;
    filter: none;
    opacity: 1;
  }

  html[data-app-theme="system"] :is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
    color: #000;
    box-shadow: none;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 0;
    font-family: "System Chicago 12", sans-serif;
    font-size: 18px;
  }

  html[data-app-theme="system"] select {
    appearance: none;
    background-image: url("/vendor/system-css/select-button.svg");
    background-position: right 4px top 4px;
    background-repeat: no-repeat;
    min-height: 28px;
    padding-right: 1.8rem;
  }

  html[data-app-theme="system"] :is(input, textarea)::placeholder {
    color: #707070;
    opacity: 1;
  }

  html[data-app-theme="system"] :is(input, textarea, select):focus-visible {
    color: #fff;
    background-color: #000;
    outline: none;
  }

  html[data-app-theme="system"] :is(button, [role="button"]):focus-visible {
    outline-offset: 3px;
    outline: 2px dotted #000;
  }

  html[data-app-theme="system"] a {
    color: #000;
    text-underline-offset: 2px;
    text-decoration: underline;
  }

  html[data-app-theme="system"] [data-slot="badge"] {
    color: #000;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
  }

  html[data-app-theme="system"] [data-slot="badge"][data-variant="default"] {
    color: #fff;
    background: #000;
  }

  html[data-app-theme="system"] [data-slot="dropdown-menu-content"] {
    padding: 4px;
  }

  html[data-app-theme="system"] [data-slot="dropdown-menu-item"] {
    border-radius: 0;
    font-family: "System Chicago 12", sans-serif;
    font-size: 18px;
  }

  html[data-app-theme="system"] [data-slot="dropdown-menu-item"]:is(:hover, :focus-visible), html[data-app-theme="system"] [data-slot="dropdown-menu-item"][aria-current="true"] {
    color: #fff;
    background: #000;
  }

  html[data-app-theme="system"] [data-slot="dropdown-menu-item"]:is(:hover, :focus-visible) svg, html[data-app-theme="system"] [data-slot="dropdown-menu-item"][aria-current="true"] svg {
    color: #fff;
  }

  html[data-app-theme="system"] .theme-session-page-root {
    --session-section-radius-sm: 0;
    --session-section-radius-md: 0;
    --session-section-radius-lg: 0;
    --session-section-radius-xl: 0;
    --session-surface-border: #000;
    --session-surface-highlight: transparent;
    --session-surface-rim: transparent;
    --session-surface-shadow: 2px 2px 0 #000;
    --session-surface-contact-shadow: none;
    --session-surface-inset-shadow: none;
    --session-surface-backdrop: none;
    --session-surface-stage-glow: transparent;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]) {
    height: 22px;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-runnable-track {
    height: 12px;
    box-shadow: none;
    background: repeating-linear-gradient(45deg, #000 0 1px, #fff 1px 3px);
    border: 2px solid #000;
    border-radius: 0;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-track {
    background: repeating-linear-gradient(45deg, #000 0 1px, #fff 1px 3px);
    border: 2px solid #000;
    border-radius: 0;
    height: 8px;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    width: 18px;
    height: 22px;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-thumb {
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    width: 18px;
    height: 22px;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="system"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
    margin-top: -7px;
  }

  html[data-app-theme="system"] [data-transport-progress-effects] {
    display: none;
  }

  html[data-app-theme="system"] :is(.theme-session-feedback--success, .theme-session-feedback--warning, .theme-session-feedback--error, .theme-status-notice--panel) {
    color: #000;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 2px 2px #000;
  }

  html[data-app-theme="system"] .theme-danger-action {
    color: #fff;
    background: #000;
    border-color: #000;
  }

  html[data-app-theme="system"] :is(.theme-divider-muted, .theme-divider-soft, .theme-session-divider, .theme-playlist-panel-divider) {
    border-color: #000;
  }

  html[data-app-theme="system"] :is(.theme-copy-soft, .theme-copy-softer, .theme-copy-muted, .theme-copy-label, .theme-copy-strong) {
    color: #000;
  }

  html[data-app-theme="system"] .scrollbar-theme, html[data-app-theme="system"] [data-slot="scroll-area"] {
    scrollbar-width: auto;
    scrollbar-color: #000 #fff;
  }

  html[data-app-theme="system"] :is(.scrollbar-theme, [data-slot="scroll-area"])::-webkit-scrollbar-track {
    background-color: #fff;
    background-image: linear-gradient(45deg, #000 25%, #0000 25% 75%, #000 75%), linear-gradient(45deg, #000 25%, #0000 25% 75%, #000 75%), none;
    background-position: 0 0, 2px 2px;
    background-repeat: repeat, repeat, repeat;
    background-size: 4px 4px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    border-left: 2px solid #000;
    border-radius: 0;
  }

  html[data-app-theme="system"]::-webkit-scrollbar-track {
    background-color: #fff;
    background-image: linear-gradient(45deg, #000 25%, #0000 25% 75%, #000 75%), linear-gradient(45deg, #000 25%, #0000 25% 75%, #000 75%), none;
    background-position: 0 0, 2px 2px;
    background-repeat: repeat, repeat, repeat;
    background-size: 4px 4px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    border-left: 2px solid #000;
    border-radius: 0;
  }

  html[data-app-theme="system"] :is(.scrollbar-theme, [data-slot="scroll-area"])::-webkit-scrollbar-thumb {
    box-shadow: none;
    background: #fff;
    border: 2px solid #000;
    border-right: 0;
    border-radius: 0;
  }

  html[data-app-theme="system"]::-webkit-scrollbar-thumb {
    box-shadow: none;
    background: #fff;
    border: 2px solid #000;
    border-right: 0;
    border-radius: 0;
  }

  html[data-app-theme="system"] :is(.scrollbar-theme, [data-slot="scroll-area"])::-webkit-scrollbar-thumb:hover {
    background: #000;
  }

  html[data-app-theme="system"]::-webkit-scrollbar-thumb:hover {
    background: #000;
  }
}

@font-face {
  font-family: Final Fantasy Script Collection \- Final Fantasy VII;
  src: url("/vendor/psone/Final_Fantasy_VII.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  size-adjust: 210%;
  ascent-override: 84%;
  descent-override: 16%;
  line-gap-override: 0%;
}

@font-face {
  font-family: Final Fantasy VII PSone Original;
  src: url("/vendor/psone/Final_Fantasy_VII.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: Pixel Cyr Normal;
  src: url("/vendor/psone/pixcyr2.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: RationalTWDisplay;
  src: url("/vendor/psone/RationalTWDisplay.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: System Chicago;
  src: url("/vendor/system-css/ChicagoFLF.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "System Chicago 12";
  src: url("/vendor/system-css/ChiKareGo2.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "System Geneva 9";
  src: url("/vendor/system-css/FindersKeepers.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: System Monaco;
  src: url("/vendor/system-css/monaco.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes imagsEqPulse {
  0%, 100% {
    opacity: .7;
    transform: scaleY(.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes readingStatusPulse {
  0%, 100% {
    filter: drop-shadow(0 0 .02rem);
    transform: scale(.98);
  }

  22% {
    filter: drop-shadow(0 0 .08rem);
    transform: scale(1.03);
  }

  38% {
    filter: drop-shadow(0 0 .04rem);
    transform: scale(.99);
  }

  56% {
    filter: drop-shadow(0 0 .06rem);
    transform: scale(1.01);
  }
}

@keyframes sessionWorkspaceAlertPulse {
  0%, 100% {
    opacity: .32;
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-error) 24%, transparent), 0 0 0 .08rem color-mix(in oklch, var(--color-error) 36%, transparent);
  }

  50% {
    opacity: .82;
    box-shadow: 0 0 0 .42rem color-mix(in oklch, var(--color-error) 12%, transparent), 0 0 0 .14rem color-mix(in oklch, var(--color-error) 42%, transparent);
  }
}

.reading-status-indicator {
  will-change: transform, filter;
  filter: drop-shadow(0 0 .03rem);
}

.reading-status-indicator--pulse {
  animation: 1.1s cubic-bezier(.34, 1.32, .64, 1) infinite readingStatusPulse;
}

.session-workspace-alert-button {
  overflow: visible;
}

.session-workspace-alert-button__pulse {
  will-change: opacity, box-shadow;
  animation: 1.45s cubic-bezier(.22, 1, .36, 1) infinite sessionWorkspaceAlertPulse;
}

.theme-reading-surface {
  background-color: var(--surface-panel);
}

@supports (color: color-mix(in lab, red, red)) {
  .theme-reading-surface {
    background-color: color-mix(in oklch, var(--surface-panel) 88%, white 12%);
  }
}

.theme-reading-surface {
  background-image: linear-gradient(135deg, var(--page-bg-from) 0%, var(--page-bg-from) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .theme-reading-surface {
    background-image: linear-gradient(135deg, color-mix(in oklch, var(--page-bg-from) 86%, white 14%) 0%, color-mix(in oklch, color-mix(in oklch, var(--page-bg-from) 50%, var(--page-bg-to) 50%) 90%, white 10%) 100%);
  }
}

.theme-reading-surface {
  border: 1px solid var(--surface-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .theme-reading-surface {
    border: 1px solid color-mix(in oklch, var(--surface-border) 82%, white 18%);
  }
}

.theme-reading-surface {
  box-shadow: inset 0 1px #ffffff9e;
}

@keyframes sessionSideDrawerIn {
  0% {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sessionSideDrawerOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }
}

@keyframes sessionSideDrawerInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sessionSideDrawerOutRight {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.session-side-drawer {
  will-change: transform, opacity;
}

.session-side-drawer[data-state="open"] {
  animation: .18s cubic-bezier(.22, 1, .36, 1) forwards sessionSideDrawerIn !important;
}

.session-side-drawer[data-state="closed"] {
  animation: .14s cubic-bezier(.4, 0, 1, 1) forwards sessionSideDrawerOut !important;
}

.session-side-drawer--from-right[data-state="open"] {
  animation: .24s cubic-bezier(.22, 1, .36, 1) forwards sessionSideDrawerInRight !important;
}

.session-side-drawer--from-right[data-state="closed"] {
  animation: .18s cubic-bezier(.4, 0, .2, 1) forwards sessionSideDrawerOutRight !important;
}

@media (prefers-reduced-motion: reduce) {
  .reading-status-indicator--pulse, .session-workspace-alert-button__pulse, .session-side-drawer[data-state="open"], .session-side-drawer[data-state="closed"] {
    animation: none !important;
  }

  .session-side-drawer[data-state="open"], .session-side-drawer[data-state="closed"] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html[data-app-theme="light"] body, html[data-app-theme="light"] :is(.theme-page-bg, .theme-session-page-root) {
  background-color: #e8f8ff;
  background-image: radial-gradient(circle at 60.1% 43.1%, #ffffff63 0%, #a3f5c724 4%, #0000 9%), radial-gradient(circle at 52.7% 28.2%, #ffffff78 0%, #a3c2f52b 4%, #0000 8%), radial-gradient(circle at 25% 80%, #fff6 0%, #f5b9a324 4%, #0000 9%), radial-gradient(circle at 50.1% 63.4%, #ffffff78 0%, #c4f5a32b 4%, #0000 8%), radial-gradient(circle at 83.7% 9.4%, #ffffff6b 0%, #fad59e26 3%, #0000 7%), radial-gradient(circle at 6.2% 20.8%, #ffffff5c 0%, #c4f5a321 4%, #0000 9%), radial-gradient(circle at 17.3% 76.6%, #ffffff6e 0%, #a3dff526 3%, #0000 7%), radial-gradient(circle at 45% 8.2%, #ffffff80 0%, #b8f5a32e 2%, #0000 4%), radial-gradient(circle at 7.5% 66%, #fff3, #0000 6%), radial-gradient(circle at 8.8% 94.4%, #ffffff40, #0000 4%), radial-gradient(circle at 11.1% 1.6%, #ffffff29, #0000 4%), radial-gradient(circle at 90% 7.8%, #ffffff40, #0000 6%), radial-gradient(circle at 70.7% 18%, #ffffff38, #0000 5%), radial-gradient(circle at 99.6% 56.3%, #ffffff26, #0000 7%), radial-gradient(circle at 33.7% 59.6%, #ffffff36, #0000 4%), radial-gradient(circle at 45% 84.3%, #ffffff42, #0000 6%), radial-gradient(circle at 43.2% 54.5%, #ffffff14, #0000 3%), radial-gradient(circle at 31.3% 78.6%, #ffffff14, #0000 7%), linear-gradient(160deg, #99dcf5 0%, #b5eed9 42%, #e5f2d9 74%, #fdf8ed 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

html[data-app-theme="light"] body {
  font-family: Trebuchet MS, Lucida Grande, Segoe UI, system-ui, sans-serif;
}

html[data-app-theme="light"] .theme-session-page-root {
  --session-section-radius-sm: .9rem;
  --session-section-radius-md: 1rem;
  --session-section-radius-lg: 1.15rem;
  --session-section-radius-xl: 1.35rem;
  --session-surface-border: #ffffffdb;
  --session-surface-highlight: #fffffff2;
  --session-surface-rim: #69a6342e;
  --session-surface-shadow: 0 12px 34px #3c6f1826,
    0 3px 10px #dd6f0012;
  --session-surface-contact-shadow: 0 0 0 1px #66993e1f;
  --session-surface-inset-shadow: inset 0 1px 0 #fffffff5,
    inset 0 -1px 0 #52911d14;
  --session-surface-backdrop: blur(16px) saturate(1.32);
  --session-surface-stage-glow: #88cf4129;
}

html[data-app-theme="light"] :is(.theme-control-surface, .theme-menu-panel, .theme-menu-surface, .theme-session-drawer-surface, .theme-session-drawer-card, .theme-track-highlight, .theme-surface-glass, .theme-surface-panel, .theme-centered-page-card, [data-slot="card"], [data-slot="dialog-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"]) {
  -webkit-backdrop-filter: blur(14px) saturate(1.32);
  background: linear-gradient(#ffffffc7, #f8fdf294);
  border-color: #ffffffdb;
  box-shadow: 0 8px 28px #3d701824, 0 2px 8px #dd6f0012, inset 0 1px #fffffffa, inset 0 -1px #52911d14;
}

html[data-app-theme="light"] .theme-session-surface-card:before {
  opacity: .78;
  border-color: #fffc;
}

html[data-app-theme="light"] :is(.theme-session-content-panel, .theme-session-summary-panel, .theme-session-log-overlay, .theme-session-dialog-surface) {
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  background: linear-gradient(#fffc, #f4fceca3);
  border-color: #ffffffd1;
  box-shadow: 0 12px 34px #3d701829, inset 0 1px #fffffffa;
}

html[data-app-theme="light"] .theme-header-user-surface {
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  background: linear-gradient(#ffffffe6, #f0fae5c2);
  border-bottom: 1px solid #6ba83440;
  box-shadow: 0 5px 20px #40701c24, inset 0 1px #fff;
}

html[data-app-theme="light"] .theme-header-session-accent {
  opacity: .9;
  background: linear-gradient(90deg, #76bc2ad9, #96d24db3 72%, #f18414bf) bottom / 100% 3px no-repeat;
}

html[data-app-theme="light"] .theme-header-ambient {
  opacity: .65;
  background: radial-gradient(circle at 12% 20%, #a4de5b33, #0000 34%), radial-gradient(circle at 90% 20%, #ffa83a24, #0000 30%);
}

html[data-app-theme="light"] .theme-menu-header {
  color: #894400;
  background: linear-gradient(#ffffffe6, #ffebcba8);
  box-shadow: inset 0 -1px #e07e1833;
}

html[data-app-theme="light"] .theme-login-neutral {
  --button-secondary-border: #539718b8;
  --button-secondary-bg: radial-gradient(farthest-corner at bottom center, #ffffff61, transparent 64%),
    linear-gradient(180deg, #4c950ef5, #91cf39f0);
  --button-secondary-bg-hover: radial-gradient(farthest-corner at bottom center, #ffffff80, transparent 64%),
    linear-gradient(180deg, #58a512, #a4de48);
  --button-secondary-text: #123409;
  --button-secondary-shadow: 0 5px 14px #3d701847,
    inset 0 1px 0 #ffffff94;
}

html[data-app-theme="light"] :where([data-slot="button"]:not([data-variant="destructive"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-login-control, .theme-login-admin-button, .theme-control-surface) {
  --light-aero-button-foreground: var(--button-secondary-text);
  isolation: isolate;
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--light-aero-button-foreground);
  box-shadow: var(--button-secondary-shadow);
  text-shadow: 0 1px #ffffffc7;
  border-radius: 14px;
  transition: transform .16s, box-shadow .16s, filter .16s;
  position: relative;
  overflow: hidden;
}

html[data-app-theme="light"] :where([data-slot="button"]:not([data-variant="destructive"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-login-control, .theme-login-admin-button, .theme-control-surface) :where(span, strong, small, svg, svg *) {
  -webkit-text-fill-color: var(--light-aero-button-foreground);
  color: var(--light-aero-button-foreground) !important;
}

html[data-app-theme="light"] :where([data-slot="button"]:not([data-variant="destructive"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-login-control, .theme-login-admin-button, .theme-control-surface):before {
  content: "";
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #0000 30%, #ffffff3d 45%, #ffffff0f 55%, #0000 70%);
  position: absolute;
  inset: 0;
}

html[data-app-theme="light"] :where([data-slot="button"]:not([data-variant="destructive"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-login-control, .theme-login-admin-button, .theme-control-surface):after {
  content: "";
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(#ffffff80, #ffffff0a);
  width: calc(100% - 1.4em);
  height: 42%;
  position: absolute;
  top: 4%;
  left: .7em;
}

html[data-app-theme="light"] :where([data-slot="button"]:not([data-variant="destructive"]):not(:disabled), .theme-button-primary:not(:disabled), .theme-button-secondary:not(:disabled), .theme-button-tertiary:not(:disabled), .theme-login-control:not(:disabled), .theme-login-admin-button:not(:disabled), .theme-control-surface:not(:disabled)):is(:hover, :focus-visible) {
  background: var(--button-secondary-bg-hover);
  filter: saturate(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px #3d701838, 0 2px 8px #dd6f001a, inset 0 1px #fff;
}

html[data-app-theme="light"] :where([data-slot="button"][data-variant="default"], .theme-button-primary) {
  --light-aero-button-foreground: var(--button-primary-text);
  border-color: var(--button-primary-border);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
  text-shadow: 0 1px #ffffff9e;
}

html[data-app-theme="light"] :where([data-slot="button"][data-variant="default"], .theme-button-primary):is(:hover, :focus-visible) {
  background: var(--button-primary-bg-hover);
  box-shadow: 0 7px 20px #4a8b0c61, inset 0 1px #ffffff9e;
}

html[data-app-theme="light"] :where([data-slot="button"][data-variant="outline"], .theme-button-tertiary) {
  --light-aero-button-foreground: var(--button-tertiary-text);
  border-color: var(--button-tertiary-border);
  background: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
  box-shadow: var(--button-tertiary-shadow);
}

html[data-app-theme="light"] :where([data-slot="button"][data-variant="outline"], .theme-button-tertiary):is(:hover, :focus-visible) {
  background: var(--button-tertiary-bg-hover);
  box-shadow: 0 7px 18px #d269003d, inset 0 1px #fff;
}

html[data-app-theme="light"] [data-baseline-capture] button.baseline-action-card-meta {
  --light-aero-button-foreground: var(--button-primary-text);
  border-color: var(--button-primary-border) !important;
  background: var(--button-primary-bg) !important;
  color: var(--light-aero-button-foreground) !important;
  box-shadow: var(--button-primary-shadow) !important;
}

html[data-app-theme="light"] [data-baseline-capture] button.baseline-action-card-meta:is(:hover, :focus-visible):not(:disabled) {
  background: var(--button-primary-bg-hover) !important;
  box-shadow: 0 7px 18px #3d701842, inset 0 1px #ffffffad !important;
}

html[data-app-theme="light"] [data-baseline-capture] button.baseline-action-card-meta:disabled {
  filter: grayscale(.28) saturate(.72);
  opacity: .64;
  box-shadow: 0 2px 7px #3d701824, inset 0 1px #ffffff80 !important;
}

html[data-app-theme="light"] [data-slot="tabs-list"] {
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  background: #ffffff8a;
  border: 1px solid #ffffffdb;
  border-radius: 16px;
  box-shadow: 0 4px 16px #3d70181a, inset 0 1px #fff;
}

html[data-app-theme="light"] [data-slot="tabs-trigger"][data-state="active"] {
  color: #123409;
  text-shadow: 0 1px #ffffff94;
  background: linear-gradient(#b4e854, #5ba414);
  border-color: #4b8f0cb8;
  box-shadow: 0 3px 10px #4a8b0c42, inset 0 1px #ffffff8f;
}

html[data-app-theme="light"] :is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffffbd;
  border-color: #69a63452;
  box-shadow: inset 0 1px 3px #43751d14, 0 1px #ffffffeb;
}

html[data-app-theme="light"] .survey-scale-slider {
  --survey-slider-fill-start: #beeb6c;
  --survey-slider-fill-end: #5ba414;
  --survey-slider-unfilled: #ffffffb8;
  --survey-slider-track-border: #69a63447;
  --survey-slider-thumb-border: #4f9011;
  --survey-slider-thumb-shadow: #43751d3d;
  --survey-slider-thumb-ring: #6fb82342;
}

html[data-app-theme="light"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
  background: radial-gradient(48% 34% at 36% 22%, #fff 0%, #ffffffb3 38%, #0000 74%), radial-gradient(circle at 35% 32%, #fff 0%, #aae245 34%, #58a40f 70%, #316f03 100%);
  border: 1px solid #48890a;
  border-radius: 50%;
  box-shadow: inset 0 -3px 6px #21520047, 0 5px 14px #3d701852;
}

html[data-app-theme="light"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-thumb {
  background: radial-gradient(48% 34% at 36% 22%, #fff 0%, #ffffffb3 38%, #0000 74%), radial-gradient(circle at 35% 32%, #fff 0%, #aae245 34%, #58a40f 70%, #316f03 100%);
  border: 1px solid #48890a;
  border-radius: 50%;
  box-shadow: inset 0 -3px 6px #21520047, 0 5px 14px #3d701852;
}

html[data-app-theme="light"] .theme-survey-slider-value {
  color: #7e3e00;
  background: linear-gradient(#fff, #ffe8c3db);
  border-color: #e07e1859;
  box-shadow: 0 3px 10px #d2690024, inset 0 1px #fff;
}

@media (prefers-reduced-motion: reduce) {
  html[data-app-theme="light"] :where(button, [data-slot="button"]) {
    transition-duration: .01ms;
  }
}

html[data-app-theme="dark"] {
  background-color: var(--page-bg-via);
  background-image: url("/branding/imags-page-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html[data-app-theme="dark"] body, html[data-app-theme="dark"] :is(.theme-page-bg, .theme-session-page-root) {
  background-color: var(--page-bg-via);
  background-image: url("/branding/imags-page-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

html[data-app-theme="dark"] body {
  font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI, system-ui, sans-serif;
}

html[data-app-theme="dark"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]) {
  --aero-orb-hue: 300;
  --aero-orb-saturation: .32;
  --aero-orb-gloss: .95;
}

html[data-app-theme="dark"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-webkit-slider-thumb {
  border: 1px solid oklch(78% .2 var(--aero-orb-hue));
  background: radial-gradient(ellipse 48% 36% at 36% 23%,
      #fff 0%,
      #ffffffb8 34%,
      transparent 72%),
    radial-gradient(circle at 35% 35%,
      rgb(255 255 255 / var(--aero-orb-gloss)),
      oklch(65% var(--aero-orb-saturation) var(--aero-orb-hue)) 50%,
      oklch(35% var(--aero-orb-saturation) var(--aero-orb-hue)) 100%);
  border-radius: 50%;
  box-shadow: inset 0 -4px 8px #0000004d, 0 8px 24px #0006;
}

html[data-app-theme="dark"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume])::-moz-range-thumb {
  border: 1px solid oklch(78% .2 var(--aero-orb-hue));
  background: radial-gradient(ellipse 48% 36% at 36% 23%,
      #fff 0%,
      #ffffffb8 34%,
      transparent 72%),
    radial-gradient(circle at 35% 35%,
      rgb(255 255 255 / var(--aero-orb-gloss)),
      oklch(65% var(--aero-orb-saturation) var(--aero-orb-hue)) 50%,
      oklch(35% var(--aero-orb-saturation) var(--aero-orb-hue)) 100%);
  border-radius: 50%;
  box-shadow: inset 0 -4px 8px #0000004d, 0 8px 24px #0006;
}

html[data-app-theme="dark"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):is(:hover, :focus-visible, :active)::-webkit-slider-thumb {
  box-shadow: inset 0 -4px 8px #0000004d,
    0 8px 24px #0006,
    0 0 0 4px oklch(72% .2 var(--aero-orb-hue) / .28);
}

html[data-app-theme="dark"] :is(.survey-scale-slider, [data-transport-progress], [data-transport-volume]):is(:hover, :focus-visible, :active)::-moz-range-thumb {
  box-shadow: inset 0 -4px 8px #0000004d,
    0 8px 24px #0006,
    0 0 0 4px oklch(72% .2 var(--aero-orb-hue) / .28);
}

.theme-dark-aero-logo {
  display: block;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]), [data-slot="button"], .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button) {
  --aero-button-hue: 300;
  --aero-button-saturation: .32;
  --aero-button-glow-intensity: .9;
  --aero-button-foreground: oklch(11% .055 var(--aero-button-hue));
  --aero-button-background: oklch(75% var(--aero-button-saturation) var(--aero-button-hue) / .8);
  --aero-button-background-dark: oklch(45% var(--aero-button-saturation) var(--aero-button-hue) / .75);
  isolation: isolate;
  -webkit-text-fill-color: var(--aero-button-foreground);
  text-shadow: 0 1px #ffffff9e, 0 2px .35em #ffffff47;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI, system-ui, sans-serif;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--aero-button-background) !important;
  background: radial-gradient(farthest-corner at bottom center,
      rgba(255, 255, 255, var(--aero-button-glow-intensity)),
      transparent),
    linear-gradient(to bottom,
      var(--aero-button-background-dark),
      var(--aero-button-background)) !important;
  color: var(--aero-button-foreground) !important;
  border-radius: 14px !important;
  transition: box-shadow .3s, transform .3s, opacity .3s !important;
  box-shadow: 0 4px 4px #0006 !important;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]), [data-slot="button"], .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button) :where(span, strong, small, svg, svg *) {
  -webkit-text-fill-color: var(--aero-button-foreground);
  color: var(--aero-button-foreground) !important;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]), [data-slot="button"], .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button) svg {
  filter: drop-shadow(0 1px #ffffff94);
  opacity: 1 !important;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]), [data-slot="button"], .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button):before {
  content: "";
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #0000 30%, #ffffff59 45%, #ffffff0d 55%, #0000 70%);
  position: absolute;
  inset: 0;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]), [data-slot="button"], .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button):after {
  content: "";
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(#fffc, #ffffff1a);
  width: calc(100% - 1.5em);
  height: 40%;
  position: absolute;
  top: 4%;
  left: .75em;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]):not(:disabled), [data-slot="button"]:not([aria-disabled="true"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button):is(:hover, :focus-visible) {
  transform: translateY(-1px);
  box-shadow: 0 6px 8px #0006 !important;
}

html[data-app-theme="dark"] :where(button:not([data-aero-button="off"]):not(:disabled), [data-slot="button"]:not([aria-disabled="true"]), .theme-button-primary, .theme-button-secondary, .theme-button-tertiary, .theme-button-ghost, .theme-login-control, .theme-login-admin-button):active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px #0006 !important;
}

html[data-app-theme="dark"] button.fixed.inset-0 {
  text-shadow: none;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

html[data-app-theme="dark"] button.fixed.inset-0:before, html[data-app-theme="dark"] button.fixed.inset-0:after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-app-theme="dark"] :where(button, [data-slot="button"]) {
    transition-duration: .01ms !important;
  }
}

@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-pan-x {
  syntax: "*";
  inherits: false
}

@property --tw-pan-y {
  syntax: "*";
  inherits: false
}

@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0-a9e3v._.css.map*/