@import url(https://db.onlinewebfonts.com/c/1c4c8cd628459c5bec9245ed02cceaf8?family=Typold+ExtraThin);
@import url(https://db.onlinewebfonts.com/c/8c7067c27f5ed69bb51fdff5ba80ace1?family=Typold+Thin);
@import url(https://db.onlinewebfonts.com/c/ef276aad8c240285e22039692dbebbc7?family=Typold+Light);
@import url(https://db.onlinewebfonts.com/c/9df30e030fd0ab44944695fe78f02c70?family=Typold+Regular);
@import url(https://db.onlinewebfonts.com/c/cba32049e94c871da0d2b6f168db463a?family=Typold+Medium);
@import url(https://db.onlinewebfonts.com/c/b278357b118484919beefdd102f93772?family=Typold+Bold);
@import url(https://db.onlinewebfonts.com/c/97e3f9e6c29236761e5fe771674607f4?family=Typold+ExtraBold);
@import url(https://db.onlinewebfonts.com/c/60a80a270fd00e8d4aef24e9fff2b93b?family=Typold+Black);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

div {
    box-sizing: border-box;
}

/* reset css */

a {
    text-decoration: none;
}

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

html,
body {
    width: 100%;
    height: var(--app-height);
    max-height: var(--app-height);
    background-color: #0a0a0a !important;
    font-family: "Typold Bold";
    font-display: swap;
    line-height: var(--font-line-height-sm);
    letter-spacing: var(--font-letter-spacing-sm);
    color: var(--brand-grey-dark-3);
    overflow: hidden;
}

/* variables */
:root {
    --app-height: 100vh;
    --floating-footer-bottom: 8%;

    --sidebar-width: clamp(100px, 80vw, 320px);
    --main-area-drawer-height: 70vh;

    --brand-background: #0a0a0a;
    --brand-button-background: #282828;
    --brand-drawer: #212121;
    --brand-drawer-handle: #414141;
    --brand-dark-1: #151515;
    --brand-dark-2: #2e2e2e;
    --brand-dark-3: #414141;
    --brand-button-blue: #3659f9;

    --slide-container-bg: url(https://image-api-pull.b-cdn.net/slidestream/slidestream-bg-7.png);

    --brand-pure-white: #ffffff;
    --brand-grey-light-1: #f9f9f9;
    --brand-grey-light-2: #f6f6f6;
    --brand-grey-light-3: #efefef;
    --brand-grey-light-4: #d9d9d9;
    --brand-grey-dark-1: #adadad;
    --brand-grey-dark-2: #979797;
    /* --brand-grey-dark-3: #777777; */
    --brand-grey-dark-3: #5f5f5f;
    --brand-grey-dark-4: #262626;
    --brand-black-1: #242424;
    --brand-pure-black: #000000;
    --brand-blue-1: #5170ff;
    --brand-blue-2: #3a59e9;
    --brand-blue-3: #5170ff;
    --brand-red-1: #ff3131;

    --font-size-2xs: clamp(0.55rem, 2.6vw, 0.6rem);
    --font-size-xs: clamp(0.65rem, 3.1vw, 0.75rem);
    --font-size-sm: clamp(0.75rem, 3.5vw, 0.8rem);
    --font-size-base: clamp(0.85rem, 4vw, 0.9rem);
    --font-size-md: clamp(0.95rem, 4.4vw, 1rem);
    --font-size-lg: clamp(1rem, 5.3vw, 1.2rem);
    --font-size-xl: clamp(1.2rem, 6.2vw, 1.2rem);
    --font-size-2xl: clamp(1.4rem, 7.1vw, 1.6rem);
    --font-size-3xl: clamp(1.6rem, 8vw, 1.8rem);

    --font-size-h-2xs: clamp(0.95rem, 4.4vw, 1.2rem);
    --font-size-h-xs: clamp(1rem, 5.3vw, 1.4rem);
    --font-size-h-sm: clamp(1.2rem, 6.2vw, 1.6rem);
    --font-size-h-base: clamp(1.4rem, 7.1vw, 1.8rem);
    --font-size-h-md: clamp(1.6rem, 7.5vw, 1.8rem);
    --font-size-h-lg: clamp(1.6rem, 8vw, 2rem);
    --font-size-h-xl: clamp(1.8rem, 8.8vw, 2.2rem);
    --font-size-h-2xl: clamp(2rem, 9.6vw, 2.4rem);
    --font-size-h-3xl: clamp(2.2rem, 10.4vw, 2.6rem);

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-line-height-3xs: 1;
    --font-line-height-2xs: 1.125;
    --font-line-height-xs: 1.25;
    --font-line-height-sm: 1.375;
    --font-line-height-base: 1.5;
    --font-line-height-lg: 1.625;
    --font-line-height-xl: 1.75;
    --font-line-height-2xl: 2;
    --font-line-height-3xl: 2.2;

    --font-letter-spacing-2xs: -0.05em;
    --font-letter-spacing-xs: -0.025em;
    --font-letter-spacing-sm: -0.0125em;
    --font-letter-spacing-base: 0em;
    --font-letter-spacing-lg: 0.0125em;
    --font-letter-spacing-xl: 0.025em;
    --font-letter-spacing-2xl: 0.05em;
    --font-letter-spacing-3xl: 0.1em;

    --capw: 412px;

    --spacing-3xs: min(0.8vw, calc(var(--capw) * 0.008));
    /* 4px max at 500px */
    --spacing-2xs: min(1.7vw, calc(var(--capw) * 0.017));
    /* 8.5px */
    --spacing-xs: min(2.6vw, calc(var(--capw) * 0.026));
    /* 13px */
    --spacing-sm: min(3.5vw, calc(var(--capw) * 0.035));
    /* 17.5px */
    --spacing-base: min(4.4vw, calc(var(--capw) * 0.044));
    /* 22px */
    --spacing-lg: min(5.3vw, calc(var(--capw) * 0.053));
    /* 26.5px */
    --spacing-xl: min(6.2vw, calc(var(--capw) * 0.062));
    /* 31px */
    --spacing-2xl: min(7.1vw, calc(var(--capw) * 0.071));
    /* 35.5px */
    --spacing-3xl: min(8vw, calc(var(--capw) * 0.08));
    /* 40px */

    --radius-3xs: 0.1rem;
    --radius-2xs: 0.2rem;
    --radius-xs: 0.3rem;
    --radius-sm: 0.4rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.6rem;
    --radius-xl: 0.7rem;
    --radius-2xl: 0.8rem;
    --radius-3xl: 0.9rem;
    --radius-full: 50%;
    --radius-none: 0;
}

#slideShowApp {
    display: flex;
    flex-direction: column;
    height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
    position: relative;
    width: 100vw;
    flex-wrap: nowrap;
    transition: height 0.25s ease-in-out, max-height 0.25s ease-in-out;
}

#mainArea {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* justify-content: center; */
    align-items: center;
    flex-grow: 1;
    min-height: 0;
}

#mainAreaLoader {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand-background);
    z-index: 20;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

#mainAreaLoader.show {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

#headerArea {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 0;
    height: auto;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
    background-color: var(--brand-background);
}

#headerBrandLogo img {
    object-fit: cover;
    object-position: center center;
    aspect-ratio: 1/1;
    border-radius: 20px;
    width: 1.8rem;
    height: 100%;
    flex-grow: 0;
}

#headerTitleContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 60%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    transition: opacity 0.15s ease;
    opacity: 1;
}

#headerTitleContainer.hidden {
    opacity: 0;
}

#headerTitleContainer p {
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-letter-spacing-sm);
    color: var(--brand-pure-white);
    text-align: center;
}

#headerButtonTray {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    height: auto;
    width: auto;
    align-items: center;
}

