/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-block-end: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

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

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

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

small {
    font-size: 80%;
}

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

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

sub {
    inset-block-end: -0.25em;
}

sup {
    inset-block-start: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

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

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

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

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

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

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

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

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

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

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

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

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

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("./material-symbols-outlined-Y4xYwwV7.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* font paths are relative to build directory */
/* roboto-flex-variable */
@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
    src:
        local(""),
        url("../fonts/RobotoFlex-VariableFont.woff2") format("woff2"),
        
            url("../fonts/RobotoFlex-VariableFont.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* --------------------------
   Variables
   -------------------------- */
:root {
    /* Spacing */
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-xxxl: 48px;

    /* Sizes */
    --size-sidebar-width: 165px;
    --size-queue-width: 330px;
    --size-seekbar-height: 5px;

    /* Breakpoints */
    --breakpoint-mi: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-xxl: 1536px;

    /* Fonts */
    --font-body: "Roboto Flex", system-ui, Helvetica, Arial, sans-serif;
    --font-heading: "Roboto Flex", system-ui, Helvetica, Arial, sans-serif;
    --roboto-grad: 0;
    --roboto-opsz: 13;

    /* Base Colors - based on the Harmony color palette https://evilmartians.com/opensource/harmony */
    /*--hue-primary:   290;*/
    /*--hue-secondary: 220;*/
    --hue-green: 140;
    --hue-red: 20;
    --hue-blue: 240;
    --hue-yellow: 66;
    --hue-black: 275;

    --lightness-50: 98.83%;
    --lightness-100: 96.68%;
    --lightness-200: 92.19%;
    --lightness-300: 86.13%;
    --lightness-400: 80.08%;
    --lightness-500: 74.22%;
    --lightness-600: 62.7%;
    --lightness-700: 53.52%;
    --lightness-800: 41.99%;
    --lightness-900: 30.66%;
    --lightness-950: 19.34%;

    --chroma-50: 0.005;
    --chroma-100: 0.017;
    --chroma-200: 0.042;
    --chroma-300: 0.078;
    --chroma-400: 0.114;
    --chroma-500: 0.152;
    --chroma-600: 0.136;
    --chroma-700: 0.116;
    --chroma-800: 0.091;
    --chroma-900: 0.066;
    --chroma-950: 0.041;

    /* User accent 1 */
    --swatch-primary-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-primary)
    );
    --swatch-primary-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-primary)
    );
    --swatch-primary-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-primary)
    );
    --swatch-primary-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-primary)
    );
    --swatch-primary-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-primary)
    );
    --swatch-primary-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-primary)
    );
    --swatch-primary-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-primary)
    );
    --swatch-primary-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-primary)
    );
    --swatch-primary-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-primary)
    );
    --swatch-primary-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-primary)
    );
    --swatch-primary-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-primary)
    );

    /* User background */
    --swatch-secondary-50: oklch(
        var(--lightness-50) var(--chroma-override, var(--chroma-50))
            var(--hue-secondary)
    );
    --swatch-secondary-100: oklch(
        var(--lightness-100) var(--chroma-override, var(--chroma-100))
            var(--hue-secondary)
    );
    --swatch-secondary-200: oklch(
        var(--lightness-200) var(--chroma-override, var(--chroma-200))
            var(--hue-secondary)
    );
    --swatch-secondary-300: oklch(
        var(--lightness-300) var(--chroma-override, var(--chroma-300))
            var(--hue-secondary)
    );
    --swatch-secondary-400: oklch(
        var(--lightness-400) var(--chroma-override, var(--chroma-400))
            var(--hue-secondary)
    );
    --swatch-secondary-500: oklch(
        var(--lightness-500) var(--chroma-override, var(--chroma-500))
            var(--hue-secondary)
    );
    --swatch-secondary-600: oklch(
        var(--lightness-600) var(--chroma-override, var(--chroma-600))
            var(--hue-secondary)
    );
    --swatch-secondary-700: oklch(
        var(--lightness-700) var(--chroma-override, var(--chroma-700))
            var(--hue-secondary)
    );
    --swatch-secondary-800: oklch(
        var(--lightness-800) var(--chroma-override, var(--chroma-800))
            var(--hue-secondary)
    );
    --swatch-secondary-900: oklch(
        var(--lightness-900) var(--chroma-override, var(--chroma-900))
            var(--hue-secondary)
    );
    --swatch-secondary-950: oklch(
        var(--lightness-950) var(--chroma-override, var(--chroma-950))
            var(--hue-secondary)
    );

    /* User background */
    --swatch-background-50: oklch(
        var(--lightness-50) var(--chroma-override, var(--chroma-50))
            var(--user-hue-background)
    );
    --swatch-background-100: oklch(
        var(--lightness-100) var(--chroma-override, var(--chroma-100))
            var(--user-hue-background)
    );
    --swatch-background-200: oklch(
        var(--lightness-200) var(--chroma-override, var(--chroma-200))
            var(--user-hue-background)
    );
    --swatch-background-300: oklch(
        var(--lightness-300) var(--chroma-override, var(--chroma-300))
            var(--user-hue-background)
    );
    --swatch-background-400: oklch(
        var(--lightness-400) var(--chroma-override, var(--chroma-400))
            var(--user-hue-background)
    );
    --swatch-background-500: oklch(
        var(--lightness-500) var(--chroma-override, var(--chroma-500))
            var(--user-hue-background)
    );
    --swatch-background-600: oklch(
        var(--lightness-600) var(--chroma-override, var(--chroma-600))
            var(--user-hue-background)
    );
    --swatch-background-700: oklch(
        var(--lightness-700) var(--chroma-override, var(--chroma-700))
            var(--user-hue-background)
    );
    --swatch-background-800: oklch(
        var(--lightness-800) var(--chroma-override, var(--chroma-800))
            var(--user-hue-background)
    );
    --swatch-background-900: oklch(
        var(--lightness-900) var(--chroma-override, var(--chroma-900))
            var(--user-hue-background)
    );
    --swatch-background-950: oklch(
        var(--lightness-950) var(--chroma-override, var(--chroma-950))
            var(--user-hue-background)
    );

    /* User accent 2 */
    --swatch-tertiary-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-tertiary)
    );
    --swatch-tertiary-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-tertiary)
    );
    --swatch-tertiary-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-tertiary)
    );
    --swatch-tertiary-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-tertiary)
    );
    --swatch-tertiary-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-tertiary)
    );
    --swatch-tertiary-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-tertiary)
    );
    --swatch-tertiary-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-tertiary)
    );
    --swatch-tertiary-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-tertiary)
    );
    --swatch-tertiary-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-tertiary)
    );
    --swatch-tertiary-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-tertiary)
    );
    --swatch-tertiary-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-tertiary)
    );

    /* max chroma 200 */
    --swatch-neutral-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-secondary)
    );
    --swatch-neutral-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-secondary)
    );
    --swatch-neutral-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-300: oklch(
        var(--lightness-300) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-400: oklch(
        var(--lightness-400) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-500: oklch(
        var(--lightness-500) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-600: oklch(
        var(--lightness-600) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-700: oklch(
        var(--lightness-700) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-800: oklch(
        var(--lightness-800) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-900: oklch(
        var(--lightness-900) var(--chroma-200) var(--hue-secondary)
    );
    --swatch-neutral-950: oklch(
        var(--lightness-950) var(--chroma-200) var(--hue-secondary)
    );

    --swatch-green-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-green)
    );
    --swatch-green-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-green)
    );
    --swatch-green-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-green)
    );
    --swatch-green-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-green)
    );
    --swatch-green-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-green)
    );
    --swatch-green-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-green)
    );
    --swatch-green-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-green)
    );
    --swatch-green-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-green)
    );
    --swatch-green-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-green)
    );
    --swatch-green-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-green)
    );
    --swatch-green-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-green)
    );

    --swatch-red-50: oklch(var(--lightness-50) var(--chroma-50) var(--hue-red));
    --swatch-red-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-red)
    );
    --swatch-red-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-red)
    );
    --swatch-red-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-red)
    );
    --swatch-red-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-red)
    );
    --swatch-red-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-red)
    );
    --swatch-red-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-red)
    );
    --swatch-red-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-red)
    );
    --swatch-red-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-red)
    );
    --swatch-red-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-red)
    );
    --swatch-red-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-red)
    );

    --swatch-blue-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-blue)
    );
    --swatch-blue-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-blue)
    );
    --swatch-blue-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-blue)
    );
    --swatch-blue-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-blue)
    );
    --swatch-blue-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-blue)
    );
    --swatch-blue-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-blue)
    );
    --swatch-blue-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-blue)
    );
    --swatch-blue-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-blue)
    );
    --swatch-blue-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-blue)
    );
    --swatch-blue-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-blue)
    );
    --swatch-blue-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-blue)
    );

    --swatch-yellow-50: oklch(
        var(--lightness-50) var(--chroma-50) var(--hue-yellow)
    );
    --swatch-yellow-100: oklch(
        var(--lightness-100) var(--chroma-100) var(--hue-yellow)
    );
    --swatch-yellow-200: oklch(
        var(--lightness-200) var(--chroma-200) var(--hue-yellow)
    );
    --swatch-yellow-300: oklch(
        var(--lightness-300) var(--chroma-300) var(--hue-yellow)
    );
    --swatch-yellow-400: oklch(
        var(--lightness-400) var(--chroma-400) var(--hue-yellow)
    );
    --swatch-yellow-500: oklch(
        var(--lightness-500) var(--chroma-500) var(--hue-yellow)
    );
    --swatch-yellow-600: oklch(
        var(--lightness-600) var(--chroma-600) var(--hue-yellow)
    );
    --swatch-yellow-700: oklch(
        var(--lightness-700) var(--chroma-700) var(--hue-yellow)
    );
    --swatch-yellow-800: oklch(
        var(--lightness-800) var(--chroma-800) var(--hue-yellow)
    );
    --swatch-yellow-900: oklch(
        var(--lightness-900) var(--chroma-900) var(--hue-yellow)
    );
    --swatch-yellow-950: oklch(
        var(--lightness-950) var(--chroma-950) var(--hue-yellow)
    );

    --swatch-black-50: oklch(var(--lightness-50) 0.005 var(--hue-black));
    --swatch-black-100: oklch(var(--lightness-100) 0.018 var(--hue-black));
    --swatch-black-200: oklch(var(--lightness-200) 0.024 var(--hue-black));
    --swatch-black-300: oklch(var(--lightness-300) 0.024 var(--hue-black));
    --swatch-black-400: oklch(var(--lightness-400) 0.024 var(--hue-black));
    --swatch-black-500: oklch(var(--lightness-500) 0.024 var(--hue-black));
    --swatch-black-600: oklch(var(--lightness-600) 0.024 var(--hue-black));
    --swatch-black-700: oklch(var(--lightness-700) 0.024 var(--hue-black));
    --swatch-black-800: oklch(var(--lightness-800) 0.024 var(--hue-black));
    --swatch-black-900: oklch(var(--lightness-900) 0.024 var(--hue-black));
    --swatch-black-950: oklch(var(--lightness-950) 0.024 var(--hue-black));

    --hue-primary: var(
        --user-hue-accent-1,
        var(--user-hue-background)
    ); /* fallback to background */
    --hue-secondary: var(--user-hue-background); /* based on hue-background */
    --hue-tertiary: var(
        --user-hue-accent-2,
        var(--user-hue-background)
    ); /* fallback to hue-background */

    /* Shadows */
    --shadow-inner: oklch(var(--color-shadow-val) / 0.12) 0px 2px 4px 0px inset;
    --shadow-sm: oklch(var(--color-shadow-val) / 0.2) 0px 1px 3px 0px,
        oklch(var(--color-shadow-val) / 0.12) 0px 1px 2px 0px;
    --shadow-md: oklch(var(--color-shadow-val) / 0.2) 0px 4px 6px -1px,
        oklch(var(--color-shadow-val) / 0.12) 0px 2px 4px -1px;
    --shadow-lg: oklch(var(--color-shadow-val) / 0.2) 0px 10px 15px -3px,
        oklch(var(--color-shadow-val) / 0.1) 0px 4px 6px -2px;
    --shadow-xl: oklch(var(--color-shadow-val) / 0.2) 0px 20px 25px -5px,
        oklch(var(--color-shadow-val) / 0.08) 0px 10px 10px -5px;
    --shadow-xxl: oklch(var(--color-shadow-val) / 0.2) 0px 20px 25px -5px,
        oklch(var(--color-shadow-val) / 0.08) 0px 10px 10px -5px;
}
.sl-theme-dark {
    --color-primary: var(--swatch-primary-400);
    --color-on-primary: var(--swatch-primary-900);
    --color-primary-container: var(--swatch-primary-800);
    --color-on-primary-container: var(--swatch-primary-200);
    --color-secondary: var(--swatch-secondary-400);
    --color-on-secondary: var(--swatch-secondary-900);
    --color-secondary-container: var(--swatch-secondary-800);
    --color-secondary-container-variant: var(--swatch-secondary-900);
    --color-on-secondary-container: var(--swatch-secondary-200);
    --color-on-secondary-container-variant: var(--swatch-secondary-400);
    --color-tertiary: var(--swatch-tertiary-400);
    --color-on-tertiary: var(--swatch-tertiary-900);
    --color-tertiary-container: var(--swatch-tertiary-800);
    --color-tertiary-container-variant: var(--swatch-tertiary-900);
    --color-on-tertiary-container: var(--swatch-tertiary-200);
    --color-on-tertiary-container-variant: var(--swatch-tertiary-400);
    --color-background: var(--swatch-background-950);
    --color-on-background: var(--swatch-background-200);
    --color-surface: oklch(
        18.7% var(--chroma-override, var(--chroma-900))
            var(--user-hue-background)
    );
    --color-on-surface: var(--swatch-background-200);
    --color-surface-variant: oklch(
        39.8% var(--chroma-override, 0.017) var(--user-hue-background)
    );
    --color-on-surface-variant: var(--swatch-background-400);
    --color-outline: oklch(
        65.7% var(--chroma-override, 0.05) var(--user-hue-background)
    );
    --color-outline-variant: oklch(
        39.8% var(--chroma-override, 0.05) var(--user-hue-background)
    );
    --color-shadow: oklch(0% 0 var(--user-hue-background));
    --color-scrim: oklch(0% 0 var(--user-hue-background));
    --color-inverse-surface: var(--swatch-background-200);
    --color-inverse-on-surface: var(--swatch-background-900);
    --color-inverse-primary: var(--swatch-primary-700);
    --color-surface-container-lowest: oklch(
        16.418% var(--chroma-override, var(--chroma-950))
            var(--user-hue-background)
    );
    --color-surface-container-low: oklch(
        23.7% var(--chroma-override, var(--chroma-950))
            var(--user-hue-background)
    );
    --color-surface-container: oklch(
        25.5% var(--chroma-override, var(--chroma-950))
            var(--user-hue-background)
    );
    --color-surface-container-high: oklch(
        28.6% var(--chroma-override, var(--chroma-950))
            var(--user-hue-background)
    );

    --color-waveform: var(--user-color-waveform);
    --color-shadow-val: var(--lightness-950) var(--chroma-950)
        var(--hue-primary);
    --color-rating: var(--swatch-yellow-500);
    --color-favorite: var(--swatch-red-600);

    --color-btn-default-text: var(--swatch-primary-400);
    --color-btn-default-text-hover: var(--swatch-primary-100);
    --color-btn-default-bg: transparent;
    --color-btn-default-bg-hover: var(--swatch-primary-800);
    --color-btn-default-border: var(--swatch-primary-700);
    --color-btn-default-border-hover: var(--swatch-primary-600);

    --color-btn-neutral-text: var(--swatch-neutral-400);
    --color-btn-neutral-text-hover: var(--swatch-neutral-100);
    --color-btn-neutral-bg: var(--color-surface);
    --color-btn-neutral-bg-hover: var(--swatch-neutral-800);
    --color-btn-neutral-border: var(--swatch-neutral-700);
    --color-btn-neutral-border-hover: var(--swatch-neutral-600);

    --color-btn-primary-text: var(--swatch-primary-300);
    --color-btn-primary-text-hover: var(--swatch-primary-50);
    --color-btn-primary-bg: var(--swatch-primary-800);
    --color-btn-primary-bg-hover: var(--swatch-primary-700);
    --color-btn-primary-border: var(--swatch-primary-600);
    --color-btn-primary-border-hover: var(--swatch-primary-500);

    --color-btn-primary-alt-text: var(--swatch-primary-300);
    --color-btn-primary-alt-text-hover: var(--swatch-primary-50);
    --color-btn-primary-alt-bg: var(--swatch-primary-900);
    --color-btn-primary-alt-bg-hover: var(--swatch-primary-700);
    --color-btn-primary-alt-border: var(--swatch-primary-700);
    --color-btn-primary-alt-border-hover: var(--swatch-primary-500);

    --color-btn-success-text: var(--swatch-green-300);
    --color-btn-success-text-hover: var(--swatch-green-50);
    --color-btn-success-bg: var(--swatch-green-800);
    --color-btn-success-bg-hover: var(--swatch-green-700);
    --color-btn-success-border: var(--swatch-green-600);
    --color-btn-success-border-hover: var(--swatch-green-500);

    --color-btn-warning-text: var(--swatch-yellow-300);
    --color-btn-warning-text-hover: var(--swatch-yellow-50);
    --color-btn-warning-bg: var(--swatch-yellow-800);
    --color-btn-warning-bg-hover: var(--swatch-yellow-700);
    --color-btn-warning-border: var(--swatch-yellow-600);
    --color-btn-warning-border-hover: var(--swatch-yellow-500);

    --color-btn-danger-text: var(--swatch-red-300);
    --color-btn-danger-text-hover: var(--swatch-red-50);
    --color-btn-danger-bg: var(--swatch-red-800);
    --color-btn-danger-bg-hover: var(--swatch-red-700);
    --color-btn-danger-border: var(--swatch-red-600);
    --color-btn-danger-border-hover: var(--swatch-red-500);
}
.sl-theme-light {
    --color-primary: var(--swatch-primary-700);
    --color-on-primary: var(--swatch-primary-50);
    --color-primary-container: var(--swatch-primary-200);
    --color-on-primary-container: var(--swatch-primary-900);
    --color-secondary: var(--swatch-secondary-700);
    --color-on-secondary: var(--swatch-secondary-50);
    --color-secondary-container: var(--swatch-secondary-200);
    --color-secondary-container-variant: var(--swatch-secondary-200);
    --color-on-secondary-container: var(--swatch-secondary-900);
    --color-on-secondary-container-variant: var(--swatch-secondary-800);
    --color-tertiary: var(--swatch-tertiary-700);
    --color-on-tertiary: var(--swatch-tertiary-50);
    --color-tertiary-container: var(--swatch-tertiary-200);
    --color-tertiary-container-variant: var(--swatch-tertiary-200);
    --color-on-tertiary-container: var(--swatch-tertiary-900);
    --color-on-tertiary-container-variant: var(--swatch-tertiary-800);
    --color-background: oklch(
        98.4% var(--chroma-override, 0.013) var(--user-hue-background)
    );
    --color-on-background: oklch(
        22.7% var(--chroma-override, 0.01) var(--user-hue-background)
    );
    --color-surface: oklch(
        98.4% var(--chrome-override, 0.013) var(--user-hue-background)
    );
    --color-on-surface: oklch(
        22.7% var(--chroma-override, 0.01) var(--user-hue-background)
    );
    --color-surface-variant: oklch(
        91.6% var(--chroma-override, 0.018) var(--user-hue-background)
    );
    --color-on-surface-variant: oklch(
        39.8% var(--chroma-override, 0.017) var(--user-hue-background)
    );
    --color-outline: oklch(
        56.7% var(--chroma-override, 0.016) var(--user-hue-background)
    );
    --color-outline-variant: oklch(
        82.9% var(--chroma-override, 0.018) var(--user-hue-background)
    );
    --color-shadow: oklch(0% 0 var(--user-hue-background));
    --color-scrim: oklch(0% 0 var(--user-hue-background));
    --color-inverse-surface: oklch(
        31.1% var(--chroma-override, 0.011) var(--user-hue-background)
    );
    --color-inverse-on-surface: oklch(
        95.9% var(--chroma-override, 0.012) var(--user-hue-background)
    );
    --color-inverse-primary: oklch(
        83.5% var(--chroma-override, 0.095) var(--hue-primary)
    );
    --color-surface-container-lowest: oklch(
        100% var(--chroma-override, var(--chroma-100))
            var(--user-hue-background)
    );
    --color-surface-container-low: oklch(
        96.7% var(--chroma-override, var(--chroma-100))
            var(--user-hue-background)
    );
    --color-surface-container: oklch(
        95.4% var(--chroma-override, var(--chroma-100))
            var(--user-hue-background)
    );
    --color-surface-container-high: oklch(
        93.3% var(--chroma-override, var(--chroma-100))
            var(--user-hue-background)
    );

    --color-waveform: var(--user-color-waveform);
    --color-shadow-val: var(--lightness-600) var(--chroma-200)
        var(--hue-primary);
    --color-rating: var(--swatch-yellow-600);
    --color-favorite: var(--swatch-red-600);

    --color-btn-default-text: var(--swatch-primary-700);
    --color-btn-default-text-hover: var(--swatch-primary-900);
    --color-btn-default-bg: transparent;
    --color-btn-default-bg-hover: var(--swatch-primary-200);
    --color-btn-default-border: var(--swatch-primary-500);
    --color-btn-default-border-hover: var(--swatch-primary-600);

    --color-btn-neutral-text: var(--swatch-neutral-700);
    --color-btn-neutral-text-hover: var(--swatch-neutral-900);
    --color-btn-neutral-bg: var(--color-surface);
    --color-btn-neutral-bg-hover: var(--swatch-neutral-200);
    --color-btn-neutral-border: var(--swatch-neutral-500);
    --color-btn-neutral-border-hover: var(--swatch-neutral-600);

    --color-btn-primary-text: var(--swatch-primary-800);
    --color-btn-primary-text-hover: var(--swatch-primary-50);
    --color-btn-primary-bg: var(--swatch-primary-200);
    --color-btn-primary-bg-hover: var(--swatch-primary-500);
    --color-btn-primary-border: var(--swatch-primary-500);
    --color-btn-primary-border-hover: var(--swatch-primary-500);

    --color-btn-primary-alt-text: var(--swatch-primary-800);
    --color-btn-primary-alt-text-hover: var(--swatch-primary-50);
    --color-btn-primary-alt-bg: var(--swatch-primary-300);
    --color-btn-primary-alt-bg-hover: var(--swatch-primary-500);
    --color-btn-primary-alt-border: var(--swatch-primary-500);
    --color-btn-primary-alt-border-hover: var(--swatch-primary-500);

    --color-btn-success-text: var(--swatch-green-800);
    --color-btn-success-text-hover: var(--swatch-green-50);
    --color-btn-success-bg: var(--swatch-green-200);
    --color-btn-success-bg-hover: var(--swatch-green-500);
    --color-btn-success-border: var(--swatch-green-500);
    --color-btn-success-border-hover: var(--swatch-green-500);

    --color-btn-warning-text: var(--swatch-yellow-800);
    --color-btn-warning-text-hover: var(--swatch-yellow-50);
    --color-btn-warning-bg: var(--swatch-yellow-200);
    --color-btn-warning-bg-hover: var(--swatch-yellow-500);
    --color-btn-warning-border: var(--swatch-yellow-500);
    --color-btn-warning-border-hover: var(--swatch-yellow-500);

    --color-btn-danger-text: var(--swatch-red-800);
    --color-btn-danger-text-hover: var(--swatch-red-50);
    --color-btn-danger-bg: var(--swatch-red-200);
    --color-btn-danger-bg-hover: var(--swatch-red-600);
    --color-btn-danger-border: var(--swatch-red-500);
    --color-btn-danger-border-hover: var(--swatch-red-600);
}
/* --------------------------
   Override Shoelace tokens
   -------------------------- */
