@font-face {
    font-family: "Unbounded Rowan";
    src: url("assets/unbounded-cyrillic.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Streamer-controlled palette. These four values are persisted per channel. */
    --theme-background: #0b0f14;
    --theme-surface: #121922;
    --theme-text: #f3f6fa;
    --theme-accent: #5aa7ff;
    --theme-on-accent: #07111d;

    /* Derived surfaces and text roles. */
    --canvas: var(--theme-background);
    --work: var(--theme-surface);
    --subtle: color-mix(in oklch, var(--theme-surface) 90%, var(--theme-text));
    --raised: color-mix(in oklch, var(--theme-surface) 82%, var(--theme-text));
    --selected: color-mix(in oklch, var(--theme-surface) 78%, var(--theme-accent));
    --ink: var(--theme-text);
    --muted: color-mix(in oklch, var(--theme-text) 76%, var(--theme-background));
    --disabled: color-mix(in oklch, var(--theme-text) 50%, var(--theme-background));
    --divider: color-mix(in oklch, var(--theme-text) 18%, var(--theme-background));
    --divider-strong: color-mix(in oklch, var(--theme-text) 32%, var(--theme-background));

    /* Action and state roles. State colors are fixed so meaning stays consistent. */
    --request: var(--theme-accent);
    --request-hover: color-mix(in oklch, var(--theme-accent) 82%, var(--theme-text));
    --request-soft: color-mix(in oklch, var(--theme-surface) 82%, var(--theme-accent));
    --on-request: var(--theme-on-accent);
    --open: #56d690;
    --queued: var(--theme-accent);
    --playing: #efbf5c;
    --banned: #f27f84;
    --warning: #efbf5c;
    --danger: #f27f84;
    --on-danger: #22090c;
    --focus: color-mix(in oklch, var(--theme-accent) 78%, var(--theme-text));
    --twitch: #b793ff;
    --overlay: color-mix(in oklch, var(--theme-background) 78%, transparent);
    --shadow: color-mix(in srgb, #000 44%, transparent);

    /* Compatibility aliases used by the catalog and studio components. */
    --primary: var(--request);
    --primary-hover: var(--request-hover);
    --success: var(--open);
    --action: var(--request);
    --action-hover: var(--request-hover);
    --honey: var(--playing);
    --text-main: var(--ink);
    --text-muted: var(--muted);
    --bg-color: var(--canvas);
    --card-bg: var(--work);
    --border-color: var(--divider);
}

.seasonal-identity { display: none; }

[data-theme-style="rowan"] {
    --season-red: #d63a17;
    --season-orange: #f06d22;
    --season-paper: #e6c995;
    --season-olive: #68733f;
    --season-carbon: #0a0908;
    --season-shadow: color-mix(in srgb, #000000 74%, transparent);
    scrollbar-color: var(--season-red) var(--theme-background);
    selection-background: var(--season-orange);
}

[data-theme-style="rowan"] ::selection { background: var(--season-orange); color: var(--season-carbon); }
[data-theme-style="rowan"] .product-title strong,
[data-theme-style="rowan"] .channel-heading h1,
[data-theme-style="rowan"] .pinned-songs h2,
[data-theme-style="rowan"] .collection-browser summary,
[data-theme-style="rowan"] .widget-header h1,
.theme-preview[data-theme-style="rowan"] .theme-preview-head { font-family: "Unbounded Rowan", sans-serif; }

[data-theme-style="rowan"] .channel-strip {
    position: relative;
    top: auto;
    min-height: 176px;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    padding-block: 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--season-paper) 42%, transparent);
    background-color: var(--season-carbon);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--season-carbon) 100%, transparent) 0%, color-mix(in srgb, var(--season-carbon) 92%, transparent) 34%, color-mix(in srgb, var(--season-carbon) 16%, transparent) 100%), url("assets/rowan-autumn-wide.webp");
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 46px var(--season-shadow);
}

