/* The supplied green backdrop belongs to the illustration. UI surfaces are solid. */
:root[data-theme="slippers"][data-color-mode="light"] {
  --canvas-surface: #e6eee9;
  --page-surface: #f9fcfa;
  --input-surface: #ffffff;
  --surface-soft: #dfeee5;
  --surface-soft-2: #edf5f0;
  --ink: #153e2d;
  --ink-80: #315944;
  --muted: #536e60;
  --accent-fill: #156b47;
  --blue-text: #12623f;
  --control-line: #789686;
  --line: #cbded2;
  --card-line: #cbded2;
  --hero-ink: #ffffff;
  --hero-muted: #effcf5;
  --hero-tint: #0c442d;
  --theme-hero: #0c442d;
  --theme-scroll: #dfeee5;
  --source-ink: #12623f;
  --source-accent: #156b47;
  --source-surface: #dfeee5;
  --floating-surface: #dfeee5f2;
  --nav-surface: #dfeee58c;
}
:root[data-theme="slippers"][data-color-mode="dark"] {
  --canvas-surface: #0a1710;
  --page-surface: #10251a;
  --input-surface: #173222;
  --surface-soft: #264936;
  --surface-soft-2: #1b3727;
  --ink: #ecf8ef;
  --ink-80: #d3e8da;
  --muted: #aecdb9;
  --accent-fill: #23764f;
  --blue-text: #8de2af;
  --control-line: #709b81;
  --line: #335a42;
  --card-line: #335a42;
  --hero-ink: #ffffff;
  --hero-muted: #effcf5;
  --hero-tint: #0c442d;
  --theme-hero: #0c442d;
  --theme-scroll: #264936;
  --source-ink: #8de2af;
  --source-accent: #8de2af;
  --source-surface: #264936;
  --floating-surface: #264936f2;
  --nav-surface: #2649368c;
}
:root[data-theme="slippers"] .hero-art::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--panel-top) + var(--page-panel-radius));
  background: url("assets/themes/slippers-background-20261012.png") center / 100% 100% no-repeat;
}
:root[data-theme="slippers"] .detail-screen .hero-art::before {
  height: calc(var(--page-hero-height) + var(--page-panel-radius));
}
:root[data-theme="slippers"] :is(.hero-star, .hero-star-high) { display: none; }
:root[data-mascot-family="slippers"] .app-shell {
  --hero-mascot-width: 390px;
  --hero-mascot-height: 277px;
  --hero-mascot-left: calc(100% - 370px);
  --hero-mascot-top: calc(var(--panel-top) - 262px);
  --hero-portrait-top: var(--hero-mascot-top);
}
:root[data-mascot-family="slippers"] .app-shell[data-panel-position="high"] {
  --hero-mascot-width: 205px;
  --hero-mascot-height: 146px;
  --hero-mascot-left: calc(100% - 182px);
  --hero-mascot-top: calc(var(--panel-top) - 155px);
}
:root[data-mascot-family="slippers"] .app-shell[data-panel-position="low"] {
  --hero-mascot-width: min(490px, calc(100vw + 90px));
  --hero-mascot-height: calc(var(--hero-mascot-width) * .71);
  --hero-mascot-left: calc(50% - var(--hero-mascot-width) / 2);
  --hero-mascot-top: calc(var(--panel-top) - var(--hero-mascot-height) + 22px);
}
/* Crop only the empty canvas at display time; preserve the supplied artwork and glow. */
:root[data-theme="slippers"] .hero-mascot {
  object-fit: cover;
  object-position: center 55%;
  transform: none;
  filter: none;
}
:root[data-theme="slippers"] .detail-screen {
  --hero-mascot-width: 220px;
  --hero-mascot-height: 156px;
  --hero-mascot-left: calc(100% - 198px);
  --hero-mascot-top: calc(10px + var(--safe-top));
}
:root[data-theme="slippers"] .detail-screen .hero-mascot {
  width: var(--hero-mascot-width);
  height: var(--hero-mascot-height);
  left: var(--hero-mascot-left);
  top: var(--hero-mascot-top);
}
:root[data-theme="slippers"] .hero-main :is(h1, p),
:root[data-theme="slippers"] .detail-header :is(h1, p) { text-shadow: 0 1px 5px #08331fc0; }
:root[data-theme="slippers"] :is(.content-panel, .detail-content, .bottom-sheet, .calendar-dialog, .regular-sheet-panel) {
  background: var(--page-surface);
}
.slippers-preview { background: url("assets/themes/slippers-background-20261012.png") center / 100% 100% no-repeat; }
.slippers-preview img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: none; }
@media (max-height: 680px) {
  :root[data-mascot-family="slippers"] .app-shell[data-panel-position="medium"] {
    --hero-mascot-width: 300px; --hero-mascot-height: 213px;
    --hero-mascot-left: calc(100% - 286px); --hero-mascot-top: calc(var(--panel-top) - 205px);
  }
  :root[data-mascot-family="slippers"] .app-shell[data-panel-position="low"] {
    --hero-mascot-width: 340px; --hero-mascot-height: 242px;
    --hero-mascot-left: calc(50% - 170px); --hero-mascot-top: calc(var(--panel-top) - 226px);
  }
}

