/* Canonical sun/moon theme switch, shared by the tool and its studies. */
button.canvas-theme { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--fg1, var(--fg)); cursor: pointer; transition: border-color .2s; }
.canvas-theme:hover { border-color: var(--border, var(--line)); }
.theme-glyph { overflow: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.canvas-theme:hover .theme-glyph { transform: rotate(-12deg); }
.theme-rays, .theme-disc, .theme-stars { transform-origin: 16px 16px; }
.theme-rays { transition: transform .7s cubic-bezier(.3,0,.2,1), opacity .3s; }
.theme-disc { transition: r .6s cubic-bezier(.3,0,.2,1); }
.theme-shadow { transform: translate(18px,-18px); transition: transform .65s cubic-bezier(.3,0,.2,1); }
.theme-stars { opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .25s, transform .6s cubic-bezier(.2,.8,.2,1); }
[data-theme="dark"] .theme-rays { opacity: 0; transform: rotate(90deg) scale(.45); }
[data-theme="dark"] .theme-disc { r: 9px; }
[data-theme="dark"] .theme-shadow { transform: translate(5px,-4px); }
[data-theme="dark"] .theme-stars { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .canvas-theme, .canvas-theme * { transition: none !important; }
  .canvas-theme:hover .theme-glyph { transform: none; }
}
button.canvas-theme:focus-visible { outline: 2px solid var(--accent, var(--orange)); outline-offset: 4px; }