[data-theme-style="rowan"] .channel-heading { display: grid; align-content: end; gap: 4px; }
[data-theme-style="rowan"] .seasonal-identity { display: grid; margin-bottom: 10px; }
[data-theme-style="rowan"] .seasonal-identity strong {
    color: var(--season-paper);
    font-family: "Unbounded Rowan", sans-serif;
    font-size: 34px;
    font-weight: 820;
    line-height: .83;
    text-transform: uppercase;
}
[data-theme-style="rowan"] .seasonal-identity span {
    margin-top: 9px;
    color: var(--season-orange);
    font-family: "Unbounded Rowan", sans-serif;
    font-size: 8px;
    font-weight: 620;
    text-transform: uppercase;
}
[data-theme-style="rowan"] .channel-heading-label { color: color-mix(in srgb, var(--season-paper) 72%, transparent); }
[data-theme-style="rowan"] .channel-heading h1 { color: #ffffff; font-size: 13px; font-weight: 550; text-shadow: 0 2px 16px #000000; }
[data-theme-style="rowan"] .workspace-tool-label { color: var(--season-paper); text-shadow: 0 2px 10px #000000; }
[data-theme-style="rowan"] .workspace-profile-field,
[data-theme-style="rowan"] .workspace-public-status,
[data-theme-style="rowan"] .workspace-control {
    border-color: color-mix(in srgb, var(--season-paper) 38%, transparent);
    background: color-mix(in srgb, var(--season-carbon) 82%, transparent);
    box-shadow: 0 8px 24px var(--season-shadow);
    backdrop-filter: blur(12px);
}
[data-theme-style="rowan"] .workspace-public-status { color: #8fe0a2; }

[data-theme-style="rowan"] .catalog-command { position: relative; padding-top: 22px; }
[data-theme-style="rowan"] .catalog-command::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 86px;
    height: 3px;
    background: var(--season-red);
    content: "";
}
[data-theme-style="rowan"] .catalog-search { border-color: color-mix(in srgb, var(--season-paper) 34%, transparent); box-shadow: 0 8px 26px color-mix(in srgb, #000000 34%, transparent); }
[data-theme-style="rowan"] .quick-filter-label,
[data-theme-style="rowan"] .filter-label { color: var(--season-paper); }
[data-theme-style="rowan"] .parts-btn.active { border-color: var(--season-orange); background: color-mix(in srgb, var(--season-orange) 18%, var(--theme-surface)); color: var(--season-paper); }
[data-theme-style="rowan"] .autumn-filter-btn { border-color: var(--season-orange); background: var(--season-red); color: #ffffff; box-shadow: 0 8px 24px color-mix(in srgb, var(--season-red) 24%, transparent); }
[data-theme-style="rowan"] .autumn-filter-btn:hover,
[data-theme-style="rowan"] .autumn-filter-btn.active { background: var(--season-orange); color: var(--season-carbon); }

[data-theme-style="rowan"] .collection-browser summary { color: var(--season-paper); font-size: 10px; text-transform: uppercase; }
[data-theme-style="rowan"] .collection-browser-list button { border-style: dashed; border-color: color-mix(in srgb, var(--season-paper) 40%, transparent); background: color-mix(in srgb, var(--season-paper) 8%, var(--theme-surface)); }
[data-theme-style="rowan"] .collection-browser-list button[aria-pressed="true"] { border-style: solid; border-color: var(--season-orange); background: var(--season-paper); color: var(--season-carbon); }
[data-theme-style="rowan"] .collection-browser-list button[aria-pressed="true"] strong { color: var(--season-red); }

[data-theme-style="rowan"] .pinned-songs,
[data-theme-style="rowan"] .empty-results { position: relative; isolation: isolate; overflow: hidden; }
[data-theme-style="rowan"] .pinned-songs::after,
[data-theme-style="rowan"] .empty-results::after {
    position: absolute;
    right: -72px;
    bottom: -86px;
    z-index: -1;
    width: 390px;
    height: 260px;
    background: url("assets/rowan-ornament.webp") center / contain no-repeat;
    opacity: .3;
    content: "";
    pointer-events: none;
}
[data-theme-style="rowan"] .pinned-songs { border-color: color-mix(in srgb, var(--season-paper) 28%, transparent); background: color-mix(in srgb, var(--season-red) 8%, var(--theme-surface)); }
[data-theme-style="rowan"] .pinned-kicker { color: var(--season-orange); }
[data-theme-style="rowan"] .pinned-songs h2 { color: var(--season-paper); font-size: 13px; }
[data-theme-style="rowan"] .pinned-song { background: color-mix(in srgb, var(--season-carbon) 72%, transparent); }

[data-theme-style="rowan"] .songs-table thead { background: color-mix(in srgb, var(--season-paper) 10%, var(--theme-surface)); }
[data-theme-style="rowan"] .songs-table th { color: var(--season-paper); font-family: "Unbounded Rowan", sans-serif; font-size: 8px; font-weight: 560; text-transform: uppercase; }
[data-theme-style="rowan"] .songs-table tbody tr:hover { background: color-mix(in srgb, var(--season-orange) 9%, var(--theme-surface)); }
[data-theme-style="rowan"] .date-line strong { color: var(--season-paper); font-variant-numeric: tabular-nums; }
[data-theme-style="rowan"] .song-command-btn { border-color: var(--season-orange); }
[data-theme-style="rowan"] .song-command-btn:not(:disabled):hover { background: var(--season-red); color: #ffffff; }

.theme-preview[data-theme-style="rowan"] { border-color: var(--season-orange); box-shadow: 0 10px 26px color-mix(in srgb, #000000 32%, transparent); }
.theme-preview[data-theme-style="rowan"] .theme-preview-head,
[data-theme-style="rowan"] .widget-header {
    background-color: var(--season-carbon);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--season-carbon) 94%, transparent), color-mix(in srgb, var(--season-carbon) 24%, transparent)), url("assets/rowan-autumn-wide.webp");
    background-position: center;
    background-size: cover;
}
[data-theme-style="rowan"] .widget-header { min-height: 94px; border-bottom-color: var(--season-orange); }
[data-theme-style="rowan"] .widget-header h1 { color: var(--season-paper); font-size: 15px; }
[data-theme-style="rowan"] .widget-header p { color: #ffffff; text-shadow: 0 2px 10px #000000; }

:root[data-secret-theme="0309"] {
    --theme-background: #07070a !important;
    --theme-surface: #111018 !important;
    --theme-text: #f8f7ff !important;
    --theme-accent: #35e7ff !important;
    --theme-on-accent: #041015 !important;
    --playing: #ff4ca8;
    --warning: #ffdb4d;
}

[data-secret-theme="0309"] .channel-strip {
    position: sticky;
    top: 0;
    min-height: 68px;
    border-bottom: 2px solid var(--theme-accent);
    background: var(--theme-background);
    box-shadow: inset 0 -1px 0 var(--playing);
}
[data-secret-theme="0309"] .seasonal-identity,
[data-secret-theme="0309"] .pinned-songs::after,
[data-secret-theme="0309"] .empty-results::after { display: none; }

[data-secret-theme="0309"] .channel-heading-label::after {
    margin-left: 8px;
    color: var(--playing);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    content: "03 / 09";
}

[data-secret-theme="0309"] .product-mark,
[data-secret-theme="0309"] button,
[data-secret-theme="0309"] input,
[data-secret-theme="0309"] select,
[data-secret-theme="0309"] .table-card,
[data-secret-theme="0309"] .song-mobile-card {
    border-radius: 2px;
}

.secret-cameo {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 460;
    width: min(560px, 48vw);
    height: min(840px, 82vh);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(108%);
    transition: transform 680ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
    contain: layout paint;
}
.secret-cameo.is-visible { opacity: 1; transform: translateX(0); }
.secret-cameo img { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(-18px 12px 30px color-mix(in srgb, #000000 72%, transparent)); }
.secret-cameo-card {
    position: absolute;
    left: 3%;
    bottom: 24%;
    z-index: 1;
    width: 138px;
    min-height: 154px;
    display: grid;
    place-content: center;
    padding: 14px;
    border-top: 8px solid #ff4ca8;
    background: #f3e8cf;
    color: #111018;
    box-shadow: -8px 14px 30px color-mix(in srgb, #000000 52%, transparent);
    text-align: center;
    transform: rotate(-4deg);
}
.secret-cameo-card span { max-width: 16ch; font-family: "Unbounded Rowan", sans-serif; font-size: 8px; font-weight: 620; line-height: 1.35; text-transform: uppercase; }
.secret-cameo-card strong { margin-top: 8px; font-family: "Unbounded Rowan", sans-serif; font-size: 62px; font-weight: 820; line-height: .9; }
.secret-cameo-card small { margin-top: 6px; color: #c91f63; font-family: "Unbounded Rowan", sans-serif; font-size: 12px; font-weight: 800; }

@media (max-width: 720px) {
    [data-theme-style="rowan"] .channel-strip,
    .theme-preview[data-theme-style="rowan"] .theme-preview-head,
    [data-theme-style="rowan"] .widget-header {
        background-image: linear-gradient(90deg, color-mix(in srgb, var(--season-carbon) 96%, transparent), color-mix(in srgb, var(--season-carbon) 22%, transparent)), url("assets/rowan-autumn-compact.webp");
        background-position: 70% center;
    }
    [data-theme-style="rowan"] .channel-strip { min-height: 212px; align-items: end; padding-block: 14px; }
    [data-theme-style="rowan"] .seasonal-identity { margin-bottom: 4px; }
    [data-theme-style="rowan"] .seasonal-identity strong { font-size: 23px; }
    [data-theme-style="rowan"] .seasonal-identity span { margin-top: 6px; font-size: 7px; }
    [data-theme-style="rowan"] .pinned-songs::after,
    [data-theme-style="rowan"] .empty-results::after { right: -120px; opacity: .22; }
    :root[data-secret-theme="0309"] .channel-strip { min-height: 104px; }
    .secret-cameo { width: 100vw; height: min(700px, 78vh); }
    .secret-cameo-card { left: 12px; bottom: 18%; width: 112px; min-height: 128px; padding: 10px; }
    .secret-cameo-card strong { font-size: 48px; }
}