/* One display control occupies the former moon/sun position. Its fill describes image density. */
.theme-toggle.display-control-toggle .display-state-icon{width:20px;height:20px;fill:currentColor;stroke:none}
.display-options{position:fixed;z-index:96;display:flex;align-items:center;gap:8px;padding:4px 8px;max-width:calc(100vw - 16px);background:var(--site-bg);color:var(--site-ink);animation:display-options-open .14s ease-out}
.display-options[hidden]{display:none}
.display-options>a,.display-options>button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:7px;margin:0;border:0;border-radius:0;background:transparent;color:var(--site-ink);text-decoration:none;touch-action:manipulation}
.display-options>a:not([aria-current]){color:var(--site-muted)}
.display-options svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.display-options .display-state-icon{fill:currentColor;stroke:none}
.display-options>a:hover,.display-options>button:hover,.display-options>:focus-visible{color:var(--site-link)}
.display-options>:focus-visible{outline:2px solid var(--site-link);outline-offset:2px}
.display-options[data-direction='down']{animation-name:display-options-down}
@keyframes display-options-open{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@keyframes display-options-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.display-options{animation:none}}