:root {
    --sl-color-primary-700: var(--swatch-primary-600);
    --sl-color-primary-600: var(--swatch-primary-500);
}
/* --------------------------
   General style rules
   -------------------------- */
* {
    box-sizing: border-box;
    font-variation-settings:
        "GRAD" var(--roboto-grad),
        "opsz" var(--roboto-opsz);
}
html,
body,
#app {
    position: relative;
    overflow: clip; /* clip instead of hidden, fixes queue slide in bug */
    width: 100vw;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    height: 100vh;
}
/* Fix for Shoelace 2.13.0+, would reset with overflow hidden */
body.sl-scroll-lock.sl-scroll-lock.sl-scroll-lock {
    overflow: clip;
}
html {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    height: 100%;
}
img {
    max-width: 100%;
    height: auto;
}
svg {
    fill: currentColor;
}
a {
    outline: 0;
}
a:link,
a:visited {
    color: inherit;
    text-decoration: none;
}
@media (hover: hover) {
    a:hover {
        color: var(--color-primary);
    }
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0;
    font-family: var(--font-heading);
    font-weight: unset;
    color: var(--color-tertiary);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* W3C spec */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline) var(--color-outline-variant);
}
/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-outline-variant);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-outline);
}
::selection {
    background: var(--color-primary);
    color: var(--color-background);
}
/*
 * Loading overlay
 */