#presentButton {
    --icon-size: 1.2rem;

    padding: 4px;
    display: none;
}

.buttonContainer {
    --icon-size: 0.9rem;
    --icon-stroke: var(--brand-pure-white);
    --icon-fill: var(--brand-pure-white);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    aspect-ratio: 1/1;
    height: 2rem;
    width: auto;
    justify-content: center;
    align-items: center;
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    background-color: var(--brand-button-background);
    border-radius: var(--radius-full);
    padding: 8px;
}

.buttonContainer svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

.buttonContainer.drawerButton {
    background: none;
}

.buttonContainer.selected {
    background-color: var(--brand-button-blue);
}

.buttonContainer.selected.drawerButton {
    background-color: var(--brand-dark-3);
}

#sendMessageButton {
    flex-grow: 0;
    align-self: flex-end;
}

#creatorButtonTray {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    width: 100%;
    gap: var(--spacing-xs);
    overflow-x: auto;
    position: relative;
    align-items: center;
    background-color: var(--brand-background);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}

#creatorInputContainer {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    width: 100%;
    gap: var(--spacing-xs);
    position: relative;
    align-items: center;
    background-color: var(--brand-background);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
}

#userInputContainer {
    flex: 1;
    height: auto;
    transition: height 0.25s ease-in-out;
    position: relative;
}

