/* One quiet, monochrome button shows the theme you can switch to. */
#theme-toggle { appearance:none; display:grid; flex:0 0 38px; place-items:center; width:38px; height:38px; min-height:38px; padding:0; margin:0; border:1px solid #9998; border-radius:50%; background:transparent; color:inherit; cursor:pointer; transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease; }
#theme-toggle::before { content:none; }
#theme-toggle span { grid-area:1/1; display:grid; place-items:center; width:18px; height:18px; opacity:0; transform:rotate(-25deg) scale(.8); transition:opacity 220ms ease,transform 300ms cubic-bezier(.2,.7,.2,1); }
#theme-toggle span svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#theme-toggle[aria-checked="false"] .theme-icon-moon, #theme-toggle[aria-checked="true"] .theme-icon-sun { opacity:1; transform:rotate(0) scale(1); }
#theme-toggle:hover { border-color:currentColor; background:#9992; transform:rotate(-8deg); }
#theme-toggle:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
#theme-toggle[hidden] { display:none; }