#loading-overlay {
    background-color: var(--color-background);
    position: fixed;
    height: 100vh;
    width: 100%;
    display: flex;
    z-index: 10000;
    transition: opacity 0.3s ease-out;
    justify-content: center;
    align-items: center;
}
#loading-overlay.hiding {
    opacity: 0;
    pointer-events: none;
}
#loading-overlay.hidden {
    display: none;
    pointer-events: none;
}
/* --------------------------
   Form / inputs
   -------------------------- */
sl-select small {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 90%;
}
/* --------------------------
   Buttons / badges / tooltips
   -------------------------- */
::-moz-focus-inner {
    outline: 0;
}
.current-icon {
    display: inline-block;
    flex-shrink: 0;
    margin-inline-end: var(--spacing-sm);
    line-height: 1;
    vertical-align: middle;
}
/*
Variants
*/
sl-button::part(base) {
    background-color: var(--color-btn-default-bg);
    border-color: var(--color-btn-default-border);
    color: var(--color-btn-default-text);
    position: relative;
    overflow: hidden;
}
@supports (mix-blend-mode: multiply) {
    sl-button:not([variant="text"])::part(base)::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
            to bottom,
            transparent 30%,
            currentColor 100%
        );
        z-index: 1;
        pointer-events: none;
        mix-blend-mode: multiply;
        opacity: 0.1;
    }
}
sl-button::part(base):not(:disabled):hover {
    background-color: var(--color-btn-default-bg-hover);
    border-color: var(--color-btn-default-border-hover);
    color: var(--color-btn-default-text-hover);
}
sl-button[variant="text"]::part(base) {
    background-color: transparent;
    border-color: transparent;
}
sl-button[variant="text"]::part(base):not(:disabled):hover {
    background-color: transparent;
    border-color: transparent;
}
sl-button[variant="neutral"]::part(base) {
    background-color: var(--color-btn-neutral-bg);
    border-color: var(--color-btn-neutral-border);
    color: var(--color-btn-neutral-text);
}
sl-card sl-button[variant="neutral"]::part(base) {
    background-color: transparent;
}
sl-button[variant="neutral"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-neutral-bg-hover);
    border-color: var(--color-btn-neutral-border-hover);
    color: var(--color-btn-neutral-text-hover);
}
sl-button[variant="primary"]::part(base) {
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-border);
    color: var(--color-btn-primary-text);
}
sl-button[variant="primary"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-primary-bg-hover);
    border-color: var(--color-btn-primary-border-hover);
    color: var(--color-btn-primary-text-hover);
}
sl-button[variant="primary-alt"]::part(base) {
    background-color: var(--color-btn-primary-alt-bg);
    border-color: var(--color-btn-primary-alt-border);
    color: var(--color-btn-primary-alt-text);
}
sl-button[variant="primary-alt"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-primary-alt-bg-hover);
    border-color: var(--color-btn-primary-alt-border-hover);
    color: var(--color-btn-primary-alt-text-hover);
}
sl-button[variant="success"]::part(base) {
    background-color: var(--color-btn-success-bg);
    border-color: var(--color-btn-success-border);
    color: var(--color-btn-success-text);
}
sl-button[variant="success"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-success-bg-hover);
    border-color: var(--color-btn-success-border-hover);
    color: var(--color-btn-success-text-hover);
}
sl-button[variant="warning"]::part(base) {
    background-color: var(--color-btn-warning-bg);
    border-color: var(--color-btn-warning-border);
    color: var(--color-btn-warning-text);
}
sl-button[variant="warning"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-warning-bg-hover);
    border-color: var(--color-btn-warning-border-hover);
    color: var(--color-btn-warning-text-hover);
}
sl-button[variant="danger"]::part(base) {
    background-color: var(--color-btn-danger-bg);
    border-color: var(--color-btn-danger-border);
    color: var(--color-btn-danger-text);
}
sl-button[variant="danger"]::part(base):not(:disabled):hover {
    background-color: var(--color-btn-danger-bg-hover);
    border-color: var(--color-btn-danger-border-hover);
    color: var(--color-btn-danger-text-hover);
}
sl-button::part(base):not(:disabled):active {
    opacity: 0.8;
}
/*
Sizes
*/
sl-button::part(base) {
    font-size: 13px;
}
sl-button[size="small"]::part(base) {
    font-size: 11px;
}
sl-button[size="large"]::part(base) {
    font-size: 14px;
}
/* badges */
.badge {
    display: inline-flex;
    border-radius: 2px;
    padding: 0.2em 0.4em;
}
.badge--success {
    background-color: var(--swatch-green-500);
    color: var(--swatch-green-100);
}
.badge--info {
    background-color: var(--swatch-blue-55);
    color: var(--swatch-blue-100);
}
.badge--warning {
    background-color: var(--swatch-yellow-500);
    color: var(--swatch-yellow-100);
}
.badge--danger {
    background-color: var(--swatch-red-500);
    color: var(--swatch-red-100);
}
/* --------------------------
   SVG
   -------------------------- */
/* --------------------------
   Shared
   -------------------------- */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.secondary-info {
    color: var(--color-on-surface-variant);
}
.page-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-block-end: var(--spacing-xl);
}
.title {
    --roboto-grad: 150;
    --roboto-opsz: 12;
    font-weight: 500;
}
.page-title {
    --roboto-opsz: 25;
    font-weight: 300;
    font-size: 20px;
}
strong {
    font-weight: 700;
}
.help-text {
    margin-block-start: var(--spacing-sm);
}
.meta-container {
    display: flex;
    flex-direction: row;
    column-gap: var(--spacing-xl);
    row-gap: var(--spacing-lg);
    flex-wrap: wrap;
}
.meta-entry {
    display: flex;
    flex-direction: column;
}
.meta-field {
    color: var(--color-on-surface-variant);
    flex-shrink: 0;
}
.meta-value {
    font-size: 1.2em;
    font-weight: 500;
}
/*
 * Drawers
 */
sl-drawer::part(base) {
    overflow: clip !important; /* needed as of Shoelace 2.13.0 to fix drawer jank */
}
sl-drawer::part(panel) {
    background-color: var(--color-surface-container);
}
sl-drawer::part(body) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    background-color: var(--color-background);
    border-radius: 15px;
    margin-inline: 10px;
}
/*
 * Tabs
 */
sl-tab::part(base) {
    font-size: inherit;
    color: var(--color-on-surface-variant);
}
sl-tab[active]::part(base) {
    color: var(--color-primary);
}
sl-tab-group::part(active-tab-indicator) {
    --indicator-color: var(--color-primary);
}
/* override display: none behavior to prevent Tabulator from rerendering */
sl-tab-panel[aria-hidden="true"] {
    display: block !important;
}
@supports (content-visibility: hidden) {
    sl-tab-panel[aria-hidden="true"] {
        content-visibility: hidden;
    }
}
@supports not (content-visibility: hidden) {
    sl-tab-panel[aria-hidden="true"] {
        height: 0 !important;
        overflow: hidden;
        visibility: hidden;
    }
}
/*
 * NoUiSlider
 */
#app .noUi-target {
    background-color: var(--color-outline-variant);
    border-color: transparent;
    box-shadow: none;
    border-radius: 3px;
}
#app .noUi-handle {
    background-color: var(--color-primary);
    box-shadow: none;
    border-color: transparent;
}
#app .noUi-handle:before,
#app .noUi-handle:after {
    background-color: var(--color-on-primary);
}
#app .noUi-connect {
    background-color: var(--color-tertiary-container);
}
#app .noUi-tooltip {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
    border: 0;
    line-height: 1;
}
/*
 * Tabulator
 */
