:root[data-skin="sunmoon"]:not([data-mood="moon"]) {
  color-scheme: light;
  --skin-bg: oklch(0.96 0.02 150);
  --skin-fg: oklch(0.27 0.03 235);
  --skin-muted: oklch(0.45 0.04 225);
  --skin-accent: oklch(0.47 0.09 200);
  --skin-accent-hover: oklch(0.38 0.09 200);
  --skin-heading: oklch(0.22 0.03 235);
  --skin-rule: oklch(0.27 0.03 235 / 0.15);
  --skin-selection: oklch(0.47 0.09 200 / 0.22);
  --look-pill: oklch(0.47 0.09 200 / 0.1);
  --look-sun: linear-gradient(170deg in oklch, oklch(0.975 0.014 85), oklch(0.92 0.035 200));
  --look-sun-accent: oklch(0.47 0.09 200);
  --look-moon-accent: oklch(0.52 0.14 320);
}

:root[data-skin="sunmoon"] {
  --pico-code-background-color: oklch(from var(--skin-fg) l c h / 0.08);
  --pico-code-color: var(--skin-fg);
  --pico-form-element-background-color: oklch(from var(--skin-fg) l c h / 0.05);
  --pico-form-element-active-background-color: oklch(from var(--skin-fg) l c h / 0.08);
  --pico-form-element-border-color: oklch(from var(--skin-fg) l c h / 0.22);
  --pico-form-element-active-border-color: var(--skin-accent);
  --pico-form-element-focus-color: oklch(from var(--skin-accent) l c h / 0.35);
  --pico-form-element-color: var(--skin-fg);
  --pico-form-element-placeholder-color: var(--skin-muted);
}

[data-skin] main :is(ul, ol):not(.pieces) {
  padding-left: 1.25rem;
}

[data-skin] main ul:not(.pieces) > li {
  list-style: disc;
}

[data-skin] main ol > li {
  list-style: decimal;
}

main blockquote > :last-child {
  margin-bottom: 0;
}

.pieces li {
  margin-bottom: 1.5rem;
}

.pieces .meta {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.pieces li > p {
  margin: 0.25rem 0 0;
}