.slippers-meme-options { margin: 24px 0; }
.slippers-meme-options[hidden], .slippers-caption { display: none; }
.slippers-meme-options .helper-copy { margin: 8px 0 0; }

/* The whole distant scene leaves paved ground beneath the meme mascot. */
:root[data-theme="slippers"][data-slippers-meme="shown"] {
  --theme-hero: #59686d;
  --hero-tint: #59686d;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-art { isolation: isolate; }
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-art::before { display: none; }
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-meta-blur { display: none; }
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-art::after {
  --meme-photo-height: calc(var(--panel-top) + var(--page-panel-radius));
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: 100%;
  height: var(--meme-photo-height);
  background-image: url("assets/themes/slippers-road-no-river-20261012-perf-20261014.webp");
  background-position: center 65%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .detail-screen .hero-art::after {
  --meme-photo-height: calc(var(--detail-hero-height) + var(--page-panel-radius));
}
:root[data-theme="slippers"][data-slippers-meme="shown"] :is(.hero-main, .detail-header) :is(h1, p) {
  text-shadow: 0 1px 4px #000c, 0 0 12px #0008;
}
:root[data-theme="slippers"][data-slippers-meme="shown"][data-color-mode="light"] .hero-meta {
  color: #24363c;
  text-shadow: 0 1px 2px #fffc;
}
:root[data-theme="slippers"][data-slippers-meme="shown"][data-color-mode="dark"] .hero-meta {
  text-shadow: 0 1px 3px #000b;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-mascot {
  z-index: 1;
  filter: drop-shadow(0 8px 3px #0008);
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .app-shell {
  --hero-mascot-width: 150px;
  --hero-mascot-height: 107px;
  --hero-mascot-left: calc(50% - 75px);
  --hero-portrait-top: calc(var(--panel-top) - 164px);
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .slippers-caption {
  display: block;
  position: absolute;
  z-index: 2;
  top: calc(var(--panel-top) - 63px);
  left: 0;
  width: 100%;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: -.035em;
  text-shadow: 0 2px 3px #052a21cc, 0 0 12px #052a2199;
  pointer-events: none;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .app-shell[data-panel-position="high"] {
  --hero-mascot-width: 80px;
  --hero-mascot-height: 57px;
  --hero-mascot-left: calc(100% - 88px);
  --hero-portrait-top: calc(var(--panel-top) - 99px);
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .app-shell[data-panel-position="low"] {
  --hero-mascot-width: 220px;
  --hero-mascot-height: 156px;
  --hero-mascot-left: calc(50% - 110px);
  --hero-portrait-top: calc(var(--panel-top) - 228px);
}
:root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="low"] .schedule-screen .slippers-caption {
  top: calc(var(--panel-top) - 82px);
  font-size: 38px;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .hero-art::after,
:root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="medium"] .schedule-screen .hero-art::after,
:root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="high"] .schedule-screen .hero-art::after {
  background-position: center top;
  background-size: 100% calc(var(--panel-top) + 20px);
  background-color: #747676;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .detail-screen .hero-art::after {
  background-position: center top;
  background-size: 100% calc(var(--detail-hero-height) + 20px);
  background-color: #747676;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .detail-screen {
  --hero-mascot-width: 90px;
  --hero-mascot-height: 64px;
  --hero-mascot-left: calc(100% - 100px);
  --hero-mascot-top: calc(var(--detail-hero-height) - 100px);
}
:root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="high"] .schedule-screen .slippers-caption {
  left: var(--hero-mascot-left);
  width: var(--hero-mascot-width);
  top: calc(var(--panel-top) - 46px);
  font-size: 18px;
}
:root[data-theme="slippers"][data-slippers-meme="shown"] .detail-screen .slippers-caption {
  left: var(--hero-mascot-left);
  width: var(--hero-mascot-width);
  top: calc(var(--hero-mascot-top) + 61px);
  font-size: 18px;
}
:root[data-mascot="hidden"] .slippers-caption { visibility: hidden; }
@media (max-height: 680px) {
  :root[data-theme="slippers"][data-slippers-meme="shown"] .slippers-caption { font-size: 28px; }
  :root[data-theme="slippers"][data-slippers-meme="shown"] .app-shell[data-panel-position="medium"] {
    --hero-mascot-width: 90px;
    --hero-mascot-height: 64px;
    --hero-mascot-left: calc(50% - 45px);
    --hero-portrait-top: calc(var(--panel-top) - 109px);
  }
  :root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="medium"] .schedule-screen .slippers-caption {
    left: var(--hero-mascot-left);
    width: var(--hero-mascot-width);
    top: calc(var(--panel-top) - 47px);
    font-size: 20px;
  }
  :root[data-theme="slippers"][data-slippers-meme="shown"] .app-shell[data-panel-position="low"] {
    --hero-mascot-width: 140px;
    --hero-mascot-height: 100px;
    --hero-mascot-left: calc(50% - 70px);
    --hero-portrait-top: calc(var(--panel-top) - 157px);
  }
  :root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="low"] .schedule-screen .hero-art::after {
    background-position: center top;
    background-size: 100% calc(var(--panel-top) + 20px);
    background-color: #747676;
  }
  :root[data-theme="slippers"][data-slippers-meme="shown"] [data-panel-position="low"] .schedule-screen .slippers-caption {
    top: calc(var(--panel-top) - 62px);
    font-size: 28px;
  }
}