/* A graphite appearance with the user's own cat. */
:root[data-theme="black-cat"] {
  color-scheme: dark;
  --blue: #333538;
  --canvas-surface: #0e0f11;
  --page-surface: #18191c;
  --input-surface: #232428;
  --surface-soft: #303135;
  --surface-soft-2: #242529;
  --ink: #f4f4f5;
  --ink-80: #dedee1;
  --muted: #b0b1b7;
  --ink-60: var(--muted);
  --accent-fill: #505157;
  --blue-text: #e1e1e5;
  --control-line: #777980;
  --line: #3b3c42;
  --card-line: #3b3c42;
  --hero-ink: #f4f4f5;
  --hero-muted: #c4c5ca;
  --hero-tint: #252629;
  --theme-hero: radial-gradient(ellipse 310px 310px at 66% 230px, #4c4d51, #2a2b2f 65%, #202124);
  --theme-scroll: #4c4e54;
  --source-ink: #dedee3;
  --source-accent: #dedee3;
  --source-surface: #303135;
  --floating-surface: #303135f2;
  --nav-surface: #303135c9;
}
:root[data-theme="black-cat"] :is(.hero-star, .hero-star-high) { display: none; }
:root[data-mascot-family="black-cat"] .app-shell {
  --hero-mascot-width: 260px;
  --hero-mascot-height: 343px;
  --hero-mascot-left: calc(100% - 263px);
  --hero-portrait-top: max(calc(20px + var(--safe-top)), calc(var(--panel-top) - 270px));
}
:root[data-mascot-family="black-cat"] .app-shell[data-panel-position="low"] {
  --hero-mascot-width: 312px;
  --hero-mascot-height: 411px;
  --hero-mascot-left: calc(100% - 322px);
  --hero-portrait-top: max(calc(24px + var(--safe-top)), calc(var(--panel-top) - 340px));
}
:root[data-mascot-family="black-cat"] .app-shell[data-panel-position="high"] {
  --hero-mascot-width: 124px;
  --hero-mascot-height: 164px;
  --hero-mascot-left: calc(100% - 139px);
  --hero-portrait-top: max(calc(8px + var(--safe-top)), calc(var(--panel-top) - 145px));
}
:root[data-theme="black-cat"] :is(.hero-mascot, .hero-mascot-high) {
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 5px 12px #0005);
}
:root[data-theme="black-cat"] .detail-screen {
  --hero-mascot-width: 103px;
  --hero-mascot-height: 136px;
  --hero-mascot-left: calc(100% - 113px);
  --hero-mascot-top: calc(8px + var(--safe-top));
}
:root[data-theme="black-cat"] .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="black-cat"] :is(.content-panel, .detail-content, .bottom-sheet, .calendar-dialog, .regular-sheet-panel) {
  background: var(--page-surface);
}
:root[data-theme="black-cat"] :is(button, input, select, textarea, summary):focus-visible {
  outline-color: #b9bac4;
}
:root[data-theme="black-cat"] .color-mode-options:disabled { opacity: .65; }
.black-cat-preview { background: radial-gradient(ellipse at 60% 50%, #505156, #292a2e); }
.black-cat-preview img { width: 104px; height: 126px; align-self: start; margin-top: 5px; }
@media (max-height: 680px) {
  :root[data-mascot-family="black-cat"] .app-shell[data-panel-position="medium"] {
    --hero-mascot-width: 203px;
    --hero-mascot-height: 268px;
    --hero-mascot-left: calc(100% - 216px);
    --hero-portrait-top: max(calc(16px + var(--safe-top)), calc(var(--panel-top) - 208px));
  }
  :root[data-mascot-family="black-cat"] .app-shell[data-panel-position="low"] {
    --hero-mascot-width: 242px;
    --hero-mascot-height: 320px;
    --hero-mascot-left: calc(100% - 248px);
    --hero-portrait-top: max(calc(18px + var(--safe-top)), calc(var(--panel-top) - 265px));
  }
}

/* Use the site's existing star silhouette as a translucent golden backdrop. */
:root[data-theme="black-cat"] .hero-art::before {
  content: "";
  position: absolute;
  width: calc(var(--hero-mascot-width) * 1.22);
  height: calc(var(--hero-mascot-height) * .95);
  left: calc(var(--hero-mascot-left) - var(--hero-mascot-width) * .11);
  top: calc(var(--hero-portrait-top) - var(--hero-mascot-height) * .02);
  background: url("assets/themes/black-cat-star-20261014.svg") center / 100% 100% no-repeat;
  opacity: .22;
  transform: rotate(-12deg);
  pointer-events: none;
}
:root[data-theme="black-cat"] .detail-screen .hero-art::before {
  top: calc(var(--hero-mascot-top) - var(--hero-mascot-height) * .02);
}
:root[data-theme="black-cat"][data-mascot="hidden"] .hero-art::before { visibility: hidden; }
.black-cat-preview::before {
  content: "";
  position: absolute;
  inset: 6px 12px;
  background: url("assets/themes/black-cat-star-20261014.svg") center / contain no-repeat;
  opacity: .22;
  transform: rotate(-12deg);
}
.black-cat-preview img { position: relative; }