html.palette-shell {
  --palette-bg: #000000;
  --palette-fg: #FFFFFF;
  --bg: var(--palette-bg);
  --fg: var(--palette-fg);
  --fg-muted: rgba(255, 255, 255, 0.86);
  --muted: rgba(255, 255, 255, 0.72);
  --muted-soft: rgba(255, 255, 255, 0.46);
  background: var(--palette-bg);
}

html.palette-shell body {
  background: var(--palette-bg);
  color: var(--palette-fg);
}

.palette-shell :where(.watermark, .watermark-group .watermark) {
  font-family: var(--type-family);
  font-size: var(--type-identity-size);
  font-weight: var(--type-identity-weight);
  line-height: var(--type-identity-leading);
  letter-spacing: var(--type-identity-tracking);
  color: var(--type-identity-color);
}

.palette-shell :where(
  .project-title,
  .collection-card h2,
  .album h3,
  .ep-section h3,
  .library-title
) {
  font-family: var(--type-family);
  font-size: var(--type-primary-size);
  font-weight: var(--type-primary-weight);
  line-height: var(--type-primary-leading);
  letter-spacing: var(--type-primary-tracking);
  color: var(--type-primary-color);
}

.palette-shell :where(
  .site-subtitle,
  .location,
  .lately-updated,
  .project-type,
  .collection-meta,
  .release-date,
  .library-meta,
  .library-shelf h2,
  .page-content > h2,
  .month-toggle,
  .note-date,
  .practice-card small,
  .site-notes
) {
  font-family: var(--type-family);
  font-size: var(--type-secondary-size);
  font-weight: var(--type-secondary-weight);
  line-height: var(--type-secondary-leading);
  letter-spacing: var(--type-secondary-tracking);
  color: var(--type-secondary-color);
}

.palette-shell :where(
  .about-links,
  .filter-btn,
  .download-track,
  .download-ep,
  .permalink
) {
  font-family: var(--type-family);
  font-size: var(--type-utility-size);
  font-weight: var(--type-utility-weight);
  line-height: var(--type-utility-leading);
  letter-spacing: var(--type-utility-tracking);
  color: var(--type-utility-color);
}

.palette-shell :where(
  .project-title,
  .collection-card h2,
  .album h3,
  .ep-section h3,
  .library-title
) {
  text-wrap: pretty;
}

.palette-shell :where(.collection-card h2, .album h3, .ep-section h3) {
  margin-block: 0.75rem 0.25rem;
  text-wrap: balance;
}

.palette-shell :where(.collection-meta, .release-date) {
  margin-block: 0 0.75rem;
}

.palette-shell .project-title {
  max-width: 26ch;
}

.palette-shell .project-type {
  white-space: nowrap;
}

.palette-shell .library-shelf h2 {
  margin-bottom: 1rem;
}

.palette-shell .library-title {
  max-width: 28ch;
}

.palette-shell .library-meta {
  margin-top: 0.25rem;
}

.palette-shell .about-links {
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .palette-shell :where(.collection-card h2, .album h3, .ep-section h3) {
    margin-top: 0.625rem;
  }

  .palette-shell .project-title,
  .palette-shell .library-title {
    max-width: none;
  }

  .palette-shell .library-shelf h2 {
    margin-bottom: 0.875rem;
  }

  .palette-shell .about-links {
    gap: 0.625rem;
  }
}

.palette-shell :where(.return-icon, .site-mark, .footer-symbol) {
  color: var(--palette-fg);
}

.palette-shell :where(
  .return-icon,
  .project-link,
  .filter-btn,
  .month-toggle,
  .play-button,
  .presence-knob
):active {
  opacity: 0.76;
}

.palette-shell .collection-card a:active .collection-art {
  opacity: 0.76;
}

.palette-shell :where(
  .return-icon,
  .footer-symbol,
  .project-link,
  .project-title,
  .project-type,
  .project-mark,
  .collection-art,
  .filter-btn,
  .month-toggle,
  .play-button,
  .presence-knob,
  .img-modal__close
) {
  transition-duration: var(--interaction-duration);
  transition-timing-function: var(--interaction-easing);
}

