html.palette-shell {
  -webkit-tap-highlight-color: transparent;
  --mono-black: 0 0 0;
  --mono-white: 255 255 255;
  --surface-channel: var(--mono-black);
  --ink-channel: var(--mono-white);
  --surface-page: rgb(var(--surface-channel));
  --ink-primary: rgb(var(--ink-channel) / 1);
  --ink-strong: rgb(var(--ink-channel) / 0.82);
  --ink-secondary: rgb(var(--ink-channel) / 0.62);
  --ink-quiet: rgb(var(--ink-channel) / 0.38);
  --line-subtle: rgb(var(--ink-channel) / 0.12);
  --line-control: rgb(var(--ink-channel) / 0.42);
  --focus-ring: rgb(var(--ink-channel) / 0.38);
  --audio-track: rgb(var(--ink-channel) / 0.18);
  --audio-fill: rgb(var(--ink-channel) / 0.75);
  --viewer-surface: rgb(var(--mono-black) / 0.9);
  --viewer-ink: rgb(var(--mono-white));
  --viewer-ink-muted: rgb(var(--mono-white) / 0.62);
  --artwork-edge: rgb(var(--ink-channel) / 0.06);
  --shadow-soft: rgb(var(--mono-black) / 0.35);
  --icon-field: rgb(var(--mono-white));
  --icon-mark: rgb(var(--mono-black));
  --monochrome-asset-filter: none;

  /* Compatibility aliases while page styles converge on semantic roles. */
  --palette-bg: var(--surface-page);
  --palette-fg: var(--ink-primary);
  --bg: var(--surface-page);
  --fg: var(--ink-primary);
  --fg-muted: var(--ink-strong);
  --muted: var(--ink-secondary);
  --muted-soft: var(--ink-quiet);
  --focus-color: var(--focus-ring);
  --focus-color-light: var(--focus-ring);
  color-scheme: dark;
  background: var(--surface-page);
}

html.palette-shell[data-theme="light"] {
  --surface-channel: var(--mono-white);
  --ink-channel: var(--mono-black);
  --icon-field: rgb(var(--mono-black));
  --icon-mark: rgb(var(--mono-white));
  --monochrome-asset-filter: brightness(0);
  color-scheme: light;
}

html.palette-shell body {
  background: var(--surface-page);
  color: var(--ink-primary);
}

.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(
  .about-name,
  .about-modal__title,
  .project-title,
  .collection-card h2,
  .album h3,
  .ep-section h3,
  .month-toggle
) {
  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(
  .location,
  .about-modal__role,
  .project-type,
  .collection-meta,
  .release-date,
  .page-content > h2,
  .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,
  .about-modal__contact,
  .about-modal__site,
  .filter-btn,
  .download-track,
  .download-ep,
  .about-link,
  .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
) {
  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 .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 {
    max-width: none;
  }

  .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
):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,
  .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 .project-type,
.palette-shell .location {
  color: var(--type-secondary-color);
}

.palette-shell :where(
  .footer-webring-link img,
  .label-mark > img
) {
  filter: var(--monochrome-asset-filter);
}

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

.palette-shell .page-content > h2 {
  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: var(--ink-strong);
}

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

.palette-shell .project,
.palette-shell .project:last-child,
.palette-shell .month-toggle {
  border-color: var(--line-subtle);
}

.palette-shell :where(.toggle-button, .play-button) {
  border-color: var(--line-control);
}

.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 {
  background: transparent;
  color: var(--palette-fg);
}

.palette-shell .practice-card :where(h2, p, a, blockquote) {
  color: inherit;
}

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

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

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

.palette-shell :where(
  .media-pupil,
  .art-centre,
  .code-cursor,
  .seeds-cradle
) {
  fill: var(--icon-mark);
}

.palette-shell .note .permalink,
.palette-shell .practice-card :where(.seed-context, 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(--ink-primary);
}