#userInputContainer,
#userInput {
    min-height: 2em;
}

.textArea {
    display: block;
    width: 100%;
    height: auto;
    font-size: var(--font-size-base);
    font-family: "Typold Bold";
    letter-spacing: var(--font-letter-spacing-base);
    line-height: var(--font-line-height-base);
    min-height: 2.4rem;
    color: var(--brand-pure-white);
    border-radius: var(--radius-base);
    padding: var(--spacing-2xs) var(--spacing-xs);
    background-color: var(--brand-background);
    border: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    resize: none;
}

.textArea:focus {
    outline: none;
    border: none;
}

#footerArea {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 0;
    height: auto;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: space-between;
    background-color: var(--brand-background);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}

#footerPageTitleContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: auto;
    border-radius: 40px;
    background-color: var(--brand-button-background);
    padding: var(--spacing-xs) var(--spacing-base);
    transition: opacity 0.15s ease-in-out;
    pointer-events: auto;
}

/* Ensure creator opener matches previous/next size */
#openCreatorButtonTray {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* small helper to hide the creator tray */
.creator-button-tray.hidden {
    display: none;
}

#footerPageTitleContainer.hidden {
    opacity: 0;
    pointer-events: none;
}

#footerPageTitleContainer p {
    display: block;
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-letter-spacing-sm);
    color: var(--brand-pure-white);
    text-align: center;
    font-family: 'Typold Medium';
}

#floatingFooterArea {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 0;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: none;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);

    z-index: 30;
    position: absolute;
    left: 0;
    bottom: var(--floating-footer-bottom);
}

#floatingFooterArea .buttonContainer {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

#playButton {
    --icon-size: 0.8rem;
}

#slideContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background-image: var(--slide-container-bg);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: height 0.2 ease-in-out;
    justify-content: center;
    /* padding: 0 var(--spacing-sm); */
}

#slideContainer>.mdContainer {
    margin: auto 0;
}

#slideshowsContainer {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background-image: var(--slide-container-bg);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: height 0.2 ease-in-out;
}

#slideshowsContainerBrandName {
    color: var(--brand-pure-white);
    font-size: var(--font-size-lg);
    text-align: center;
    font-family: "Typold Bold";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
}

#slideshowsContainerRepeaterList {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    height: auto;
    padding: var(--spacing-base);
    gap: var(--spacing-sm);
}

#slideshowsContainerRepeaterList .slideshowCard:last-of-type {
    border-bottom: none;
}

.slideshowCard {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    background: var(--brand-dark-1);
    border-radius: var(--radius-xl);
    padding: var(--spacing-base) var(--spacing-base);
    gap: var(--spacing-xs);
    /* border: 1px solid var(--brand-grey-dark-4); */
    /* border-bottom: 1px solid var(--brand-grey-dark-3); */
}

.slideshowCard .title {
    color: var(--brand-pure-white);
    font-size: var(--font-size-md);
    font-family: "Typold Bold";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
}

.slideshowCard .description {
    color: var(--brand-grey-light-4);
    font-size: var(--font-size-base);
    font-family: "Typold Medium";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
}

.slideshowCard .slug {
    color: var(--brand-grey-dark-2);
    font-size: var(--font-size-sm);
    font-family: "Typold Regular";
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-sm);
    /* margin-bottom: var(--spacing-xs); */
    /* padding: var(--spacing-2xs) var(--spacing-xs); */
    /* background: var(--brand-dark-2); */
    border-radius: var(--radius-sm);
    display: inline-block;
    width: fit-content;
}