.palette-shell .watermark,
.palette-shell .watermark-group .watermark {
  color: var(--type-identity-color);
}

.palette-shell .lately-updated,
.palette-shell .project-type,
.palette-shell .location {
  color: var(--type-secondary-color);
}

.palette-shell .about-copy {
  color: rgba(255, 255, 255, 0.88);
}

.palette-shell .icon-label {
  color: rgba(255, 255, 255, 0.9);
}

.palette-shell .site-notes,
.palette-shell .collection-meta,
.palette-shell .release-date {
  color: var(--type-secondary-color);
}

.palette-shell .page-content > h2,
.palette-shell .month-toggle {
  color: var(--type-secondary-color);
}

.palette-shell details[open] > .month-toggle,
.palette-shell .filter-btn.is-active,
.palette-shell .project-link:hover .project-title,
.palette-shell .project-link:focus-visible .project-title {
  color: var(--palette-fg);
}

.palette-shell .filter-btn {
  color: var(--type-utility-color);
}

.palette-shell .filter-btn::before,
.palette-shell .filter-btn::after,
.palette-shell .filter-btn:hover,
.palette-shell .filter-btn:focus-visible {
  color: rgba(255, 255, 255, 0.82);
}

.palette-shell .library-meta {
  color: var(--type-secondary-color);
}

.palette-shell #loader-overlay {
  background: var(--palette-bg);
}

.palette-shell .project,
.palette-shell .project:last-child,
.palette-shell .month-toggle {
  border-color: rgba(255, 255, 255, 0.12);
}

.palette-shell :where(.toggle-button, .play-button, .presence-knob::after, .presence-knob .pulse) {
  border-color: rgba(255, 255, 255, 0.42);
}

.palette-shell :where(
  .editorial-link,
  .about-links a,
  .site-notes a,
  .release-date a,
  .note-content a:not(:has(img, video, audio)),
  .practice-card a:not(:has(img, video, audio)),
  .permalink
):hover,
.palette-shell :where(
  .editorial-link,
  .about-links a,
  .site-notes a,
  .release-date a,
  .note-content a:not(:has(img, video, audio)),
  .practice-card a:not(:has(img, video, audio)),
  .permalink
):focus-visible {
  color: inherit;
  text-decoration-color: currentColor;
}

.palette-shell .note,
.palette-shell .practice-card {
  background: var(--palette-fg);
  color: var(--palette-bg);
}

.palette-shell .note-date,
.palette-shell .practice-card small,
.palette-shell .practice-card blockquote small {
  color: var(--palette-bg);
}

.palette-shell .practice-card :where(h2, p, a, blockquote, .expand-icon) {
  color: var(--palette-bg);
}

.palette-shell .note :where(a, button, input, select, textarea, audio, [tabindex]):focus-visible,
.palette-shell .practice-card :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--palette-bg);
}

.palette-shell .icon-disc {
  fill: var(--palette-fg);
}

.palette-shell :where(
  .icon-ring,
  .about-eye-shape,
  .fieldnotes-spiral,
  .art-centre-ring,
  .art-mark,
  .media-inner-ring,
  .code-bracket,
  .music-wave,
  .seeds-stem,
  .seeds-leaf,
  .lately-line
) {
  stroke: var(--palette-bg);
}

.palette-shell :where(
  .about-pupil,
  .art-centre,
  .media-centre,
  .code-cursor,
  .seeds-cradle,
  .lately-dot
) {
  fill: var(--palette-bg);
}

.palette-shell .note :where(*, *::before, *::after),
.palette-shell .practice-card :where(*, *::before, *::after) {
  color: var(--palette-bg);
}

.palette-shell .note .permalink,
.palette-shell .practice-card :where(.seed-context, .seed-term, .expand-icon, small, blockquote) {
  opacity: 1;
  --editorial-link-rest-opacity: 1;
}

.palette-shell .practice-card,
.palette-shell .practice-card:has(.seed-toggle:hover),
.palette-shell .practice-card:has(.seed-toggle:focus-visible) {
  opacity: 1;
}

.palette-shell .practice-card blockquote {
  border-left-color: var(--palette-bg);
}