/* Tea House theme - GENERATED by themes/teahouse/gen_theme_css.py. DO NOT EDIT.
 *
 * Artwork by Meomi (www.meomi.com), from Google's Gmail 'Tea House' theme.
 * Regenerate with: python3 themes/teahouse/gen_theme_css.py
 *
 * One block per time-of-day scene. data-theme is server-rendered; data-scene is
 * set from the browser clock before first paint (see chat.js applyScene).
 */

/* midnight - canvas #404040, dark */
[data-theme="teahouse"][data-scene="midnight"] {
    --scene-footer: url('/images/themes/teahouse/midnight/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/midnight/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/midnight/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/midnight/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/midnight/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(90px, 9.58svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(0 0% 25%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(0 0% 12% / 0.10) 0%, hsl(0 0% 12% / 0.30) 45%, hsl(0 0% 12% / 0.68) 100%);
    --bg-sidebar: hsl(0 0% 16% / 0.74);
    --bg-header: hsl(0 0% 13% / 0.88);
    --bg-darkest: hsl(0 0% 8%);
    --bg-hover: hsl(0 0% 32% / 0.55);
    --bg-secondary: hsl(0 0% 18% / 0.72);
    --bg-tertiary: hsl(0 0% 14% / 0.70);
    --bg-input: hsl(0 0% 28% / 0.85);
    --bg-muted: hsl(0 0% 40%);
    --text-white: hsl(0 0% 98%);
    --text-primary: hsl(0 0% 92%);
    --text-secondary: hsl(0 0% 80%);
    --text-muted: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 60%);
    --text-placeholder: hsl(0 0% 52%);
    --border-dark: hsl(0 0% 7%);
    --border-subtle: hsl(0 0% 3%);
    --pattern-tint: hsl(0 0% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* 2am - canvas #202020, dark */
[data-theme="teahouse"][data-scene="2am"] {
    --scene-footer: url('/images/themes/teahouse/2am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/2am/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/2am/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/2am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/2am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(90px, 9.58svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(0 0% 13%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(0 0% 5% / 0.10) 0%, hsl(0 0% 5% / 0.30) 45%, hsl(0 0% 5% / 0.68) 100%);
    --bg-sidebar: hsl(0 0% 9% / 0.74);
    --bg-header: hsl(0 0% 6% / 0.88);
    --bg-darkest: hsl(0 0% 3%);
    --bg-hover: hsl(0 0% 25% / 0.55);
    --bg-secondary: hsl(0 0% 11% / 0.72);
    --bg-tertiary: hsl(0 0% 7% / 0.70);
    --bg-input: hsl(0 0% 21% / 0.85);
    --bg-muted: hsl(0 0% 33%);
    --text-white: hsl(0 0% 98%);
    --text-primary: hsl(0 0% 92%);
    --text-secondary: hsl(0 0% 80%);
    --text-muted: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 60%);
    --text-placeholder: hsl(0 0% 52%);
    --border-dark: hsl(0 0% 2%);
    --border-subtle: hsl(0 0% 1%);
    --pattern-tint: hsl(0 0% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* 314am - canvas #202020, dark */
[data-theme="teahouse"][data-scene="314am"] {
    --scene-footer: url('/images/themes/teahouse/314am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/314am/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/314am/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/314am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/314am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(90px, 9.58svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(0 0% 13%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(0 0% 5% / 0.10) 0%, hsl(0 0% 5% / 0.30) 45%, hsl(0 0% 5% / 0.68) 100%);
    --bg-sidebar: hsl(0 0% 9% / 0.74);
    --bg-header: hsl(0 0% 6% / 0.88);
    --bg-darkest: hsl(0 0% 3%);
    --bg-hover: hsl(0 0% 25% / 0.55);
    --bg-secondary: hsl(0 0% 11% / 0.72);
    --bg-tertiary: hsl(0 0% 7% / 0.70);
    --bg-input: hsl(0 0% 21% / 0.85);
    --bg-muted: hsl(0 0% 33%);
    --text-white: hsl(0 0% 98%);
    --text-primary: hsl(0 0% 92%);
    --text-secondary: hsl(0 0% 80%);
    --text-muted: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 60%);
    --text-placeholder: hsl(0 0% 52%);
    --border-dark: hsl(0 0% 2%);
    --border-subtle: hsl(0 0% 1%);
    --pattern-tint: hsl(0 0% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* 4am - canvas #202020, dark */
[data-theme="teahouse"][data-scene="4am"] {
    --scene-footer: url('/images/themes/teahouse/4am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/4am/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/4am/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/4am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/4am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(90px, 9.58svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(0 0% 13%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(0 0% 5% / 0.10) 0%, hsl(0 0% 5% / 0.30) 45%, hsl(0 0% 5% / 0.68) 100%);
    --bg-sidebar: hsl(0 0% 9% / 0.74);
    --bg-header: hsl(0 0% 6% / 0.88);
    --bg-darkest: hsl(0 0% 3%);
    --bg-hover: hsl(0 0% 25% / 0.55);
    --bg-secondary: hsl(0 0% 11% / 0.72);
    --bg-tertiary: hsl(0 0% 7% / 0.70);
    --bg-input: hsl(0 0% 21% / 0.85);
    --bg-muted: hsl(0 0% 33%);
    --text-white: hsl(0 0% 98%);
    --text-primary: hsl(0 0% 92%);
    --text-secondary: hsl(0 0% 80%);
    --text-muted: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 60%);
    --text-placeholder: hsl(0 0% 52%);
    --border-dark: hsl(0 0% 2%);
    --border-subtle: hsl(0 0% 1%);
    --pattern-tint: hsl(0 0% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* 6am - canvas #c0a080, LIGHT */
[data-theme="teahouse"][data-scene="6am"] {
    --scene-footer: url('/images/themes/teahouse/6am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/6am/footertile_bg_rside.webp');
    --scene-header: none;
    --scene-headertile: url('/images/themes/teahouse/6am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/6am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.54svh), auto min(399px, 42.54svh), auto, auto min(539px, 57.46svh), auto;

    --bg-primary: hsl(30 34% 63%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(30 15% 80% / 0.06) 0%, hsl(30 15% 80% / 0.22) 45%, hsl(30 15% 80% / 0.58) 100%);
    --bg-sidebar: hsl(30 12% 76% / 0.72);
    --bg-header: hsl(30 10% 80% / 0.85);
    --bg-darkest: hsl(30 13% 46%);
    --bg-hover: hsl(30 13% 64% / 0.45);
    --bg-secondary: hsl(30 13% 73% / 0.70);
    --bg-tertiary: hsl(30 12% 66% / 0.65);
    --bg-input: hsl(30 7% 86% / 0.92);
    --bg-muted: hsl(30 9% 52%);
    --text-white: hsl(30 19% 8%);
    --text-primary: hsl(30 15% 14%);
    --text-secondary: hsl(30 12% 26%);
    --text-muted: hsl(30 10% 34%);
    --text-tertiary: hsl(30 8% 42%);
    --text-placeholder: hsl(30 7% 52%);
    --border-dark: hsl(30 12% 41%);
    --border-subtle: hsl(30 10% 49%);
    --pattern-tint: hsl(30 13% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 8am - canvas #c0c080, LIGHT */
[data-theme="teahouse"][data-scene="8am"] {
    --scene-footer: url('/images/themes/teahouse/8am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/8am/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/8am/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/8am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/8am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(110px, 11.71svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(60 34% 63%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(60 15% 80% / 0.06) 0%, hsl(60 15% 80% / 0.22) 45%, hsl(60 15% 80% / 0.58) 100%);
    --bg-sidebar: hsl(60 12% 76% / 0.72);
    --bg-header: hsl(60 10% 80% / 0.85);
    --bg-darkest: hsl(60 13% 46%);
    --bg-hover: hsl(60 13% 64% / 0.45);
    --bg-secondary: hsl(60 13% 73% / 0.70);
    --bg-tertiary: hsl(60 12% 66% / 0.65);
    --bg-input: hsl(60 7% 86% / 0.92);
    --bg-muted: hsl(60 9% 52%);
    --text-white: hsl(60 19% 8%);
    --text-primary: hsl(60 15% 14%);
    --text-secondary: hsl(60 12% 26%);
    --text-muted: hsl(60 10% 34%);
    --text-tertiary: hsl(60 8% 42%);
    --text-placeholder: hsl(60 7% 52%);
    --border-dark: hsl(60 12% 41%);
    --border-subtle: hsl(60 10% 49%);
    --pattern-tint: hsl(60 13% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 10am - canvas #c0c080, LIGHT */
[data-theme="teahouse"][data-scene="10am"] {
    --scene-footer: url('/images/themes/teahouse/10am/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/10am/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/8am/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/8am/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/8am/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto min(110px, 11.71svh), auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(60 34% 63%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(60 15% 80% / 0.06) 0%, hsl(60 15% 80% / 0.22) 45%, hsl(60 15% 80% / 0.58) 100%);
    --bg-sidebar: hsl(60 12% 76% / 0.72);
    --bg-header: hsl(60 10% 80% / 0.85);
    --bg-darkest: hsl(60 13% 46%);
    --bg-hover: hsl(60 13% 64% / 0.45);
    --bg-secondary: hsl(60 13% 73% / 0.70);
    --bg-tertiary: hsl(60 12% 66% / 0.65);
    --bg-input: hsl(60 7% 86% / 0.92);
    --bg-muted: hsl(60 9% 52%);
    --text-white: hsl(60 19% 8%);
    --text-primary: hsl(60 15% 14%);
    --text-secondary: hsl(60 12% 26%);
    --text-muted: hsl(60 10% 34%);
    --text-tertiary: hsl(60 8% 42%);
    --text-placeholder: hsl(60 7% 52%);
    --border-dark: hsl(60 12% 41%);
    --border-subtle: hsl(60 10% 49%);
    --pattern-tint: hsl(60 13% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* noon - canvas #e0e0a0, LIGHT */
[data-theme="teahouse"][data-scene="noon"] {
    --scene-footer: url('/images/themes/teahouse/noon/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/noon/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/noon/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/noon/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/noon/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 39.94svh), auto min(549px, 54.95svh), auto min(100px, 10.01svh), auto min(450px, 45.05svh), auto;

    --bg-primary: hsl(60 51% 75%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(60 23% 85% / 0.06) 0%, hsl(60 23% 85% / 0.22) 45%, hsl(60 23% 85% / 0.58) 100%);
    --bg-sidebar: hsl(60 18% 81% / 0.72);
    --bg-header: hsl(60 15% 85% / 0.85);
    --bg-darkest: hsl(60 20% 51%);
    --bg-hover: hsl(60 20% 69% / 0.45);
    --bg-secondary: hsl(60 20% 78% / 0.70);
    --bg-tertiary: hsl(60 18% 71% / 0.65);
    --bg-input: hsl(60 11% 91% / 0.92);
    --bg-muted: hsl(60 14% 57%);
    --text-white: hsl(60 28% 8%);
    --text-primary: hsl(60 23% 14%);
    --text-secondary: hsl(60 18% 26%);
    --text-muted: hsl(60 15% 34%);
    --text-tertiary: hsl(60 13% 42%);
    --text-placeholder: hsl(60 10% 52%);
    --border-dark: hsl(60 18% 53%);
    --border-subtle: hsl(60 15% 61%);
    --pattern-tint: hsl(60 20% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 2pm - canvas #e0e0a0, LIGHT */
[data-theme="teahouse"][data-scene="2pm"] {
    --scene-footer: url('/images/themes/teahouse/2pm/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/noon/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/noon/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/noon/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/noon/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 39.94svh), auto min(549px, 54.95svh), auto min(100px, 10.01svh), auto min(450px, 45.05svh), auto;

    --bg-primary: hsl(60 51% 75%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(60 23% 85% / 0.06) 0%, hsl(60 23% 85% / 0.22) 45%, hsl(60 23% 85% / 0.58) 100%);
    --bg-sidebar: hsl(60 18% 81% / 0.72);
    --bg-header: hsl(60 15% 85% / 0.85);
    --bg-darkest: hsl(60 20% 51%);
    --bg-hover: hsl(60 20% 69% / 0.45);
    --bg-secondary: hsl(60 20% 78% / 0.70);
    --bg-tertiary: hsl(60 18% 71% / 0.65);
    --bg-input: hsl(60 11% 91% / 0.92);
    --bg-muted: hsl(60 14% 57%);
    --text-white: hsl(60 28% 8%);
    --text-primary: hsl(60 23% 14%);
    --text-secondary: hsl(60 18% 26%);
    --text-muted: hsl(60 15% 34%);
    --text-tertiary: hsl(60 13% 42%);
    --text-placeholder: hsl(60 10% 52%);
    --border-dark: hsl(60 18% 53%);
    --border-subtle: hsl(60 15% 61%);
    --pattern-tint: hsl(60 20% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 4pm - canvas #a0c0c0, LIGHT */
[data-theme="teahouse"][data-scene="4pm"] {
    --scene-footer: url('/images/themes/teahouse/4pm/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/4pm/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/4pm/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/4pm/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/4pm/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 47.00svh), auto min(399px, 47.00svh), auto min(90px, 10.60svh), auto min(450px, 53.00svh), auto;

    --bg-primary: hsl(180 20% 69%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(180 9% 80% / 0.06) 0%, hsl(180 9% 80% / 0.22) 45%, hsl(180 9% 80% / 0.58) 100%);
    --bg-sidebar: hsl(180 7% 76% / 0.72);
    --bg-header: hsl(180 6% 80% / 0.85);
    --bg-darkest: hsl(180 8% 46%);
    --bg-hover: hsl(180 8% 64% / 0.45);
    --bg-secondary: hsl(180 8% 73% / 0.70);
    --bg-tertiary: hsl(180 7% 66% / 0.65);
    --bg-input: hsl(180 4% 86% / 0.92);
    --bg-muted: hsl(180 6% 52%);
    --text-white: hsl(180 11% 8%);
    --text-primary: hsl(180 9% 14%);
    --text-secondary: hsl(180 7% 26%);
    --text-muted: hsl(180 6% 34%);
    --text-tertiary: hsl(180 5% 42%);
    --text-placeholder: hsl(180 4% 52%);
    --border-dark: hsl(180 7% 47%);
    --border-subtle: hsl(180 6% 55%);
    --pattern-tint: hsl(180 8% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 6pm - canvas #e0c060, LIGHT */
[data-theme="teahouse"][data-scene="6pm"] {
    --scene-footer: url('/images/themes/teahouse/6pm/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/6pm/footertile_bg_rside.webp');
    --scene-header: none;
    --scene-headertile: url('/images/themes/teahouse/6pm/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/6pm/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto, auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(45 67% 63%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(45 30% 80% / 0.06) 0%, hsl(45 30% 80% / 0.22) 45%, hsl(45 30% 80% / 0.58) 100%);
    --bg-sidebar: hsl(45 24% 76% / 0.72);
    --bg-header: hsl(45 20% 80% / 0.85);
    --bg-darkest: hsl(45 27% 46%);
    --bg-hover: hsl(45 27% 64% / 0.45);
    --bg-secondary: hsl(45 27% 73% / 0.70);
    --bg-tertiary: hsl(45 24% 66% / 0.65);
    --bg-input: hsl(45 15% 86% / 0.92);
    --bg-muted: hsl(45 19% 52%);
    --text-white: hsl(45 37% 8%);
    --text-primary: hsl(45 30% 14%);
    --text-secondary: hsl(45 24% 26%);
    --text-muted: hsl(45 20% 34%);
    --text-tertiary: hsl(45 17% 42%);
    --text-placeholder: hsl(45 13% 52%);
    --border-dark: hsl(45 24% 41%);
    --border-subtle: hsl(45 20% 49%);
    --pattern-tint: hsl(45 27% 20% / 0.035);
    --accent-primary: hsl(32 62% 38%);
    --accent-hover: hsl(32 62% 30%);
    --accent-light: hsl(32 56% 88%);
    --accent-focus: hsl(32 70% 45%);
    --accent-tint: hsl(32 62% 38% / 0.15);
}

/* 8pm - canvas #606080, dark */
[data-theme="teahouse"][data-scene="8pm"] {
    --scene-footer: url('/images/themes/teahouse/8pm/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/8pm/footertile_bg_rside.webp');
    --scene-header: none;
    --scene-headertile: url('/images/themes/teahouse/8pm/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/8pm/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 42.49svh), auto min(399px, 42.49svh), auto, auto min(540px, 57.51svh), auto;

    --bg-primary: hsl(240 14% 44%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(240 10% 12% / 0.10) 0%, hsl(240 10% 12% / 0.30) 45%, hsl(240 10% 12% / 0.68) 100%);
    --bg-sidebar: hsl(240 11% 16% / 0.74);
    --bg-header: hsl(240 11% 13% / 0.88);
    --bg-darkest: hsl(240 14% 8%);
    --bg-hover: hsl(240 10% 32% / 0.55);
    --bg-secondary: hsl(240 11% 18% / 0.72);
    --bg-tertiary: hsl(240 11% 14% / 0.70);
    --bg-input: hsl(240 9% 28% / 0.85);
    --bg-muted: hsl(240 7% 40%);
    --text-white: hsl(240 3% 98%);
    --text-primary: hsl(240 3% 92%);
    --text-secondary: hsl(240 2% 80%);
    --text-muted: hsl(240 2% 70%);
    --text-tertiary: hsl(240 2% 60%);
    --text-placeholder: hsl(240 1% 52%);
    --border-dark: hsl(240 14% 26%);
    --border-subtle: hsl(240 14% 22%);
    --pattern-tint: hsl(240 4% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* 10pm - canvas #202020, dark */
[data-theme="teahouse"][data-scene="10pm"] {
    --scene-footer: url('/images/themes/teahouse/10pm/footer_bg_rside.webp');
    --scene-footertile: url('/images/themes/teahouse/10pm/footertile_bg_rside.webp');
    --scene-header: url('/images/themes/teahouse/10pm/header_bg.webp');
    --scene-headertile: url('/images/themes/teahouse/10pm/headertile_bg.webp');
    --scene-canvastile: url('/images/themes/teahouse/10pm/canvastile_bg.webp');
    --scene-sizes: auto min(399px, 39.94svh), auto min(549px, 54.95svh), auto min(120px, 12.01svh), auto min(450px, 45.05svh), auto;

    --bg-primary: hsl(0 0% 13%);
    --bg-canvas-panel: linear-gradient(to bottom, hsl(0 0% 5% / 0.10) 0%, hsl(0 0% 5% / 0.30) 45%, hsl(0 0% 5% / 0.68) 100%);
    --bg-sidebar: hsl(0 0% 9% / 0.74);
    --bg-header: hsl(0 0% 6% / 0.88);
    --bg-darkest: hsl(0 0% 3%);
    --bg-hover: hsl(0 0% 25% / 0.55);
    --bg-secondary: hsl(0 0% 11% / 0.72);
    --bg-tertiary: hsl(0 0% 7% / 0.70);
    --bg-input: hsl(0 0% 21% / 0.85);
    --bg-muted: hsl(0 0% 33%);
    --text-white: hsl(0 0% 98%);
    --text-primary: hsl(0 0% 92%);
    --text-secondary: hsl(0 0% 80%);
    --text-muted: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 60%);
    --text-placeholder: hsl(0 0% 52%);
    --border-dark: hsl(0 0% 2%);
    --border-subtle: hsl(0 0% 1%);
    --pattern-tint: hsl(0 0% 95% / 0.025);
    --accent-primary: hsl(36 70% 58%);
    --accent-hover: hsl(36 70% 50%);
    --accent-light: hsl(36 63% 88%);
    --accent-focus: hsl(36 78% 65%);
    --accent-tint: hsl(36 70% 58% / 0.15);
}

/* Mobile: the sidebar overlays the chat rather than sitting beside it,
   so it needs more body behind the names. Breakpoint matches
   ChatSidebar.razor.css's own slide-in media query. */
@media (max-width: 768px) {
    [data-theme="teahouse"][data-scene="midnight"] { --bg-sidebar: hsl(0 0% 16% / 0.93); }
    [data-theme="teahouse"][data-scene="2am"] { --bg-sidebar: hsl(0 0% 9% / 0.93); }
    [data-theme="teahouse"][data-scene="314am"] { --bg-sidebar: hsl(0 0% 9% / 0.93); }
    [data-theme="teahouse"][data-scene="4am"] { --bg-sidebar: hsl(0 0% 9% / 0.93); }
    [data-theme="teahouse"][data-scene="6am"] { --bg-sidebar: hsl(30 12% 76% / 0.92); }
    [data-theme="teahouse"][data-scene="8am"] { --bg-sidebar: hsl(60 12% 76% / 0.92); }
    [data-theme="teahouse"][data-scene="10am"] { --bg-sidebar: hsl(60 12% 76% / 0.92); }
    [data-theme="teahouse"][data-scene="noon"] { --bg-sidebar: hsl(60 18% 81% / 0.92); }
    [data-theme="teahouse"][data-scene="2pm"] { --bg-sidebar: hsl(60 18% 81% / 0.92); }
    [data-theme="teahouse"][data-scene="4pm"] { --bg-sidebar: hsl(180 7% 76% / 0.92); }
    [data-theme="teahouse"][data-scene="6pm"] { --bg-sidebar: hsl(45 24% 76% / 0.92); }
    [data-theme="teahouse"][data-scene="8pm"] { --bg-sidebar: hsl(240 11% 16% / 0.93); }
    [data-theme="teahouse"][data-scene="10pm"] { --bg-sidebar: hsl(0 0% 9% / 0.93); }
}

/* Applies to every scene. */
[data-theme="teahouse"] {
    /* No wash by default: the artwork already keeps its detail in the top and
       bottom strips, and the panels above carry their own alpha. */
    --canvas-scrim: none;
}