/* Fade top & bottom using pseudo-elements */
.image-fade::before,
.image-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    /* fade size */
    pointer-events: none;
    z-index: 2;
}

.image-fade::before {
    top: 0;
    background: linear-gradient(to bottom, var(--brand-background, #0f0f0f), transparent);
}

.image-fade::after {
    bottom: 0;
    background: linear-gradient(to top, var(--brand-background, #0f0f0f), transparent);
}


#drawerArea {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-height: 0;
    /* height: auto; */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;
    z-index: 100;
    pointer-events: none;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    background-color: var(--brand-drawer);
}

#drawerBackdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 90;
}

#drawerBackdrop.active {
    opacity: 1;
    pointer-events: auto;
}

#drawerHandleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--spacing-xs) 0;
    min-height: 3em;
}

#drawerHandle {
    width: 40px;
    height: 4px;
    background-color: var(--brand-drawer-handle);
    border-radius: var(--radius-xl);
}

#drawerMultiStateContainer {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: var(--spacing-xs) 0;
    overflow-y: auto;
    flex-wrap: nowrap;
}

#slideshowDetailsContentContainer {
    overflow: hidden;
    min-height: 0;
}

#slideshowDetailsContainer {
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--spacing-sm);
}

.textLinkContainer {
    width: 100%;
}

.multiStateContainer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
}

.multiStateDrawerContainer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-y: hidden;
}

#slideshowDetailsButtonContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    width: 100%;
    overflow-x: auto;
    position: relative;
    /* bottom: 0;
    left: 0; */
    align-items: center;
    background-color: var(--brand-drawer);
    padding: var(--spacing-sm) 0 var(--spacing-2xs) 0;
}

.textLinkContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    flex-wrap: nowrap;
    background-color: var(--brand-dark-1);
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin-bottom: var(--spacing-xl);
    align-items: center;
}

.linkInput {
    background-color: var(--brand-dark-1);
    color: var(--brand-pure-white);
    height: auto;
    font-size: var(--font-size-base);
    font-family: "Typold Bold";
    letter-spacing: var(--font-letter-spacing-base);
    line-height: var(--font-line-height-base);
    flex-grow: 1;
    border: none;
    padding: var(--spacing-xs) var(--spacing-xs);
}

.linkInput:focus {
    outline: none;
}

.linkInput:disabled,
.linkInput[readonly] {
    cursor: not-allowed;
    pointer-events: none;
    outline: none;
}

.copyLinkButton {
    --icon-size: 0.9rem;
    --icon-stroke: var(--brand-pure-white);
    --icon-fill: var(--brand-pure-white);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    aspect-ratio: 1/1;
    height: 2rem;
    width: auto;
    justify-content: center;
    align-items: center;
    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
    background-color: var(--brand-button-background);
    border-radius: var(--radius-sm);
    padding: 8px;
    flex-grow: 0;
}

.copyLinkButton svg {
    pointer-events: none;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
}

.copyLinkButton.selected {
    background-color: var(--brand-button-blue);
}

#presenterDrawerTabContainer {
    margin-bottom: var(--spacing-xl);
    border-radius: var(--radius-sm);
    background-color: var(--brand-dark-2);
    padding: 8px;
}

.drawerTab1 {
    background-color: var(--brand-dark-2);
    color: var(--brand-grey-light-4);
    padding: var(--spacing-2xs) var(--spacing-base);
    flex: 1 1 0;
    font-size: var(--font-size-sm);
    font-family: "Typold Medium";
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    transition: background-color 0.2s ease-in, color 0.2s ease-in;
}

.drawerTab1.selected {
    background-color: var(--brand-dark-3);
    color: var(--brand-pure-white);
    border-radius: var(--radius-sm);
}