#app .tabulator {
    border: 0;
    background-color: var(--color-background);
}
#app .tabulator-table {
    background-color: var(--color-background);
}
#app .tabulator-col-resize-handle:hover {
    background-color: var(--color-outline-variant);
}
#app .tabulator-row {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    border-bottom: 1px solid var(--color-outline-variant);
}
#app .tabulator-header {
    border-bottom: 2px solid var(--color-outline-variant);
}
#app .tabulator-header .tabulator-col {
    border: 0;
}
#app .tabulator-header,
#app .tabulator-header .tabulator-col {
    background-color: var(--color-background);
    color: var(--color-on-surface);
}
#app .tabulator-cell {
    border: 0;
}
#app .tabulator-selectable:hover {
    cursor: unset;
}
#app .tabulator-row [tabulator-field="actions"] {
    min-height: 36px;
}
#app .tabulator-footer {
    background-color: var(--color-surface-container);
    color: var(--color-on-surface);
    border: 0;
}
#app .tabulator-page {
    background-color: unset;
    border: 0;
}
#app .tabulator-page.active {
    color: var(--color-primary);
}
#app .tabulator-paginator {
    color: var(--color-on-surface);
}
#app .tabulator-col-title-holder {
    display: flex;
}
#app .tabulator-col-sorter {
    position: relative;
    color: inherit;
    transform: scale(0.8);
}
#app .tabulator-sortable[aria-sort="none"] .tabulator-col-sorter {
    opacity: 0.5;
}
#app .tabulator-col-title:not([style*="center"]) {
    width: unset;
    padding-right: 10px;
}
/* simulate text-align: right since we break it */
#app .tabulator-col-title-holder:has(.tabulator-col-title[style*="right"]) {
    justify-content: end;
}

    .theme-toggle.svelte-18eox5n {
        display: flex;
        gap: var(--spacing-sm);
    }
    sl-select.svelte-w3os01::part(listbox) {
        max-height: 200px;
    }
    sl-card.svelte-10th97o::part(body) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .user-details.svelte-10th97o {
        margin: var(--spacing-sm);
        margin-block-end: 0;
        display: block;
    }

    .user-details.svelte-10th97o::part(base) {
        justify-content: start;
        align-items: baseline;
        padding: 0;
    }

    .user-details.svelte-10th97o::part(label) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-inline-end: var(--spacing-sm);
    }

    .site-sidebar.is-mini .user-details.svelte-10th97o {
        transform: translateX(-2px);
        display: inline-flex;
    }

    .meta.svelte-10th97o {
        color: var(--color-on-surface);
        opacity: 0.4;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 11px;
        gap: var(--spacing-sm);
    }
    .container.svelte-zrn3u3 {
        --login-header-height: 100px;
        overflow: auto;
        background-color: var(--color-surface-container-lowest);
        height: 100vh;
        width: 100vw;
        position: fixed;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    .header.svelte-zrn3u3 {
        height: var(--login-header-height);
    }

    .inner.svelte-zrn3u3 {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        padding-block-end: var(--login-header-height);
    }

    .form.svelte-zrn3u3 {
        background-color: var(--color-surface-container);
        width: 100%;
        max-width: 400px;
        padding: var(--spacing-xl);
        z-index: 10;
        border-radius: 10px;
    }

    .server-message.svelte-zrn3u3 {
        position: absolute;
        inset-block-end: 100%;
        inset-inline-start: 0;
        width: 100%;
    }

    .header.svelte-zrn3u3 /* (unused) .footer*/ {
        display: flex;
        justify-content: end;
        padding: var(--spacing-md);
    }

    sl-badge.svelte-zrn3u3::part(base) {
        white-space: normal;
    }

    .logo.svelte-zrn3u3 {
        display: flex;
        margin-block-end: var(--spacing-lg);
        justify-content: center;
    }

    .logo.svelte-zrn3u3 img:where(.svelte-zrn3u3) {
        max-width: 100%;
        max-height: 150px;
    }

    .logo.svelte-zrn3u3 .ample:where(.svelte-zrn3u3) {
        width: 100%;
        height: 30px;
        background-color: var(--color-on-surface-variant);
        -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20332.201%2044.087'%20class='ample-logo'%3e%3cg%20class='amp'%3e%3cpath%20d='M8.727,44.087C2.475,44.087,0,41.612,0,37.055a15.964,15.964,0,0,1,.26-2.931L1.3,28.132c1.108-6.448,4.493-9.964,11.983-9.964h37.38l.52-2.8a12.851,12.851,0,0,0,.261-2.54c0-3.06-1.693-3.451-4.689-3.451H5.731L7.359,0H50.6c7.684,0,11.332,3.321,11.332,10.028a26.225,26.225,0,0,1-.392,4.3L56.266,44.087ZM49.363,25.528H15.7c-2.736,0-3.972,1.367-4.428,3.841l-.391,2.215a10.382,10.382,0,0,0-.2,1.759c0,1.953,1.043,2.213,3.256,2.213h33.67Z'/%3e%3cpath%20d='M128.062,44.087l5.079-28.719a12.851,12.851,0,0,0,.261-2.54c0-3.06-1.693-3.451-4.624-3.451H113.539l-6.121,34.71H97.259l6.12-34.71H82.8l-6.12,34.71H66.456L74.2,0h58.35c7.751,0,11.4,3.45,11.4,10.157a24.265,24.265,0,0,1-.391,4.168l-5.275,29.762Z'/%3e%3cpath%20d='M160.678,33.147l-1.953,10.94H148.5L156.249,0h46.174c6.252,0,8.791,2.409,8.791,6.968a17.517,17.517,0,0,1-.326,3l-2.149,12.372c-1.3,7.62-4.624,10.811-12.112,10.811Zm39.6-20.775a9.069,9.069,0,0,0,.194-1.692c0-1.955-1.106-2.151-3.256-2.151H164.977l-2.865,16.282h32.235c2.736,0,3.908-1.3,4.428-4.167Z'/%3e%3c/g%3e%3cpath%20d='M226.712,44.087c-7.684,0-11.4-3.32-11.4-10.028a26.816,26.816,0,0,1,.456-4.3L220.98,0H231.2l-5.013,28.719a16.183,16.183,0,0,0-.327,2.669c0,3.06,1.759,3.256,4.691,3.256h32.951l-1.692,9.443Z'/%3e%3cpath%20d='M281.6,44.087c-7.748,0-11.4-3.32-11.4-10.028a26.048,26.048,0,0,1,.392-4.3l3.451-19.8C275.152,3.516,278.6,0,286.158,0h37.251c6.252,0,8.792,2.409,8.792,6.968a17.525,17.525,0,0,1-.327,3l-1.041,6.185c-1.108,6.447-4.5,9.964-11.983,9.964H281.535l-.456,2.606a15.082,15.082,0,0,0-.261,2.669c0,3.06,1.628,3.256,4.689,3.256h40.962l-1.692,9.443Zm39.726-31.715a6.951,6.951,0,0,0,.129-1.563c0-1.953-1.041-2.28-3.256-2.28H288.371c-2.733,0-3.972,1.3-4.428,3.843l-1.107,6.317h33.6c2.8,0,3.972-1.433,4.428-3.908Z'/%3e%3c/svg%3e") no-repeat top center;
                mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20332.201%2044.087'%20class='ample-logo'%3e%3cg%20class='amp'%3e%3cpath%20d='M8.727,44.087C2.475,44.087,0,41.612,0,37.055a15.964,15.964,0,0,1,.26-2.931L1.3,28.132c1.108-6.448,4.493-9.964,11.983-9.964h37.38l.52-2.8a12.851,12.851,0,0,0,.261-2.54c0-3.06-1.693-3.451-4.689-3.451H5.731L7.359,0H50.6c7.684,0,11.332,3.321,11.332,10.028a26.225,26.225,0,0,1-.392,4.3L56.266,44.087ZM49.363,25.528H15.7c-2.736,0-3.972,1.367-4.428,3.841l-.391,2.215a10.382,10.382,0,0,0-.2,1.759c0,1.953,1.043,2.213,3.256,2.213h33.67Z'/%3e%3cpath%20d='M128.062,44.087l5.079-28.719a12.851,12.851,0,0,0,.261-2.54c0-3.06-1.693-3.451-4.624-3.451H113.539l-6.121,34.71H97.259l6.12-34.71H82.8l-6.12,34.71H66.456L74.2,0h58.35c7.751,0,11.4,3.45,11.4,10.157a24.265,24.265,0,0,1-.391,4.168l-5.275,29.762Z'/%3e%3cpath%20d='M160.678,33.147l-1.953,10.94H148.5L156.249,0h46.174c6.252,0,8.791,2.409,8.791,6.968a17.517,17.517,0,0,1-.326,3l-2.149,12.372c-1.3,7.62-4.624,10.811-12.112,10.811Zm39.6-20.775a9.069,9.069,0,0,0,.194-1.692c0-1.955-1.106-2.151-3.256-2.151H164.977l-2.865,16.282h32.235c2.736,0,3.908-1.3,4.428-4.167Z'/%3e%3c/g%3e%3cpath%20d='M226.712,44.087c-7.684,0-11.4-3.32-11.4-10.028a26.816,26.816,0,0,1,.456-4.3L220.98,0H231.2l-5.013,28.719a16.183,16.183,0,0,0-.327,2.669c0,3.06,1.759,3.256,4.691,3.256h32.951l-1.692,9.443Z'/%3e%3cpath%20d='M281.6,44.087c-7.748,0-11.4-3.32-11.4-10.028a26.048,26.048,0,0,1,.392-4.3l3.451-19.8C275.152,3.516,278.6,0,286.158,0h37.251c6.252,0,8.792,2.409,8.792,6.968a17.525,17.525,0,0,1-.327,3l-1.041,6.185c-1.108,6.447-4.5,9.964-11.983,9.964H281.535l-.456,2.606a15.082,15.082,0,0,0-.261,2.669c0,3.06,1.628,3.256,4.689,3.256h40.962l-1.692,9.443Zm39.726-31.715a6.951,6.951,0,0,0,.129-1.563c0-1.953-1.041-2.28-3.256-2.28H288.371c-2.733,0-3.972,1.3-4.428,3.843l-1.107,6.317h33.6c2.8,0,3.972-1.433,4.428-3.908Z'/%3e%3c/svg%3e") no-repeat top center;
    }
    .c-rating.svelte-1aefkn7 {
        display: inline-flex;
        align-items: center;
        line-height: 0;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        height: 1em; /* set a height avg rating doesn't misalign ones without it */
    }

    .c-rating.disabled.svelte-1aefkn7 {
        pointer-events: none;
        opacity: 0.6;
    }

    .star.svelte-1aefkn7,
    .flag.svelte-1aefkn7 {
        transition: all 50ms linear;
    }

    .star.filled.svelte-1aefkn7 {
        color: var(--color-rating);
    }

    .star.svelte-1aefkn7:not(.filled) {
        opacity: 0.5;
    }

    @media (hover: hover) {
        .star.svelte-1aefkn7:hover,
        .flag.svelte-1aefkn7:hover {
            transform: scale(1.2);
        }
    }

    span.svelte-1aefkn7:not(.average) {
        cursor: pointer;
    }

    .stars.svelte-1aefkn7 {
        display: flex;
        margin: 0;
    }

    .flag.svelte-1aefkn7 {
        padding: 0;
        padding-inline-start: var(--spacing-sm);
        color: var(--color-favorite);
    }

    .average.svelte-1aefkn7 {
        padding-inline-start: var(--spacing-sm);
        overflow: visible !important;
    }

    .average.svelte-1aefkn7::part(base) {
        font-size: 0.8em;
        border: 0;
        color: var(--color-on-surface-variant);
        background-color: var(--color-surface-variant);
    }

    .errored.svelte-1aefkn7 {
        animation: svelte-1aefkn7-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    @keyframes svelte-1aefkn7-shake {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }

        20%,
        80% {
            transform: translate3d(1px, 0, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(-1px, 0, 0);
        }

        40%,
        60% {
            transform: translate3d(1px, 0, 0);
        }
    }
    .notification-card.svelte-lvrhx {
        border-radius: 4px;
        /*border-inline-start: 4px solid red;*/
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        font-size: 0.9em;
        line-height: 1.3;
        padding: var(--spacing-md);
        padding-inline-end: 0;
    }

    .notification-card.success.svelte-lvrhx {
        border-color: var(--swatch-green-500);
    }

    .notification-card.info.svelte-lvrhx {
        border-color: var(--swatch-blue-500);
    }

    .notification-card.warning.svelte-lvrhx {
        border-color: var(--swatch-yellow-500);
    }

    .notification-card.error.svelte-lvrhx {
        border-color: var(--swatch-red-500);
    }

    .style-icon.svelte-lvrhx {
        font-size: 20px;
    }

    .success.svelte-lvrhx .style-icon:where(.svelte-lvrhx) {
        color: var(--swatch-green-500);
    }

    .info.svelte-lvrhx .style-icon:where(.svelte-lvrhx) {
        color: var(--swatch-blue-500);
    }

    .warning.svelte-lvrhx .style-icon:where(.svelte-lvrhx) {
        color: var(--swatch-yellow-500);
    }

    .error.svelte-lvrhx .style-icon:where(.svelte-lvrhx) {
        color: var(--swatch-red-500);
    }

    .content.svelte-lvrhx {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .action-title.svelte-lvrhx {
        display: flex;
        gap: var(--spacing-sm);
    }
    .container.svelte-1cnb1hy {
        overflow-y: auto;
        max-height: 50svh;
        /*scrollbar-gutter: stable;*/
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .card-container.svelte-1cnb1hy {
        border: 1px solid var(--color-outline-variant);
        border-radius: 4px;
    }
    .table.svelte-8atg3c {
        display: grid;
        grid-template-columns: 1fr min-content min-content;
        gap: var(--spacing-lg);
    }

    .row.svelte-8atg3c {
        display: contents;
    }

    sl-alert.svelte-8atg3c {
        margin-block-start: var(--spacing-xl);
    }

    sl-card.svelte-8atg3c::part(base) {
        width: 300px;
    }

    .clear-notifications.svelte-8atg3c {
        margin-inline-end: auto;
    }

    .main-button.svelte-8atg3c::part(label) {
        padding-inline-start: var(--spacing-sm);
    }

    .counter.svelte-8atg3c {
        display: flex;
    }

    .header.svelte-8atg3c {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .settings.svelte-8atg3c {
        margin-inline-start: auto;
    }
    .heading.svelte-4u4n1e .icon {
        flex-shrink: 0;
    }

    .heading.svelte-4u4n1e {
        display: flex;
        gap: var(--spacing-md);
        align-items: center;
        padding-inline: var(--sidebar-padding-inline);
        height: var(--sidebar-item-height);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9em;
        letter-spacing: 0.05em;
    }

    .site-sidebar.is-mini .heading.svelte-4u4n1e {
        padding-inline-start: 10px;
    }
    .site-sidebar__link.svelte-hwueds {
        display: flex;
        padding-block: var(--spacing-sm);
        padding-inline: var(--sidebar-padding-inline);
        align-items: center;
        overflow: hidden;
        font-weight: 400;
        height: var(--sidebar-item-height);
        gap: var(--spacing-md);
        color: var(--color-tertiary);
    }

    .site-sidebar__link.svelte-hwueds.active {
        background-color: var(--color-tertiary-container-variant);
        color: var(--color-on-tertiary-container);
        border-radius: 6px;
    }

    .site-sidebar__link.svelte-hwueds .icon {
        transform: scale(1.2);
    }
    sl-details.svelte-191r815::part(base) {
        background-color: transparent;
        border: 0;
        border-radius: 0;
    }

    sl-details.svelte-191r815::part(header) {
        padding-block: var(--spacing-sm);
        padding-inline-start: 0;
        padding-inline-end: var(--spacing-md);
        justify-content: space-around;
    }

    sl-details.svelte-191r815::part(summary-icon) {
        rotate: none; /* Disable the expand/collapse animation */
    }

    sl-details.svelte-191r815::part(summary) {
        overflow: hidden;
        min-width: 2rem;
    }

    sl-details.svelte-191r815::part(summary),
    sl-details.svelte-191r815::part(summary-icon) {
        color: var(--color-secondary);
    }

    sl-details.svelte-191r815::part(content) {
        padding-block: 0;
        padding-inline: 0;
    }

    .title-wrapper.svelte-191r815 {
        overflow: hidden;
    }

    sl-divider.svelte-191r815 {
        --spacing: var(--spacing-sm);
        --color: var(--color-outline-variant);
    }

    .items.svelte-191r815 {
        padding-block-end: var(--spacing-sm);
    }
    /*
    Base
    */
    .site-sidebar.svelte-w2ylsf {
        --sidebar-padding: var(--spacing-md);
        --sidebar-padding-inline: var(--spacing-md);
        --sidebar-item-height: 30px;
        background-color: var(--color-surface-container);
        color: var(--color-tertiary);
        width: var(--size-sidebar-width);
        padding: 0;
        padding-block-end: var(--spacing-lg);
        display: flex;
        flex-direction: column;
        position: relative;
        inset-inline-start: 0;
        z-index: 30;
    }

    .start.svelte-w2ylsf {
        display: flex;
        flex-direction: row;
        padding: var(--spacing-sm);
        padding-inline-start: 0;
        justify-content: space-between;
    }

    .middle.svelte-w2ylsf {
        position: relative;
        flex: 1;
        border-block: 1px solid var(--color-background);
    }

    .middle-inner.svelte-w2ylsf {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        padding: var(--sidebar-padding) 0;
        padding-inline: var(--spacing-md);
    }

    .end.svelte-w2ylsf {
        display: flex;
        flex-direction: column;
    }

    .site-sidebar.svelte-w2ylsf svg {
        position: relative;
        inset-block-end: 0.06em;
    }

    /*
    Mini mode
    */
    .site-sidebar.is-mini.svelte-w2ylsf {
        --size-sidebar-width: 46px;
    }

    .site-sidebar.is-mini.svelte-w2ylsf .site-sidebar__link .icon {
        transform: scale(1.4);
    }

    .site-sidebar.is-mini.svelte-w2ylsf .label {
        display: none;
    }

    .site-sidebar.is-mini.svelte-w2ylsf .start:where(.svelte-w2ylsf) {
        flex-direction: column;
    }
    .container.svelte-1tlawz1 {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    .playlists.svelte-1tlawz1 {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        gap: 1px;
        flex: 1;
        border: 1px solid var(--color-outline-variant);
    }

    .item.svelte-1tlawz1 {
        cursor: pointer;
    }

    .item-inner.svelte-1tlawz1 {
        display: block;
        padding: var(--spacing-sm) var(--spacing-md);
        max-width: 100%; /* key to having overflow take effect with the flex-start items */
    }
    sl-drawer.svelte-1orfjot::part(body) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    sl-drawer.svelte-1orfjot::part(footer) {
        display: flex;
        justify-content: space-between;
    }
    .url.svelte-13c16m8 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .url.svelte-13c16m8 sl-input:where(.svelte-13c16m8) {
        flex-grow: 1;
    }
    /* Hide the label when miniButtons */
    .c-actions.miniButtons.svelte-ttosdy .label {
        display: none;
    }

    sl-button-group.svelte-ttosdy::part(base) {
        flex-wrap: wrap;
    }

    sl-menu-item.svelte-ttosdy {
        max-width: 250px;
    }
    .disabled.svelte-evr5ij {
        pointer-events: none;
    }
    .container.svelte-1b9ool1 {
        display: grid;
        gap: 0;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        aspect-ratio: 1/1;
        overflow: hidden;
        align-self: start; /* don't stretch by default in flex parents */
        flex-shrink: 0;
        font-size: 0; /* hide the alt text */
        position: relative;
        background-color: oklch(50% 0 0 / 20%);
    }

    /* :after reserved for the inset border/shadow to stand out against background */
    .container.svelte-1b9ool1:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border: 1px solid transparent;
        border-radius: inherit;
    }

    .sl-theme-dark .container.svelte-1b9ool1:after {
        border-color: hsla(0, 0%, 15%, 1);
        mix-blend-mode: lighten;
    }

    .sl-theme-light .container.svelte-1b9ool1:after {
        border-color: hsla(0, 0%, 90%, 1);
        mix-blend-mode: darken;
    }

    .container.svelte-1b9ool1 > img:where(.svelte-1b9ool1) {
        width: 100%;
    }

    img.svelte-1b9ool1 {
        -o-object-fit: cover;
           object-fit: cover;
        grid-column: span 2;
    }

    .grid.svelte-1b9ool1 img:where(.svelte-1b9ool1) {
        grid-column: span 1;
    }

    .live-stream-icon.svelte-1b9ool1 {
        height: 100%;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        background-color: var(--color-secondary-container);
        color: var(--color-on-secondary-container);
        font-size: 1.5rem;
    }

    .mix-effect.svelte-1b9ool1 {
        position: relative;
    }

    .c-art.svelte-1b9ool1 .mix-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 99;
        color: var(--color-tertiary-container);
        opacity: 0.8;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0px 0px 15px black);
        pointer-events: none;
    }

    .sl-theme-dark .c-art.svelte-1b9ool1 .mix-icon {
        mix-blend-mode: plus-lighter;
    }

    /* (empty) :global(.sl-theme-light) .c-art :global(.mix-icon) {
        /*mix-blend-mode: screen;*\/
    }*/

    .mix-effect.svelte-1b9ool1:before {
        background-color: var(--color-secondary-container);
        content: "";
        height: 100%;
        left: 0;
        mix-blend-mode: plus-lighter;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .sl-theme-dark .mix-effect.svelte-1b9ool1 {
        background-color: var(--color-primary-container);
    }

    .sl-theme-dark .mix-effect.svelte-1b9ool1:before {
        background-color: var(--color-secondary-container);
        mix-blend-mode: plus-lighter;
    }

    .sl-theme-dark .mix-effect.svelte-1b9ool1 img:where(.svelte-1b9ool1) {
        filter: grayscale(100%) contrast(110%);
        mix-blend-mode: multiply;
    }

    .sl-theme-light .mix-effect.svelte-1b9ool1 {
        background-color: var(--color-primary-container);
    }

    .sl-theme-light .mix-effect.svelte-1b9ool1:before {
        background-color: var(--color-on-secondary-container);
        mix-blend-mode: screen;
    }

    .sl-theme-light .mix-effect.svelte-1b9ool1 img:where(.svelte-1b9ool1) {
        filter: grayscale(100%) contrast(70%);
        mix-blend-mode: multiply;
    }
    .container.svelte-13ix788 {
        display: flex;
        pointer-events: none;
        gap: 2px;
        /*background-color: blue;*/
        font-size: 5px;
        line-height: 0;
        align-items: center;
    }

    .star.svelte-13ix788 {
        width: 1em;
        height: 1em;
        border-radius: 50%;
    }

    .star.filled.svelte-13ix788 {
        color: var(--color-rating);
    }

    .star.empty.svelte-13ix788 {
        opacity: 0.3;
        transform: scale(0.8);
    }

    .fav.svelte-13ix788 {
        color: var(--color-favorite);
        transform: scale(1.1);
        padding-inline-start: 2px;
    }
    .test.svelte-as8qe5 {
        position: absolute;
        pointer-events: none;
        display: flex;
        width: 100%;
        justify-content: center;
        /*background-color: red;*/
        filter: grayscale(100%);
        opacity: 0;
    }

    .mini-rating.svelte-as8qe5 {
        /*line-height: 3px;*/
        margin-block-start: 3px;
    }

    .thumb.svelte-as8qe5 {
        flex-shrink: 0;
        margin-inline-end: var(--spacing-md);
        line-height: 0;
        height: 38px;
        width: 38px;
        /*cursor: grab;*/
    }

    .queue-item.svelte-as8qe5 {
        display: flex;
        padding: var(--spacing-sm) var(--spacing-md);
        padding-inline-start: 0;
        line-height: 1;
        align-items: center;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        cursor: pointer;
        position: relative;
    }

    .queue-item.currentlyPlaying.svelte-as8qe5 {
        background-color: var(--color-tertiary-container-variant);
        color: var(--color-on-tertiary-container);
    }

    .queue-item.currentlyPlaying.svelte-as8qe5 .secondary-info:where(.svelte-as8qe5) {
        color: var(--color-on-tertiary-container-variant);
    }

    .details.svelte-as8qe5 {
        display: flex;
        flex-direction: column;
        line-height: initial;
        justify-content: center;
        overflow: hidden;
    }

    .remove.svelte-as8qe5 {
        margin-inline-start: var(--spacing-md);
        margin-inline-end: var(--spacing-md);
        width: 20px;
    }

    .queue-item.svelte-as8qe5 .more:where(.svelte-as8qe5) {
        margin-inline-start: auto;
    }

    .matches-rating-threshold.svelte-as8qe5:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 0;
        background-color: var(--color-on-surface);
        -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3e%3cdefs%3e%3cpattern%20id='pattern_K8t3'%20patternUnits='userSpaceOnUse'%20width='3.5'%20height='3.5'%20patternTransform='rotate(45)'%3e%3cline%20x1='0'%20y='0'%20x2='0'%20y2='3.5'%20stroke='%23000000'%20stroke-width='1'%20/%3e%3c/pattern%3e%3c/defs%3e%3crect%20width='100%25'%20height='100%25'%20fill='url(%23pattern_K8t3)'%20opacity='1'/%3e%3c/svg%3e");
                mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3e%3cdefs%3e%3cpattern%20id='pattern_K8t3'%20patternUnits='userSpaceOnUse'%20width='3.5'%20height='3.5'%20patternTransform='rotate(45)'%3e%3cline%20x1='0'%20y='0'%20x2='0'%20y2='3.5'%20stroke='%23000000'%20stroke-width='1'%20/%3e%3c/pattern%3e%3c/defs%3e%3crect%20width='100%25'%20height='100%25'%20fill='url(%23pattern_K8t3)'%20opacity='1'/%3e%3c/svg%3e");
        z-index: 1;
        opacity: 0.4;
        pointer-events: none;
    }
    .container.svelte-1t3jbrs {
        overflow-y: auto;
        flex: 1;
        background-color: var(--color-background);
        border-radius: 15px;
        margin-block-end: var(--spacing-lg);
        position: relative;
        content-visibility: auto; /* free virtual list! */
    }

    .add-options.svelte-1t3jbrs {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: var(--spacing-md);
        position: absolute;
        inset: 0;
        inset-inline-start: var(--spacing-xl);
        inset-inline-end: var(--spacing-xxxl);
        padding-inline-end: var(--spacing-md);
        z-index: 10;
        opacity: 0;
        pointer-events: none;
    }

    .add-options.svelte-1t3jbrs:after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-color: var(--color-background);
        -webkit-mask-image: linear-gradient(to right, transparent 30%, black 60%);
                mask-image: linear-gradient(to right, transparent 30%, black 60%);
        z-index: -1;
    }

    .item-container.svelte-1t3jbrs:hover .add-options:where(.svelte-1t3jbrs) {
        opacity: 1;
        pointer-events: auto;
    }
    sl-card.svelte-1qbk39q {
        width: 320px;
    }

    sl-card.svelte-1qbk39q::part(body) {
        max-height: calc(100vh - 250px);
        display: flex;
        flex-direction: column;
        /*gap: var(--spacing-lg);*/
    }

    /* (unused) sl-card [slot="header"] {
        display: flex;
        justify-content: space-between;
    }*/

    sl-radio-group.svelte-1qbk39q {
        margin-block-end: var(--spacing-md);
    }

    sl-button.svelte-1qbk39q .icon {
        position: relative;
        top: 2px;
    }

    .header.svelte-1qbk39q h4:where(.svelte-1qbk39q) {
        cursor: pointer;
    }
    sl-card.svelte-1liq52s::part(body) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .rating-filter.is-enabled.svelte-1liq52s:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background-color: var(--color-on-surface);
        -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3e%3cdefs%3e%3cpattern%20id='pattern_K8t3'%20patternUnits='userSpaceOnUse'%20width='3.5'%20height='3.5'%20patternTransform='rotate(45)'%3e%3cline%20x1='0'%20y='0'%20x2='0'%20y2='3.5'%20stroke='%23000000'%20stroke-width='1'%20/%3e%3c/pattern%3e%3c/defs%3e%3crect%20width='100%25'%20height='100%25'%20fill='url(%23pattern_K8t3)'%20opacity='1'/%3e%3c/svg%3e");
                mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3e%3cdefs%3e%3cpattern%20id='pattern_K8t3'%20patternUnits='userSpaceOnUse'%20width='3.5'%20height='3.5'%20patternTransform='rotate(45)'%3e%3cline%20x1='0'%20y='0'%20x2='0'%20y2='3.5'%20stroke='%23000000'%20stroke-width='1'%20/%3e%3c/pattern%3e%3c/defs%3e%3crect%20width='100%25'%20height='100%25'%20fill='url(%23pattern_K8t3)'%20opacity='1'/%3e%3c/svg%3e");
        z-index: 1;
        opacity: 0.4;
        pointer-events: none;
    }
    .clear-all.svelte-zlfvl {
        margin-inline-start: auto;
    }

    .show-current.svelte-zlfvl .icon {
        position: relative;
        top: 1px;
    }

    .header.svelte-zlfvl h4:where(.svelte-zlfvl) {
        cursor: pointer;
    }
    /*
    Base
    */
    .site-queue.svelte-1pobj7n {
        background-color: var(--color-surface-container);
        width: var(--size-queue-width);
        max-width: 100%;
        z-index: 30;
        display: flex;
        position: relative;
        inset-inline-end: 0;
        transform: translateX(100%);
        will-change: transform;
        padding-inline-start: var(--spacing-lg);
        padding-inline-end: var(--spacing-lg);
    }

    .site-queue-inner.svelte-1pobj7n {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: inherit;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .site-queue.is-open.svelte-1pobj7n {
        transform: translateX(0%);
    }

    /*
    Drawer mode
    */
    .site-queue.is-drawer.svelte-1pobj7n {
        position: absolute;
        inset-block-start: 0;
        inset-block-end: var(--size-player-height);
        transition: transform 0.3s ease-out;
    }

    .site-queue.is-drawer.is-open.svelte-1pobj7n {
        transform: translateX(0%);
    }

    /*
    Pinned mode
    */

    .site-queue.svelte-1pobj7n:not(.is-open):not(.is-drawer) {
        display: none;
    }

    /*
    Items
    */

    .site-queue.svelte-1pobj7n .header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding: 0;
        gap: var(--spacing-md);
        border: 0;
        height: 48px;
    }

    .queue-dragging {
        background-color: var(--color-primary-container) !important;
        color: var(--color-on-primary-container);
        box-shadow: var(--shadow-lg);
    }

    sl-split-panel.svelte-1pobj7n {
        height: 100%;
    }

    .panel-section.svelte-1pobj7n {
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
    }

    /* (empty) .auto-queue {
        /*padding-block-start: var(--spacing-sm);*\/
    }*/
    sl-button.svelte-1fr86of {
        position: absolute;
        inset-inline-end: var(--spacing-md);
        inset-block-end: var(--spacing-md);
        z-index: 100;
        scale: 0.9;
        transform-origin: bottom right;
    }

    sl-button.svelte-1fr86of::part(base) {
        font-size: 20px;
    }

    sl-button.svelte-1fr86of .icon {
        position: relative;
        inset-inline-start: 2px;
        inset-block-start: 2px;
    }
    sl-button.svelte-14zr6ht {
        z-index: 1000;
    }
    .container.svelte-x6be8q {
        display: flex;
        gap: var(--spacing-md);
        align-items: center;
        height: 100%;
    }

    .art.svelte-x6be8q {
        border-radius: 3px;
        width: 50px;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* live stream icon */
    .art.svelte-x6be8q .c-art .live-stream-icon {
        font-size: 36px;
    }

    .text.svelte-x6be8q {
        overflow: hidden;
    }
    .bookmarks-container.svelte-1bmdu2x {
        height: var(--size-seekbar-height);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .seekBar.svelte-1bmdu2x {
        display: block;
        height: var(--size-seekbar-height);
        position: relative;
        background-color: var(--color-outline-variant);
        z-index: 100; /* make sure it is above waveform else it interferes with mouse */
        will-change: z-index;
    }

    /* increase clickable area of seekbar */
    .seekBar.svelte-1bmdu2x:after {
        content: "";
        height: 30px;
        background-color: transparent;
        width: 100%;
        display: block;
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .seekBar.svelte-1bmdu2x:not(.streaming) {
        cursor: pointer;
    }

    .seekBar.streaming.svelte-1bmdu2x {
        background-image: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 1rem,
            var(--color-inverse-primary) 1rem,
            var(--color-inverse-primary) 2rem
        );
        background-size: 200% 200%;
        animation: svelte-1bmdu2x-barberpole 120s linear infinite;
    }

    @keyframes svelte-1bmdu2x-barberpole {
        100% {
            background-position: 100% 100%;
        }
    }

    .progress.svelte-1bmdu2x {
        background-color: var(--color-waveform);
        position: absolute;
        inset-inline-end: 100%;
        inset-block-end: 0;
        inset-block-start: 0;
        width: 100%;
        will-change: transform;
    }

    /* while dragging increase the active area  */
    .dragging.seekBar:after {
        height: 200px !important;
    }

    .dragging.seekBar {
        z-index: 300; /* above all player items */
    }

    .dragging.seekBar .bookmarks-container {
        pointer-events: none;
    }
    /* (empty) .play-pause::part(base) {
        /*background-color: var(--color-highlight) !important;*\/
        /*color: var(--color-background) !important;*\/
        /*border-color: var(--color-highlight) !important;*\/
        /*border-radius: 8px;*\/
    }*/

    /* (empty) .play-pause:hover::part(base) {
        /*background-color: var(--color-background) !important;*\/
        /*color: var(--color-highlight) !important;*\/
        /*border-color: var(--color-highlight) !important;*\/
    }*/
    /* Generic grids should have this on the containing element */
    .generic-grid {
        row-gap: var(--spacing-xl);
        -moz-column-gap: var(--spacing-md);
             column-gap: var(--spacing-md);
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .generic-card.svelte-1w6pu5v {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        gap: var(--spacing-md);
    }

    .generic-card.svelte-1w6pu5v .c-art {
        height: 80px;
    }

    .generic-card.svelte-1w6pu5v .c-art .live-stream-icon {
        font-size: 36px;
    }

    .details.svelte-1w6pu5v {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .year.svelte-1w6pu5v + *:before {
        content: "\2022"; /* bullet */
        margin-inline-end: var(--spacing-sm);
    }
    sl-button.svelte-p3v58r * {
        pointer-events: none;
    }

    sl-card.svelte-p3v58r {
        max-width: 400px;
    }

    sl-card.svelte-p3v58r::part(body) {
        padding: var(--spacing-sm);
        padding-inline-end: var(--spacing-md);
    }
    sl-button.svelte-1upbkj3 * {
        pointer-events: none;
    }

    sl-card.svelte-1upbkj3 {
        max-width: 400px;
    }

    sl-card.svelte-1upbkj3::part(body) {
        padding: var(--spacing-sm);
        padding-inline-end: var(--spacing-md);
    }
    .current.svelte-1nfcuz8 {
        max-width: -moz-fit-content;
        max-width: fit-content;
        margin-block: var(--spacing-md);
        border: 1px solid var(--color-outline-variant);
        padding: var(--spacing-md);
        border-radius: 7px;
    }

    .label.svelte-1nfcuz8 {
        color: var(--color-primary);
        padding-inline-end: var(--spacing-md);
        text-align: end;
    }
    .container.svelte-1ozsl5g {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .duration-container.svelte-1ozsl5g {
        display: flex;
        gap: var(--spacing-lg);
        align-items: end;
        padding-block-end: var(--spacing-sm);
    }
    /* (unused) .overrides :global(label) {
        margin-block-start: var(--spacing-md);
        display: block;
    }*/

    /* (unused) .overrides label > input {
        margin-block-start: var(--spacing-sm);
        display: block;
    }*/

    .site-player__volume-slider.svelte-1i2h8lq {
        background-color: var(--color-outline-variant);
        display: flex;
        height: 4px;
        width: 100%;
        min-width: 50px;
        cursor: pointer;
        position: relative;
        border-radius: 100vh;
        justify-self: center;
        margin: 0 10px;
    }

    /* increase clickable area of volume */
    .site-player__volume-slider.svelte-1i2h8lq:after {
        content: "";
        height: 30px;
        background-color: transparent;
        width: calc(100% + 30px);
        display: block;
        position: absolute;
        opacity: 0;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index: 100;
    }

    .site-player__volume-value.svelte-1i2h8lq {
        background-color: var(--color-primary);
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        inset-block-start: 0;
        transition: width linear 200ms;
        border-radius: 100vh;
    }

    /* volume value indicator popup */
    .site-player__volume-value.svelte-1i2h8lq:before {
        opacity: 0;
        inset-block-start: calc(50% - 20px);
    }
    .bookmark.svelte-1g3ni4c {
        position: absolute;
        top: 50%;
        left: 0;
        background-color: currentcolor;
        border: 2px solid var(--color-surface-container);
        border-radius: 999px;
        width: 5px;
        height: 5px;
        z-index: 200;
        cursor: crosshair;
        box-sizing: content-box;
        transform: translateY(-50%);
    }
    sl-button.svelte-49j761 {
        position: relative;
    }

    .active.svelte-49j761:after {
        content: "";
        background-color: var(--color-primary);
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 100%;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
    }
    .close-button.svelte-tiba4b {
        position: fixed;
        right: 0;
        top: 0;
        transition: transform ease-in-out 0.5s;
        transform: translateX(0);
        inset-inline-end: var(--spacing-md);
        filter: drop-shadow(0 0 3px black);
    }

    .settings.svelte-tiba4b {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .queue-open .close-button.svelte-tiba4b {
        transform: translateX(calc(-1 * var(--size-queue-width)));
    }

    .queue-open sl-dropdown.svelte-tiba4b {
        transform: translateX(calc(-1 * var(--size-queue-width)));
        inset-inline-end: var(--spacing-md);
    }

    .presets.svelte-tiba4b {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav.svelte-tiba4b {
        display: flex;
        gap: var(--spacing-md);
    }

    .nav.svelte-tiba4b sl-button:where(.svelte-tiba4b) {
        width: 100%;
    }

    .options-button.svelte-tiba4b::part(base) {
        font-size: 20px;
        box-shadow: var(--shadow-md);
    }

    sl-dropdown.svelte-tiba4b {
        position: absolute;
        inset-inline-end: 55px;
        inset-block-end: calc(100% + var(--spacing-md));
        z-index: 100;
        transform: translateX(0);
        transition: transform ease-in-out 0.5s;
    }

    .options-button.svelte-tiba4b .icon {
        position: relative;
        inset-block-start: 2px;
    }
    .canvas-container.svelte-17jts7n {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -2;
        pointer-events: none;
        opacity: 0;
        transform: translateX(0);
        will-change: transform;
        transition: transform ease-in-out 0.5s;
        overflow: hidden;
    }

    .visualizer-open.svelte-17jts7n .canvas-container:where(.svelte-17jts7n) {
        pointer-events: auto;
        opacity: 1;
    }

    .queue-open.svelte-17jts7n .canvas-container:where(.svelte-17jts7n) {
        transform: translateX(calc(-1 * var(--size-queue-width)));
    }

    .viz-canvas.svelte-17jts7n {
        transition: transform ease-in-out 0.5s;
        transform: translateX(0);
        width: 100%;
        height: 100%;
    }

    .queue-open.svelte-17jts7n .viz-canvas:where(.svelte-17jts7n) {
        transform: translateX(calc(0.5 * var(--size-queue-width)));
    }

    .viz-canvas.svelte-17jts7n {
        transform: translateY(calc(-0.5 * var(--size-player-height)));
    }

    .queue-open.svelte-17jts7n .viz-canvas:where(.svelte-17jts7n) {
        transform: translateX(calc(0.5 * var(--size-queue-width)))
            translateY(calc(-0.5 * var(--size-player-height)));
    }

    /* behind the player UI */
    .behind.svelte-17jts7n {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--color-surface-container);
        width: 100%;
        z-index: -1;
        pointer-events: none;
    }

    .visualizer-open.svelte-17jts7n .behind:where(.svelte-17jts7n) {
        display: block;
    }

    .behind.svelte-17jts7n {
        height: 63px;
    }

    .is-expanded.svelte-17jts7n .behind:where(.svelte-17jts7n) {
        height: 103px;
    }

    /* COMMON */
    .site-player.svelte-17jts7n {
        --main-area-height: 60px;
        height: var(--size-player-height);
        z-index: 100;
        position: relative;
        color: var(--color-on-surface);
    }

    .site-player.svelte-17jts7n sl-skeleton {
        --color: currentColor;
        opacity: 0.2;
    }

    /* prettier-ignore */
    .container.svelte-17jts7n {
        display: grid;
        gap: 2px;
        align-items: center;
        grid-template-areas:
            "wave    wave    wave    wave      wave     wave       wave    wave         wave     wave         wave"
            "seekbar seekbar seekbar seekbar   seekbar  seekbar    seekbar seekbar      seekbar  seekbar      seekbar"
            ".       repeat  shuffle seek-back previous play-pause next    seek-forward bookmark more-options .";
        grid-template-columns: 1fr     32px    32px    32px      32px     auto       32px    32px         32px     32px         1fr;
        grid-template-rows: auto 4px 60px;
    }

    /* reduce inline padding for all the buttons */
    .site-player.svelte-17jts7n sl-button::part(label) {
        padding-inline: 0;
    }

    .site-player.svelte-17jts7n .container:where(.svelte-17jts7n) sl-button::part(base) {
        min-width: 32px;
        aspect-ratio: 1/1;
    }

    .player__seekbar.svelte-17jts7n {
        grid-area: seekbar;
    }

    .player__shuffle.svelte-17jts7n {
        grid-area: shuffle;
    }

    .player__repeat.svelte-17jts7n {
        grid-area: repeat;
    }

    .player__seek-back.svelte-17jts7n {
        grid-area: seek-back;
    }

    .player__previous.svelte-17jts7n {
        grid-area: previous;
    }

    .player__play-pause.svelte-17jts7n {
        grid-area: play-pause;
        z-index: 100;
    }

    .player__play-pause.svelte-17jts7n *::part(base) {
        height: calc(var(--main-area-height) - 18px);
        align-items: center;
        font-size: 2.5rem; /* bigger play button */
    }

    .player__play-pause.svelte-17jts7n sl-button::part(base),
    .player__next.svelte-17jts7n sl-button::part(base),
    .player__previous.svelte-17jts7n sl-button::part(base) {
        border-radius: 100%;
    }

    .player__next.svelte-17jts7n {
        grid-area: next;
    }

    .player__seek-forward.svelte-17jts7n {
        grid-area: seek-forward;
    }

    .player__bookmark.svelte-17jts7n {
        grid-area: bookmark;
    }

    .player__more-options.svelte-17jts7n {
        grid-area: more-options;
    }

    .player__waveform.svelte-17jts7n {
        height: 0;
        grid-area: wave;
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        position: relative;
    }

    .waveform.svelte-17jts7n {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 0.3s;
    }

    .waveform.active.svelte-17jts7n {
        opacity: 1;
        transition-delay: 2s;
    }

    /* hide envelopes */
    .waveform.svelte-17jts7n ::part(envelope) {
        opacity: 0;
    }

    .waveform.svelte-17jts7n ::part(envelope),
    .waveform.svelte-17jts7n ::part(polyline),
    .waveform.svelte-17jts7n ::part(envelope-circle) {
        pointer-events: none !important;
    }

    /* (empty) #waveformA {
        /*background-color: hsla(0, 100%, 50%, 0.5);*\/
    }*/

    /* (empty) #waveformB {
        /*background-color: hsla(240, 100%, 50%, 0.5);*\/
    }*/

    .player__now-playing.svelte-17jts7n {
        grid-area: now-playing;
    }

    .player__rating.svelte-17jts7n {
        grid-area: rating;
        justify-self: end;
        margin-inline-end: var(--spacing-md);
    }

    .player__current-time.svelte-17jts7n,
    .player__end-time.svelte-17jts7n,
    .player__toggle.svelte-17jts7n,
    .player__settings.svelte-17jts7n {
        position: absolute;
    }

    /* need to set from bottom as height can change but position is constant */
    .player__current-time.svelte-17jts7n,
    .player__end-time.svelte-17jts7n {
        line-height: 1;
        transform: translateY(100%);
        z-index: 200;
    }

    .player__current-time.svelte-17jts7n {
        inset-block-end: calc(var(--main-area-height) - var(--spacing-sm));
        inset-inline-start: var(--spacing-sm);
    }

    .player__end-time.svelte-17jts7n {
        inset-block-end: calc(var(--main-area-height) - var(--spacing-sm));
        inset-inline-end: var(--spacing-sm);
    }

    .player__toggle.svelte-17jts7n {
        inset-block-end: var(--spacing-sm);
        inset-inline-start: var(--spacing-sm);
    }

    .player__settings.svelte-17jts7n {
        display: none;
        inset-block-end: var(--spacing-sm);
        inset-inline-end: var(--spacing-sm);
    }

    /* hide non-permanent items */
    .player__now-playing.svelte-17jts7n,
    .player__volume.svelte-17jts7n,
    .player__rating.svelte-17jts7n {
        display: none;
    }

    /* ensure disabled buttons are not interactive */
    .site-player.svelte-17jts7n *[disabled] {
        pointer-events: none;
    }

    .site-player.is-expanded.svelte-17jts7n .player__waveform:where(.svelte-17jts7n) {
        height: 30px;
        pointer-events: initial;
        opacity: 1;
    }

    /* prettier-ignore */
    @media (min-width: 690px) {
        .container.svelte-17jts7n {
            grid-template-areas:
                                   "wave    wave           wave    wave      wave     wave       wave    wave         wave    wave    wave    wave     wave         wave           wave "
                                   "seekbar seekbar        seekbar seekbar   seekbar  seekbar    seekbar seekbar      seekbar seekbar seekbar seekbar  seekbar      seekbar        seekbar"
                                   ".       volume         .       seek-back previous play-pause next    seek-forward .       repeat  shuffle bookmark more-options .              .";
            grid-template-columns:  1fr     calc(32px * 6) 16px    32px      32px     auto       32px    32px         16px    32px    32px    32px     32px         calc(32px * 2) 1fr;
            grid-template-rows: auto 4px 60px;
        }

        .player__volume.svelte-17jts7n {
            grid-area: volume;
            display: flex;
            align-items: center;
            gap: var(--spacing-md)
        }
    }

    /* prettier-ignore */
    @media (min-width: 920px) {
        .container.svelte-17jts7n {
            grid-template-areas:
                                   "wave    wave           wave        wave           wave           wave    wave      wave     wave       wave    wave         wave    wave    wave    wave     wave         wave           wave    wave "
                                   "seekbar seekbar        seekbar     seekbar        seekbar        seekbar seekbar   seekbar  seekbar    seekbar seekbar      seekbar seekbar seekbar seekbar  seekbar      seekbar        seekbar seekbar"
                                   ".       now-playing    now-playing now-playing    rating         .       seek-back previous play-pause next    seek-forward .       repeat  shuffle bookmark more-options volume         volume  volume";
            grid-template-columns: 70px     calc(32px * 4) 1fr         calc(32px * 1) calc(32px * 3) 16px    32px      32px     auto       32px    32px         16px    32px    32px    32px     32px         calc(32px * 1) 1fr     calc((32px * 3) + 70px);
            grid-template-rows: auto 4px 60px;
        }

        .player__now-playing.svelte-17jts7n {
            display: block;
            overflow: hidden;
        }

        .player__rating.svelte-17jts7n {
            display: block;
            margin: unset;
        }

        .player__volume.svelte-17jts7n {
            justify-self: end;
            width: 100%;
            max-width: 300px;
            padding-inline-start: 20px;
            padding-inline-end: 60px;
        }
    }
    .alert-card.svelte-14wvsr5 {
        background-color: var(--color-surface-container-high);
        border-radius: 4px;
        display: flex;
        align-items: stretch;
        gap: var(--spacing-lg);
        flex-direction: row;
        justify-content: center;
        pointer-events: initial;
        position: relative;
    }

    .alert-card.success.svelte-14wvsr5 {
        border-color: var(--swatch-green-500);
    }

    .alert-card.info.svelte-14wvsr5 {
        border-color: var(--swatch-blue-500);
    }

    .alert-card.warning.svelte-14wvsr5 {
        border-color: var(--swatch-yellow-500);
    }

    .alert-card.error.svelte-14wvsr5 {
        border-color: var(--swatch-red-500);
    }

    .style-icon.svelte-14wvsr5 {
        width: 48px;
        color: white;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .success.svelte-14wvsr5 .style-icon:where(.svelte-14wvsr5) {
        background-color: var(--swatch-green-500);
    }

    .info.svelte-14wvsr5 .style-icon:where(.svelte-14wvsr5) {
        background-color: var(--swatch-blue-500);
    }

    .warning.svelte-14wvsr5 .style-icon:where(.svelte-14wvsr5) {
        background-color: var(--color-warning-500);
    }

    .error.svelte-14wvsr5 .style-icon:where(.svelte-14wvsr5) {
        background-color: var(--swatch-red-500);
    }

    .message.svelte-14wvsr5 {
        margin-block-start: var(--spacing-md);
    }

    .content.svelte-14wvsr5 {
        flex: 1;
        overflow: hidden;
        padding: var(--spacing-lg) 0;
    }

    .actions.svelte-14wvsr5 {
        /*margin-inline-start: var(--spacing-md);*/
        /*position: absolute;*/
        /*inset-block-start: var(--spacing-sm);*/
        /*inset-inline-end: var(--spacing-sm);*/
        align-self: start;
        margin-block-start: var(--spacing-sm);
        margin-inline-end: var(--spacing-sm);
    }
    .site-alerts.svelte-23uvfj .alert-card {
        box-shadow: var(--shadow-xxl), var(--shadow-xxl), var(--shadow-xxl);
        border-width: 2px;
        border-style: solid;
    }

    .card-container.svelte-23uvfj {
        pointer-events: initial;
    }

    .site-alerts.svelte-23uvfj {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        z-index: 1000;
        height: 100%;
        width: 500px;
        max-width: calc(100% - var(--spacing-xxl));
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        pointer-events: none;
        overflow: hidden;
    }
    sl-drawer.svelte-fzbg1c::part(panel) {
        min-height: 100%;
    }

    /* always show the footer, though empty */
    sl-drawer.svelte-fzbg1c::part(footer) {
        display: block;
    }

    sl-drawer.svelte-fzbg1c::part(header-actions) {
        align-content: center;
        gap: var(--spacing-lg);
    }

    .line.svelte-fzbg1c {
        transition: color 0.25s ease-in-out;
    }

    .current.svelte-fzbg1c {
        color: var(--color-primary);
    }

    .disable-scroll.svelte-fzbg1c {
        overflow: hidden !important;
    }

    .lyrics-container.svelte-fzbg1c {
        font-size: 2rem;
        line-height: 1.2;
        overscroll-behavior: contain;
        overflow: auto; /* key to keeping position after scrolling */
    }

    .line.svelte-fzbg1c {
        margin-block-end: var(--spacing-lg);
    }

    .hasTimestamps.svelte-fzbg1c {
        color: var(--color-outline-variant);
    }

    @media (hover: hover) {
        .hasTimestamps.svelte-fzbg1c .line:where(.svelte-fzbg1c):hover {
            cursor: pointer;
            color: var(--color-secondary);
        }
    }
    .container.svelte-mvq8vq {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        background-color: var(--preview-color-interface);
        aspect-ratio: 16 / 9;
        width: 50%;
        border: 2px solid var(--color-outline-variant);
        padding: 5px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .container.svelte-mvq8vq div:where(.svelte-mvq8vq) {
        display: flex;
        gap: 5px;
        padding: 2px;
    }

    span.svelte-mvq8vq {
        display: flex;
        gap: 2px;
    }

    sl-skeleton.svelte-mvq8vq {
        --color: var(--preview-color-text);
        --border-radius: 0;
        height: 3px;
        overflow: hidden;
    }

    .inner.svelte-mvq8vq {
        gap: 0;
        /*background-color: green;*/
        flex: 1;
        padding: 0 !important;
    }

    .header.svelte-mvq8vq {
        /*background-color: red;*/
        justify-content: space-between;
        padding: 4px !important;
    }

    .content.svelte-mvq8vq {
        background-color: var(--preview-color-background);
        flex: 1;
        border-radius: 5px;
        flex-direction: column;
        padding: 4px !important;
    }

    .sidebar.svelte-mvq8vq {
        width: 15%;
        flex-direction: column;
    }

    .player.svelte-mvq8vq {
        /*background-color: blue;*/
        flex-direction: column;
    }

    .waveform.svelte-mvq8vq {
        flex-direction: column;
    }

    .controls.svelte-mvq8vq {
        justify-content: center;
    }
    .container.svelte-9w5bdv {
        display: flex;
        flex-wrap: wrap;
    }

    .container.svelte-9w5bdv .c-theme-card:nth-child(odd) {
        z-index: 10;
    }

    .container.svelte-9w5bdv .c-theme-card:nth-child(even) {
        transform: translate(-5px, -20px);
    }

    .name.svelte-9w5bdv {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-block-start: var(--spacing-md);
    }
    .container.svelte-m0wowp {
        display: flex;
        gap: var(--spacing-md);
        margin-block-end: var(--spacing-xl);
    }

    .theme.svelte-m0wowp {
        background-color: var(--color-surface-container);
        padding: var(--spacing-lg);
        border-radius: var(--spacing-md);
    }

    sl-color-picker.hue-only.svelte-m0wowp::part(swatches),
    sl-color-picker.hue-only.svelte-m0wowp::part(grid),
    sl-color-picker.hue-only.svelte-m0wowp::part(opacity-slider),
    sl-color-picker.hue-only.svelte-m0wowp::part(input),
    sl-color-picker.hue-only.svelte-m0wowp::part(eye-dropper-button),
    sl-color-picker.hue-only.svelte-m0wowp::part(preview),
    sl-color-picker.hue-only.svelte-m0wowp::part(format-button) {
        display: none;
    }

    sl-color-picker.hue-only.svelte-m0wowp::part(base) {
        background-color: transparent;
        border: 0;
        height: 36px;
        overflow: hidden;
    }

    sl-color-picker.hue-only.svelte-m0wowp::part(trigger) {
        color: oklch(60% 0.2 var(--the-hue)) !important;
    }

    /* have to remap into OKLCH hue scale */
    sl-color-picker.hue-only.svelte-m0wowp::part(hue-slider) {
        background-image: linear-gradient(
            to right,
            oklch(50% 0.2 0) 0%,
            oklch(60% 0.2 30) 8.33%,
            oklch(70% 0.2 60) 16.67%,
            oklch(80% 0.2 90) 25%,
            oklch(70% 0.2 120) 33.33%,
            oklch(70% 0.2 150) 41.67%,
            oklch(70% 0.2 180) 50%,
            oklch(70% 0.2 210) 58.33%,
            oklch(60% 0.2 240) 66.67%,
            oklch(50% 0.2 270) 75%,
            oklch(50% 0.2 300) 83.33%,
            oklch(60% 0.2 330) 91.67%,
            oklch(70% 0.2 0) 100%
        );
    }

    .presets.svelte-m0wowp {
        display: grid;
        gap: var(--spacing-xxxl) var(--spacing-xxl);
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .heading.svelte-m0wowp {
        margin-block-end: var(--spacing-lg);
    }
    .wrapper.svelte-1xtz7f1 {
        display: grid;
        grid-template-columns: min-content auto;
    }

    sl-drawer.svelte-1xtz7f1::part(panel) {
        min-height: 100%;
    }

    /* always show the footer, though empty */
    sl-drawer.svelte-1xtz7f1::part(footer) {
        display: block;
    }

    sl-tab-group.real.svelte-1xtz7f1::part(nav),
    .real.svelte-1xtz7f1 sl-tab:where(.svelte-1xtz7f1) {
        pointer-events: none;
        display: none;
    }

    .fake.svelte-1xtz7f1 sl-tab-panel:where(.svelte-1xtz7f1) {
        pointer-events: none;
        display: none;
    }
    .container.svelte-1653bi7 {
        pointer-events: initial;
    }

    .container.svelte-1653bi7 .notification-card {
        width: 222px;
    }

    .site-notifications.svelte-1653bi7 {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        z-index: 1000;
        width: 300px;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        /*outline: 50px solid lime;*/
        pointer-events: none;
        overflow: hidden;
    }
    .header.svelte-1mj36xq {
        display: flex;
        gap: var(--spacing-md);
        align-items: center;
    }

    .heading.svelte-1mj36xq {
        font-size: 20px;
    }

    ul.svelte-1mj36xq {
        margin: var(--spacing-md) 0 0;
        scroll-behavior: smooth;
        scroll-padding-inline-start: var(--content-padding);
        scroll-snap-type: x;
    }

    li.svelte-1mj36xq {
        scroll-snap-align: start;
    }

    li.svelte-1mj36xq:last-of-type {
        scroll-snap-align: end;
    }

    .scroll-buttons.svelte-1mj36xq {
        margin-inline-start: auto;
    }

    .scroll-buttons.svelte-1mj36xq sl-button:where(.svelte-1mj36xq)::part(base) {
        font-size: 20px;
    }

    .cardlist-grid {
        display: grid;
        row-gap: var(--spacing-lg); /* default spacing */
        -moz-column-gap: var(--spacing-lg);
             column-gap: var(--spacing-lg); /* default spacing */
    }

    .cardlist-scroll {
        padding-inline-start: var(--content-padding);
        padding-inline-end: var(--content-padding);
        overflow-x: scroll;
        scrollbar-width: none;
        display: flex;
        gap: var(--spacing-lg); /* default spacing */
    }

    /* currently only Firefox supports scrollbar-width */
    .cardlist-scroll::-webkit-scrollbar {
        display: none;
    }

    /* override specificity */
    .cardlist-scroll.cardlist-scroll {
        grid-column: full; /* extend beyond content boundary */
    }
    .site-search.svelte-1lw13q2 {
        width: 300px; /* acts as max size */
    }

    .site-search.svelte-1lw13q2::part(input) {
        width: 100%; /* auto size */
    }

    .site-search.svelte-1lw13q2::part(clear-button) {
        flex-shrink: 0;
    }
    sl-drawer.svelte-1ncfzjx::part(base) {
        z-index: 100;
    }

    sl-drawer.svelte-1ncfzjx::part(panel) {
        min-height: 100%;
        width: 100%;
    }

    /* always show the footer, though empty */
    sl-drawer.svelte-1ncfzjx::part(footer) {
        display: block;
    }

    section.svelte-1ncfzjx + section:where(.svelte-1ncfzjx) {
        margin-top: var(--spacing-xxl);
    }

    .header-inner.svelte-1ncfzjx {
        display: flex;
        gap: var(--spacing-sm);
        align-items: center;
    }
    body,
    #app {
        background-color: var(--color-surface-container);
        color: var(--color-on-surface);
    }

    .site-header {
        flex-shrink: 0;
    }

    .site-sidebar {
        flex-shrink: 0;
    }

    .site-queue {
        flex-shrink: 0;
    }

    .site-inner {
        flex: 1;
        display: flex;
        flex-direction: row;
        z-index: 1;
    }

    .site-content {
        background-color: var(--color-background);
        border: 1px solid var(--color-background);
        position: relative;
        flex: 1;
        z-index: -10;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
        margin-block-end: var(--spacing-lg);
    }

    .site-content-inner {
        --content-padding: var(--spacing-xxl);
        container-name: site-content-inner;
        container-type: size;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        overflow-y: auto;
        padding-block-start: var(--spacing-xl);
        padding-block-end: var(--spacing-xl);
        display: grid;
        grid-template-columns:
            [full-start]
            var(--content-padding)
            [content-start]
            1fr
            [content-end]
            var(--content-padding)
            [full-end];
        grid-auto-rows: min-content;
        z-index: 1; /* for some reason things became unclickable without this, even in 3.1.1... */
    }

    .site-content-inner > * {
        grid-column: content;
        overflow-y: hidden; /* prevent Tabulator from growing horizontally */
    }

    .site-player {
        flex-shrink: 0;
    }