.drawerTab2 {
    --icon-size: 0.7rem;
    --icon-stroke: var(--brand-pure-white);
    --icon-fill: var(--brand-pure-white);
    --icon-stroke-linecap: round;
    --icon-stroke-linejoin: round;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    width: fit-content;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    gap: var(--spacing-2xs);
    align-items: center;
    font-size: var(--font-size-base);
    font-family: "Typold Medium";
    padding: var(--spacing-2xs) var(--spacing-xs);
    color: var(--brand-pure-white);

    stroke: var(--icon-stroke);
    fill: var(--icon-fill);
    stroke-linecap: var(--icon-stroke-linecap);
    stroke-linejoin: var(--icon-stroke-linejoin);
}

.drawerTab2 svg {
    pointer-events: none;
    width: auto;
    height: var(--icon-size);
    overflow: visible;
}

.drawerTab2.selected {
    background-color: var(--brand-dark-3);
    border-radius: var(--radius-sm);
}

.scrollableTabsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-xs);
}

.scrollableTabsContainer::-webkit-scrollbar {
    display: none;
}

.scrollableTabsContainer>* {
    scroll-snap-align: start;
}

.repeaterList {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.repeaterList.show {
    display: flex;
}

.repeaterListItem {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-size: var(--font-size-base);
    font-family: "Typold Medium";
    color: var(--brand-pure-white);
    padding: var(--spacing-sm) var(--spacing-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.repeaterListItem.selected {
    background-color: var(--brand-dark-2);
    color: var(--brand-pure-white);
    border-radius: var(--radius-sm);
}

.scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scrollbar::-webkit-scrollbar-track {
    background: none;
    border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--brand-dark-3);
    border-radius: 10px;
}

.scrollbar.light::-webkit-scrollbar-thumb {
    background: var(--brand-grey-dark-1);
    border-radius: 10px;
}

.scrollbar.light::-webkit-scrollbar-track {
    background: var(--brand-grey-light-1);
}

/* Hide the scrollbar arrow buttons (up/down) for WebKit browsers */
.scrollbar::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Hide the scrollbar corner where horizontal and vertical scrollbars meet */
.scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

@media (min-width: 900px) {
    /* #slideContainer {
        max-width: 380px;
    } */

    #slideShowApp {
        max-width: 1024px;
        margin: 0 auto;
    }
}

/* Creator footer styles - isolated section */
/* .creator-footer {
    display: flex;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--brand-background);
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
} */

/* .creator-footer.hidden { display: none; }

.creator-footer-inner {
    display: flex;
    width: 100%;
    gap: var(--spacing-xs);
    align-items: stretch;
} */

/* .creator-textarea {
    background-color: transparent;
    color: var(--brand-pure-white);
    border: none;
    resize: none;
    padding: 8px 12px;
    font-size: var(--font-size-base);
    font-family: "Typold Bold";
    line-height: var(--font-line-height-base);
    border-radius: var(--radius-sm);
    flex: 1 1 auto;
    min-height: calc(1em * 1.2);
    max-height: calc(1.2em * 4 + 24px); 
    overflow-y: auto;
} */

/* .creator-textarea:focus { outline: none; } */

/* .creator-controls {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: center;
} */

/* .creator-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-button-background);
    color: var(--brand-pure-white);
    border: none;
    padding: 8px;
    border-radius: var(--radius-full);
    cursor: pointer;
} */

/* .creator-btn svg { width: 1rem; height: 1rem; } */

/* Creator button tray (horizontally scrollable) */
/* .creator-button-tray {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    background-color: var(--brand-background);
    overflow-x: auto;
    align-items: center;
} */

/* .creator-button-tray .creator-tray-btn {
    flex: 0 0 auto;
    background-color: var(--brand-button-background);
    color: var(--brand-pure-white);
    border: none;
    padding: 8px;
    border-radius: var(--radius-full);
    height: 2rem;
    aspect-ratio: 1/1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
} */

/* .creator-button-tray .creator-tray-btn:active { transform: translateY(1px); } */

/* .creator-send-btn {
    flex: 0 0 auto;
    margin-left: var(--spacing-2xs);
    padding: 8px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    aspect-ratio: 1/1;
    cursor: pointer;
} */

/* .creator-button-tray::-webkit-scrollbar { height: 8px; }
.creator-button-tray::-webkit-scrollbar-thumb { background: var(--brand-dark-3); border-radius: 10px; } */